如何利用HTML5 File API读取本地文件

如何利用HTML5 File API读取本地文件

HTML5 File API为前端开发人员提供了一种直接在浏览器中读取和处理本地文件的方法，这极大地简化了文件上传和预览的流程。本文将详细介绍如何使用HTML5 File API读取本地文件，包括File对象的属性、FileList数组的获取方式以及如何使用FileReader和ObjectURL来读取和处理文件。

在HTML4时代，要在网页上显示用户本地的图片，需要先将图片上传到服务器，再从服务器下载图片，这种方式不仅浪费流量，还增加了服务器的存储成本。而HTML5 File API的出现，使得浏览器可以直接读取和处理本地文件，大大简化了这一过程。

File对象的基本属性

HTML5定义了一个File对象类型来表示文件，每个File对象对应一个文件。File对象有3个主要属性：

• name：不包含路径的文件名
• size：以字节为单位的文件体积大小
• type：文件的MIME类型（例如image/jpeg）

获取FileList数组

File对象通常以数组形式存在于一个名为FileList的数组中。目前，HTML5提供了两种获取FileList数组的方法：

通过file类型的input获取FileList

这是最常见的方法，可以通过单选或多选文件输入框来实现：

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

然后，可以通过监听input元素的change事件来获取FileList：

// 原生JS
var inputElement = document.getElementById("file-input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  var fileList = this.files; 
}

// jQuery版本
$('#file-input').on('change', function() {
    var fileList = this.files;
});

通过拖放操作的drop事件获取FileList

首先需要设定一个可供拖放的区域：

<div id="dropbox">将文件拖放到此处</div>

然后，需要阻止dragenter和dragover事件的默认行为：

var dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

最后，在drop事件的回调函数中获取FileList：

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}

如何读取或利用File对象

HTML5提供了两种主要方案来读取File对象：FileReader和ObjectURL。

使用FileReader读取File对象

FileReader是一个用于异步读取文件内容的接口。首先需要实例化FileReader对象：

var reader = new FileReader();

然后为FileReader设置load事件的回调函数：

reader.onload = function(e) { 
    document.getElementById("image").src = e.target.result; 
}

最后，通过FileReader的不同方法来决定读取File对象数据后用什么数据格式来存放：

1. readAsArrayBuffer(file)：读取File对象并存放为ArrayBuffer对象
2. readAsText(file [, 'UTF-8'])：以一般文本模式读取File对象，可指定字符编码
3. readAsDataURL(file)：读取File对象并存放为data: URL格式的字符串

使用ObjectURL

ObjectURL相当于文件的一个临时路径，可以在本地浏览器中像普通URL一样使用：

var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);

此时，src形如：blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

使用ObjectURL相对于FileReader生成图片的Base64编码来说，性能有显著提升。

总结

FileReader适合用来上传文件，而ObjectURL则适合直接在浏览器进行操作，然后操作后再把处理后的数据进行上传，例如利用canvas截图或进行图片压缩等。当然，这一切都是要考虑兼容性的。