JS 文件操作技巧：摆脱 input file 元素的束缚

前端

2023-09-19 14:34:26

无需输入元素即可操作文件的四种方法

概述

在过去的几年里，随着 HTML5 的出现，操纵文件变得越来越容易。如今，我们可以使用多种方法，而无需依赖传统的 <input type="file"> 元素。本文将探討四种有效且实用的方法，让您能够高效地操作文件。

1. FileReader API

FileReader API 是一个强大的工具，可让您直接读取文件内容。其工作原理如下：

创建一个 FileReader 对象。
将文件拖放或加载到 FileReader 对象中。
侦听 onload 事件，该事件在文件加载完成后触发。
在 onload 事件处理程序中，您可以通过 FileReader.result 属性访问文件内容。

代码示例：

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];

  const reader = new FileReader();

  reader.onload = () => {
    console.log(reader.result);
  };

  reader.readAsText(file);
});

2. FormData API

FormData API 允许您创建包含文件和其他表单数据的请求。它的工作原理：

创建一个 FormData 对象。
使用 append() 方法将文件添加到 FormData 对象中。
使用包含 FormData 对象的请求发送数据。

代码示例：

const formData = new FormData();

formData.append('file', fileInput.files[0]);

fetch('upload.php', {
  method: 'POST',
  body: formData,
});

3. Blob API

Blob API 允许您创建和操作二进制大对象 (BLOB)。您可以使用它来操作文件：

创建一个 Blob 对象，其中包含文件内容。
将 Blob 对象保存到磁盘。

代码示例：

const blob = new Blob([fileInput.files[0]]);

const url = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = url;
a.download = 'file.txt';
a.click();

4. 拖放

HTML5 的拖放 API 允许用户将文件拖放到网页中。您可以通过以下方式使用它：

在网页中创建一个拖放区域。
侦听拖放区域的 dragenter、dragover 和 drop 事件。
在 drop 事件处理程序中，您可以使用 e.dataTransfer.files 获取拖放的文件。

代码示例：

const dropArea = document.querySelector('.drop-area');

dropArea.addEventListener('dragenter', (e) => {
  e.preventDefault();
  e.stopPropagation();
});

dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.stopPropagation();
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();

  const files = e.dataTransfer.files;

  // Do something with the files
});