使用 JavaScript 读取文件

在用户的本地设备上选择和与文件互动是 Web 上最常用的功能之一。例如,在共享照片或提交税务文件时,用户可以选择文件并将其上传到服务器。它还允许网站读取和操作这些数据,而无需通过网络传输数据。本页将详细介绍如何使用 JavaScript 与文件交互。

File System Access API 提供了一种从用户本地系统上的文件和目录读取和写入内容的方法。大多数基于 Chromium 的浏览器(例如 Chrome 和 Edge)都支持此功能。如需详细了解,请参阅 File System Access API

由于 File System Access API 与所有浏览器都不兼容,因此我们建议使用 browser-fs-access,这是一个辅助库,可在可用时使用新 API,在不可用时回退到旧版方法。

本指南介绍了如何使用旧版 JavaScript 方法与文件交互。

选择文件

选择文件的主要方式有两种:使用 HTML 输入元素和使用拖放区域

HTML 输入元素

用户选择文件的最简单方法是使用 <input type="file"> 元素,所有主流浏览器都支持此元素。用户点击该按钮后,可以使用其操作系统的内置文件选择界面选择一个文件(如果包含 multiple 属性,则可以选择多个文件)。当用户完成选择一个或多个文件后,该元素的 change 事件会触发。您可以通过 event.target.files(一个 FileList 对象)访问文件列表。FileList 中的每个项都是一个 File 对象。

<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
 
const fileSelector = document.getElementById('file-selector');
  fileSelector
.addEventListener('change', (event) => {
   
const fileList = event.target.files;
    console
.log(fileList);
 
});
</script>

在以下示例中,用户可以使用其操作系统的内置文件选择界面选择多个文件,然后将每个所选文件记录到控制台。

限制用户可以选择的文件类型

在某些情况下,您可能需要限制用户可以选择的文件类型。例如,图片编辑应用应仅接受图片,而非文本文件。如需设置文件类型限制,请向输入元素添加 accept 属性,以指定接受哪些文件类型:

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

自定义拖放

在某些浏览器中,<input type="file"> 元素也是一个拖放目标,可让用户将文件拖放到您的应用中。不过,此拖放目标很小,可能很难使用。相反,在使用 <input type="file"> 元素提供核心功能后,您可以提供一个大型的自定义拖放界面。

选择您的取件点

您的拖放界面取决于应用的设计。您可能只希望将窗口的一部分用作拖放 Surface,但也可以使用整个窗口。

图片压缩 Web 应用 Squoosh 的屏幕截图。
Squoosh 会将整个窗口设为拖放区域。

图片压缩应用 Squoosh 允许用户将图片从任意位置拖动到窗口中,然后点击选择图片以调用 <input type="file"> 元素。无论您选择哪个区域作为拖放区,请务必向用户明确说明他们可以将文件拖放到该 Surface 上。

定义放置区

如需将元素启用为拖放区域,请为以下两个事件创建监听器:dragoverdropdragover 事件会更新浏览器界面,以直观地指明拖放操作正在创建文件的副本。用户将文件拖放到 Surface 上后,系统会触发 drop 事件。与输入元素一样,您可以通过 event.dataTransfer.files(一个 FileList 对象)访问文件列表。FileList 中的每个项都是一个 File 对象。

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

dropArea
.addEventListener('dragover', (event) => {
  event
.stopPropagation();
  event
.preventDefault();
 
// Style the drag-and-drop as a "copy file" operation.
  event
.dataTransfer.dropEffect = 'copy';
});

dropArea
.addEventListener('drop', (event) => {
  event
.stopPropagation();
  event
.preventDefault();
 
const fileList = event.dataTransfer.files;
  console
.log(fileList);
});

event.stopPropagation()event.preventDefault() 会停止浏览器的默认行为,并改为运行您的代码。否则,浏览器会离开您的网页,并打开用户拖放到浏览器窗口中的文件。

如需观看实时演示,请参阅自定义拖放

目录呢?

遗憾的是,没有很好的方法可以使用 JavaScript 访问目录。

<input type="file"> 元素上的 webkitdirectory 属性可让用户选择一个或多个目录。大多数主要浏览器都支持此功能,但 Android 版 Firefox 和 iOS 版 Safari 除外。

如果启用了拖放功能,用户可能会尝试将目录拖动到拖放区域。当拖放事件触发时,它会包含目录的 File 对象,但不会提供对目录中任何文件的访问权限。

读取文件元数据

File 对象包含有关文件的元数据。大多数浏览器都会提供文件名、文件大小和 MIME 类型,不过,不同浏览器可能会根据平台提供不同的信息或额外的信息。

function getMetadataForFileList(fileList) {
 
for (const file of fileList) {
   
// Not supported in Safari for iOS.
   
const name = file.name ? file.name : 'NOT SUPPORTED';
   
// Not supported in Firefox for Android or Opera for Android.
   
const type = file.type ? file.type : 'NOT SUPPORTED';
   
// Unknown cross-browser support.
   
const size = file.size ? file.size : 'NOT SUPPORTED';
    console
.log({file, name, type, size});
 
}
}

您可以在 input-type-file 演示中查看此操作的实际运行情况。

读取文件的内容

使用 FileReaderFile 对象的内容读取到内存中。您可以指示 FileReader数组缓冲区数据网址文本的形式读取文件:

function readImage(file) {
 
// Check if the file is an image.
 
if (file.type && !file.type.startsWith('image/')) {
    console
.log('File is not an image.', file.type, file);
   
return;
 
}

 
const reader = new FileReader();
  reader
.addEventListener('load', (event) => {
    img
.src = event.target.result;
 
});
  reader
.readAsDataURL(file);
}

此示例会读取用户提供的 File,然后将其转换为数据网址,并使用该数据网址在 img 元素中显示图片。如需了解如何验证用户是否选择了图片文件,请参阅 read-image-file 演示。

监控文件读取进度

读取大型文件时,提供一些用户体验来告知用户读取进度会很有帮助。为此,请使用 FileReader 提供的 progress 事件。progress 事件有两个属性:loaded(读取量)和 total(要读取的量)。

function readFile(file) {
 
const reader = new FileReader();
  reader
.addEventListener('load', (event) => {
   
const result = event.target.result;
   
// Do something with result
 
});

  reader
.addEventListener('progress', (event) => {
   
if (event.loaded && event.total) {
     
const percent = (event.loaded / event.total) * 100;
      console
.log(`Progress: ${Math.round(percent)}`);
   
}
 
});
  reader
.readAsDataURL(file);
}

主打图片由 Unsplash 的 Vincent Botta 提供