HTML5 FileReader API 实现上传前文件预览

HTML5 FileReader API 实现上传前文件预览

文件上传功能在当前的互联网应用中已极为普遍，各类社交平台和媒体网站（如优酷、微博等）均提供了图片及视频上传服务。然而，传统的 Web 开发中，通过 HTML 表单上传文件往往较为繁琐，尤其是当开发者需要在服务器端接收文件前获取文件的某些属性时，必须等待上传完成才能得知相关信息。

将未知来源的文件直接上传至服务器，不仅可能引发安全隐患，还可能因文件体积过大而超出限制，造成存储空间的浪费。随着 Web 技术的演进，HTML5 引入了诸多新特性，其中 FileReader API 允许开发者在用户上传文件之前，即可获取文件的基本属性信息。

HTML 代码结构

FileReader API 的工作机制与 File API 类似，均需依赖 <input type="file"> 元素来触发文件选择操作：

<-- 一个能上传多媒体文件的表单 -->
<input type="file" id="upload-file" multiple />

<-- 显示图片的地方 -->
<div id="destination"></div>

在 File API 的相关文档中，详细列出了可读取的文件信息，包括文件路径、体积大小、尺寸以及文件类型等元数据。

JavaScript 实现逻辑

本示例演示如何使用 input 表单域上传图片，当用户在本地计算机中选中一张图片后，该图片将即时显示在网页上：

document.getElementById('upload-file').addEventListener('change', function() {
 var file;
 var destination = document.getElementById('destination');
 destination.innerHTML = '';

 // 循环用户多选的文件
 for(var x = 0, xlen = this.files.length; x < xlen; x++) {
 file = this.files[x];
 if(file.type.indexOf('image') != -1) { // 非常简单的交验

 var reader = new FileReader();

 reader.onload = function(e) {
 var img = new Image();
 img.src = e.target.result; // 显示图片的地方

 destination.appendChild(img);
 };
 
 reader.readAsDataURL(file);
 }
 }
});

在此示例中，我们调用 FileReader 对象的 readAsDataURL 方法，将图片内容转换为 Base64 编码的字符串，随后利用图片的 data URI 格式将其渲染显示。此外，FileReader 还提供了其他读取方法，如 readAsText、readAsArrayBuffer 和 readAsBinaryString 等，适用于不同场景。

借助 FileReader API，我们得以避免在上传前必须将文件发送至服务器的步骤，直接在浏览器客户端完成操作。这种在文件上传至服务器之前的预处理机制，对于提升应用性能和用户体验至关重要。

以上内容涵盖了本文的核心知识点，希望对读者的学习与实践有所帮助。