JS FileList对象|极客教程

JS FileList对象

1. 介绍

在JavaScript中，FileList对象表示用户通过文件选择器选择的文件列表。它是由多个File对象组成的类数组对象。通常，FileList对象是通过<input>元素的files属性访问的。

本文将详细介绍FileList对象的属性和方法，并提供一些使用示例。在开始之前，我们需要先了解一下File对象。

1.1 File对象

File对象是JavaScript中用于表示文件的标准对象，它继承自Blob对象。File对象提供了操作文件以及获取文件信息的功能。常见的属性和方法有：

name：文件名（包含扩展名）
size：文件大小（字节数）
type：文件类型（MIME类型）
lastModified：文件上次修改时间
slice()：对文件进行切片，返回一个新的Blob对象

File对象通常是通过FileList对象的item()方法或通过HTML5的拖放API获取的。

1.2 FileList对象

FileList对象表示用户选择的多个文件列表。它是一个类数组对象，包含了多个File对象。FileList对象的主要属性和方法有：

length：返回文件列表中的文件个数
item(index)：返回指定索引位置处的File对象
forEach(callback[, thisArg])：对文件列表中的每个文件执行指定的回调函数
Symbol.iterator：用于迭代文件列表的内置Symbol迭代器

2. 属性

FileList对象具有以下属性：

2.1 length

length属性返回文件列表中的文件个数。它是一个只读属性。

示例代码

const input = document.getElementById("fileInput");
const fileList = input.files;
console.log(fileList.length); // 输出文件个数

2.2 Symbol.iterator

Symbol.iterator属性是一个内置的Symbol迭代器，可以用于迭代文件列表。它允许使用for...of循环遍历FileList对象。

示例代码

const input = document.getElementById("fileInput");
const fileList = input.files;
for (const file of fileList) {
  console.log(file.name); // 输出文件名
}

3. 方法

FileList对象具有以下方法：

3.1 item(index)

item()方法返回指定索引位置处的File对象。索引从0开始，如果索引越界则返回null。

示例代码

const input = document.getElementById("fileInput");
const fileList = input.files;
const file = fileList.item(0);
if (file) {
  console.log(file.name); // 输出第一个文件名
}

3.2 forEach(callback[, thisArg])

forEach()方法对文件列表中的每个文件执行指定的回调函数。回调函数可以接收三个参数：当前文件对象、当前文件索引、整个FileList对象。

示例代码

const input = document.getElementById("fileInput");
const fileList = input.files;
fileList.forEach((file, index) => {
  console.log(`文件 {index+1}:{file.name}`);
});

3.3 实例方法

除了上述内置方法，FileList对象还可以通过原型链访问File对象的实例方法，例如slice()方法。

示例代码

const input = document.getElementById("fileInput");
const fileList = input.files;
const file = fileList.item(0); // 获取第一个文件
const slice = file.slice(0, file.size/2); // 对文件进行切片
console.log(slice instanceof Blob); // 输出 true

4. 示例

下面给出一个使用FileList对象的示例，演示了如何读取用户选择的文件内容并在页面上展示。

<!DOCTYPE html>
<html>
<body>
  <input type="file" id="fileInput" multiple>
  <ul id="fileList"></ul>

  <script>
    const input = document.getElementById("fileInput");
    const list = document.getElementById("fileList");

    input.addEventListener("change", () => {
      const fileList = input.files;
      list.innerHTML = ""; // 清空列表

      fileList.forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = () => {
          const li = document.createElement("li");
          li.textContent = `{index+1}.{file.name}`;
          li.style.backgroundImage = `url(${reader.result})`; // 显示图片
          list.appendChild(li);
        };
        reader.readAsDataURL(file); // 读取文件内容
      });
    });
  </script>
</body>
</html>

上述示例中，我们通过<input type="file" multiple>元素让用户可以选择多个文件。当用户选择文件后，change事件会触发，我们遍历文件列表并创建FileReader对象来读取文件内容。读取完成后，我们创建一个<li>元素并将文件名作为文本内容，将文件内容作为背景图片显示在页面上。最终，我们将这个<li>元素添加到<ul id="fileList">元素中。