JavaScript 完全知识体系

JavaScript 完全知识体系

FileList API

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>
2022/9/6 14:42:53