FileList 是 File 对象的类数组序列(考虑 <input type='file' multiple>
或者从桌面拖动目录或文件),通常来自于一个 HTML input 元素的 files
属性,你可以通过这个对象访问到用户所选择的文件。该类型的对象还能是来自用户的拖放操作。
要加载文件,最直接的方法就是使用标准 <input type="file">
元素。JavaScript 会返回选定的 File
对象的列表作为 FileList
。
<input id="files" type="file" name="files[]" multiple /><output id="list"></output><script type="text/javascript">// 获选择按钮const filesInput = document.querySelector('#files');// 监听 change 事件filesInput.addEventListener('change', handleFilesSelect, false);// 选择文件后触发事件回调函数function handleFilesSelect(e) {// FileList 对象const files = e.target.files;let output = [];for (let i = 0, fileItem; (fileItem = files[i]); i++) {output.push('<li><strong>',escape(fileItem.name),'</strong>(',fileItem.type || 'n/a',')-',fileItem.size,' bytes,last modified:',fileItem.lastModifiedDate.toLocaleDateString(),'</li>');}// 将选择文件信息输出到文档中document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';}</script>
<input id="files" type="file" multiple /><script type="text/javascript">const fileRef = document.querySelector('#files');// FileList 对象(类似于 NodeList 对象)const files = fileRef.files;let file;// 遍历所有文件for (let i = 0; i < files.length; i++) {// 获取单个文件file = files.item(i);// 或者file = files[i];// 输出当前遍历的 File 对象的文件名console.log(file.name);}</script>