<!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吧。