Javascript FileList示例|如何修改输入类型文件中的文件？

迪鲁宾
1,170 阅读4分钟

FileList 是javascript中的一个对象，用于操纵javascript应用程序中的文件上传。

什么是javascript中的FIleList？

FileList是Javascript中的一个对象，用于从用户表单的输入型文件控件中读取文件元数据和内容。当使用javascript中的drag and drop API上传文件时，它也会返回。

假设你在一个表单上有输入型文件

<input type=file multiple>

输入型文件用于从浏览器上传文件。多个选项可以上传多个文件。

当用户上传文件时，FileList对象保存文件信息。

以下是一个在纯javascript中读取输入类型的例子

  • inputfileselector 通过使用输入选择器标签分配
  • inputfileselector.files 或 返回 对象event.target.files FileList
  • FileList 对象包含文件对象的列表


<!DOCTYPE html>
<html>

<body>
  <h1>Input file example</h1>

<input type="file"  multiple>
<script>
  const inputfileselector = document.querySelector('input');
  inputfileselector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
        const fileList1 = inputfileselector.files;
    console.log(fileList1);
  });
</script>

</html>

输出

FileList {0: File, length: 1}
FileList {0: File, length: 1}
0: File {name: "Das.png", lastModified: 1625064498536, lastModifiedDate: Wed Jun 30 2021 20:18:18 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 859658, …}
length: 1

尽管FileList 包含文件列表，但它不是数组类型的对象，但它提供长度方法来返回文件数。

本教程列出了使用FIleList的各种例子

如何在javascript中把文件列表转换成数组？

FileList是一个对象而不是数组对象。为什么文件列表是一个数组？数组可以被突变或修改，而FileLlist不能被修改。因为这个原因，大多数DOM相关的类如NodeList,HTMLCollection 和FileList 都是对象。如何将FileList转换成一个数组？

const arrayFiles = Array.from(event.target.files)

如何在javascript中迭代FileList对象？

由于FileList不是一个数组，那么如何迭代一个FileList对象呢？

你可以用多种方式来迭代

使用for循环

使用for循环的语法很简单

下面是一个打印上传文件名的例子

<script>
  const inputfileselector = document.querySelector('input');
  inputfileselector.addEventListener('change', (event) => {
    const fileList = event.target.files;
for (var i = 0; i < fileList.length; i++) {
    console.log(fileList[i].name);
}

  });
</script>

循环的for

这是javascript中引入的另一种方法，即for的语法。

<script>
  const inputfileselector = document.querySelector('input');
  inputfileselector.addEventListener('change', (event) => {
    const fileList = event.target.files;
for (let file of fileList) {
    console.log(file.name);
}

  });
</script>

我们可以在FileList对象中使用forEach吗？

是的，我们可以通过转换为数组的不同方式来做到这一点

使用forEach循环

forEach 在EcmaScript 6语言中的数组中引入了循环。

  • 首先将FileList转换为数组
  • 然后使用ES6 forEach方法来迭代每个文件对象。
<script>
  const inputfileselector = document.querySelector('input');
  inputfileselector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    Array.from(field.photo.files).forEach(file => {     
    console.log(file.name);
 });


  });
</script>

如何在javascript中从FileList中删除一个文件？

当你在处理文件上传时，你需要在上传至后端之前添加删除功能。

在javascript中，上传文件会返回FileList，所以你必须从FileList中删除一个文件。

下面是一连串的步骤

  • 首先将FileList转换成一个数组对象
  • 使用splice方法从数组中删除一个文件，返回没有文件的新列表。
  • 将输入元素的文件分配给新的列表

如何在javascript中读取文件名的大小和类型

FileList包含文件对象的列表，每个文件对象都有文件的元信息。

  • File.name 返回一个文件的名称

  • File.type 它返回MIME类型，即文件扩展名。例如，一个图像文件返回type=Image/png，其他类型有image/svg+xml application/x-zip-compressed ,text/html,application/pdf 等。

  • FIle.size 它返回以字节为单位的大小。

如何在javascript中检查上传的文件是否为空？

有些时候，你想在输入类型的文件时显示 "没有选择文件 "这样的信息。

你可以使用length方法来检查FileList对象是否为空。

<script>
  const inputfileselector = document.querySelector('input');
if( inputfileselector.files.length == 0 ){
    console.log("no files selected");
}
</script>

如何在javascript中从客户端浏览器读取文件内容？

这个例子将文件内容读成一个二进制字符串。

以下是将文件转换为二进制字符串的一系列步骤。

  • 使用输入选择器读取输入文件
  • 从FileList对象中选择第一个文件
  • 创建一个FileReader对象来读取该文件对象
  • readAsBinaryString 读取文件内容并转换为二进制字符串

例子

<script>
  const inputfileselector = document.querySelector('input');
if( inputfileselector.files.length == 0 ){
    console.log("no files selected");
}
let content="";
    var firstFile = inputfileselector.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      content = e.target.result;

    });
    reader.readAsBinaryString(firstFile);
</script>

同样的方法，我们可以使用Blob对象从FileList对象的文件中读/取。

总结

FileList是一个重要的DOM类，用于从浏览器的输入型文件控件中读取文件内容。记录了一些关于文件列表的例子

avatar
文章
阅读
粉丝