html5 列出文件夹下的所有图片
时间: 2023-09-02 13:03:19 浏览: 58
要列出文件夹下的所有图片,可以使用HTML5的新特性File API和JavaScript来实现。
首先,通过HTML的<input type="file">元素可以让用户选择文件夹,并将返回的文件列表存储在FileList对象中。我们可以使用<input type="file" multiple directory webkitdirectory>来实现选择文件夹的功能。
然后,在JavaScript中,我们可以使用FileReader对象的readEntries()方法来读取文件夹中的所有文件和子文件夹,并将它们存储在一个数组中。接着,我们可以通过递归遍历该数组,筛选出所有的图片文件,并将它们展示在页面上。
下面是一个基本的示例代码:
HTML部分:
```html
<input type="file" id="fileInput" multiple directory webkitdirectory>
<div id="imageContainer"></div>
```
JavaScript部分:
```javascript
function readFiles(entries) {
entries.forEach(function(entry) {
if (entry.isFile && entry.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
var img = document.createElement('img');
img.src = URL.createObjectURL(entry);
document.getElementById('imageContainer').appendChild(img);
} else if (entry.isDirectory) {
var dirReader = entry.createReader();
dirReader.readEntries(readFiles);
}
});
}
function handleFileSelect(event) {
var files = event.target.files;
var entries = [];
for (var i = 0; i < files.length; i++) {
var file = files[i];
var entry = file.webkitGetAsEntry();
entries.push(entry);
}
readFiles(entries);
}
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', handleFileSelect, false);
```
在这个示例中,用户选择的文件夹中的所有图片文件将会被列出并显示在id为"imageContainer"的div元素中。你可以根据实际需求进行修改和扩展。