用前端语言历遍本地文件夹下的图片文件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>遍历文件夹</title> <style> img { width: 200px; height: auto; display: block; margin-bottom: 10px; } </style> </head> <body> <input type="file" id="fileInput" multiple webkitdirectory directory> <output id="list"></output> <script> const fileInput = document.getElementById('fileInput'); const list = document.getElementById('list'); fileInput.addEventListener('change', async (event) => { const files = event.target.files; for (const file of files) { if (file.isFile) { const reader = new FileReader(); reader.onload = (e) => { const img = document.createElement('img'); img.src = e.target.result; list.appendChild(img); }; reader.readAsDataURL(file); } else if (file.isDirectory) { const dirReader = await file.createReader(); const entries = await dirReader.readEntries(); for (const entry of entries) { await handleEntries(entry); } } } }); async function handleEntries(entry) { if (entry.isFile) { const reader = new FileReader(); reader.onload = (e) => { const img = document.createElement('img'); img.src = e.target.result; list.appendChild(img); }; reader.readAsDataURL(entry); } else if (entry.isDirectory) { const dirReader = 原因是工作本身要处理很多图片,但是文件夹下挨个找很麻烦,所以想利用所学的知识(用纯前端来实现一个浏览图片并点击跳转的页面),不过现在看来纯前端是实现不了了,也懒得管,后期再学学js吧。 ...

2024-06-19 · 甲拉古日