File、FileList和FileReader

前端

2023-10-29 21:01:39

File 对象

File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象。File 对象可以是通过用户选择文件上传获得，也可以是通过拖拽文件到浏览器中获得。

File 对象的属性包括：

name：文件的名称
size：文件的大小
type：文件的类型
lastModified：文件的最后修改时间

File 对象的方法包括：

slice()：从文件中截取一部分
stream()：创建一个文件读取流
text()：读取文件的文本内容
arrayBuffer()：读取文件的二进制数据

FileList 对象

FileList 对象是一个包含 File 对象的列表，它通常是通过 <input type="file"> 元素获得。FileList 对象的属性包括：

length：FileList 对象中包含的 File 对象的数量
item()：通过索引获取 FileList 对象中的 File 对象

FileList 对象的方法包括：

forEach()：对 FileList 对象中的每个 File 对象执行一个指定的函数
map()：对 FileList 对象中的每个 File 对象执行一个指定的函数，并返回一个新数组

FileReader 对象

FileReader 对象可以用来读取文件的内容。它可以通过 new FileReader() 创建。FileReader 对象的属性包括：

readyState：FileReader 对象的状态
result：FileReader 对象读取到的文件内容

FileReader 对象的方法包括：

readAsText()：将文件读取为文本
readAsDataURL()：将文件读取为 data URL
readAsArrayBuffer()：将文件读取为二进制数据

使用 File、FileList 和 FileReader 对象

File、FileList 和 FileReader 对象可以用来实现文件上传、下载和预览等功能。

文件上传

<input type="file" id="file-input">

const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (event) => {
  const files = event.target.files;
  const formData = new FormData();
  formData.append('file', files[0]);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.send(formData);
});

文件下载

<a href="file.txt" download>下载</a>

文件预览

<img id="preview-image">

const previewImage = document.getElementById('preview-image');
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    previewImage.src = event.target.result;
  };
  reader.readAsDataURL(file);
});