JavaScript File API实现文件上传预览
一、概述
以往对于基于浏览器的应用而言，访问本地文件都是一件头疼的事情。虽然伴随着 Web 2.0 应用技术的不断发展，JavaScript 正在扮演越来越重要的角色，但是出于安全性的考虑，JavaScript 一直是无法访问本地文件的。于是，为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能，我们就不得不求助于特定浏览器所提供的各种技术了。比如对于 IE，我们需要通过 ActiveX 控件来获取对本地文件的访问能力，而对于 Firefox，同样也要借助插件开发。由于不同浏览器的技术实现不尽相同，为了让程序能够支持多浏览器，我们的程序就会变得十分复杂而难于维护。不过现在，这一切都因为 File API 的出现而得到了彻底的改变。
File API 是 Mozilla 向 W3C 提交的一个草案，旨在推出一套标准的 JavaScript API，其基本功能是实现用 JavaScript 对本地文件进行操作。出于安全性的考虑，该 API 只对本地文件提供有限的访问。有了它，我们就可以很轻松的用纯 JavaScript 来实现本地文件的读取和上传了。目前，FireFox 3.6 是最先支持这一功能的浏览器。除此以外，最新版本的 Google Chrome 浏览器和 Safari 浏览器也有相应的支持。File API 有望成为 W3C 目前正在制定的未来 HTML 5 规范当中的一部分。
二、File API 概览
File API 由一组 JavaScript 对象以及事件构成。赋予开发人员操作在 <input type=”file” … /> 文件选择控件中选定文件的能力。图 1 展示了 File API 所有的 JavaScript 的组合关系。
类型 FileList 包含一组 File 对象。通常 FileList 对象可以从表单中的文件域（<input type=”file” .../>）中拿取。Blob 对象代表浏览器所能读取的一组原始二进制流。Blob 对象中，属性 size 表示流的大小。函数 slice() 可以将一个长的 Blob 对象分割成小块。File 对象继承自 Blob 对象，在 Blob 对象基础上增加了和 File 相关的属性。其中，属性 name 表示文件的名字，这个名字去掉了文件的路径信息，而只保留了文件名。属性 type 表示文件的 MIME 类型。属性 urn 则代表这个文件的 URN 信息。为完成文件读取的操作，一个 FileReader 对象实例会关联 File 或 Blob 对象，并提供三种不同的文件读取函数以及 6 种事件。
文件读取函数具体内容：
readAsBinaryString() 读取文件内容，读取结果为一个 binary string。文件每一个 byte 会被表示为一个 [0..255] 区间内的整数。函数接受一个 File 对象作为参数。
readAsText() 读取文件内容，读取结果为一串代表文件内容的文本。函数接受一个 File 对象以及文本编码名称作为参数。
readAsDataURL 读取文件内容，读取结果为一个 data: 的 URL。DataURL 由 RFC2397 定义。
文件读取事件具体内容：
事件名称 事件说明
Onloadstart 文件读取开始时触发。
Progress 当读取进行中时定时触发。事件参数中会含有已读取总数据量。
Abort 当读取被中止时触发。
Error 当读取出错时触发。
Load 当读取成功完成时触发。
Loadend 当读取完成时，无论成功或者失败都会触发。
三、File API 简单示例
接下来我们用一个简单的例子展示 File API 的基本用法。这个示例包含两个代码文件，index.html 包含 Web 端的 HTML 代码和处理上传的 JavaScript 代码；upload.jsp 包含服务器端接收上传文件的代码。请参见附件中的 sourcecode.zip。在这个例子中，我们将显示一个传统的带有 File 选择域的表单。当用户选择文件，点击提交后，我们使用 File API 读取文件内容，并通过 XMLHttpRequest 对象，用 Ajax 的方式将文件上传到服务器上。图 2 展示了运行中的演示截图。
我们逐步展示其中的代码。清单 1 给出了代码的 HTML 部分。
清单 1 示例代码的 HTML 部分
<body> <h1>File API Demo</h1> <p> <!-- 用于文件上传的表单元素 --> <form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data" action="javascript: uploadAndSubmit();"> <p>Upload File: <input type="file" name="file" /></p> <p><input type="submit" value="Submit" /></p> </form> <div>Progessing (in Bytes): <span id="bytesRead"> </span> / <span id="bytesTotal"></span> </div> </p> </body>
可以看到，我们用普通的 <form> 标签来包含一个传统的 <input type=”file” … /> 元素。在 <form> 中还有一个 submit 元素。在 <form> 之外有一些 <span> 元素用来表示已读取和总共的数据量。<form> 的 action 属性指向了一个 JavaScript 函数 uploadAndSubmit()。这个函数完成了读取文件并上传的过程。函数代码见清单 2。
清单 2 读取文件并上传的 JavaScript 函数
function uploadAndSubmit() {
var form = document.forms["demoForm"];
if (form["file"].files.length > 0) {
// 寻找表单域中的 <input type="file" ... /> 标签
var file = form["file"].files[0];
// try sending
var reader = new FileReader();
reader.onloadstart = function() {
// 这个事件在读取开始时触发
console.log("onloadstart");
document.getElementById("bytesTotal").textContent = file.size;
}
reader.onprogress = function(p) {
// 这个事件在读取进行中定时触发
console.log("onprogress");
document.getElementById("bytesRead").textContent = p.loaded;
}
reader.onload = function() {
// 这个事件在读取成功结束后触发
console.log("load complete");
}
reader.onloadend = function() {
// 这个事件在读取结束后，无论成功或者失败都会触发
if (reader.error) {
console.log(reader.error);
} else {
document.getElementById("bytesRead").textContent = file.size;
// 构造 XMLHttpRequest 对象，发送文件 Binary 数据
var xhr = new XMLHttpRequest();
xhr.open(/* method */ "POST",
/* target url */ "upload.jsp?fileName=" + file.name
/*, async, default to true */);
xhr.overrideMimeType("application/octet-stream");
xhr.sendAsBinary(reader.result);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log("upload complete");
console.log("response: " + xhr.responseText);
}
}
}
}
}
reader.readAsBinaryString(file);
} else {
alert ("Please choose a file.");
}
}
在这个函数中，首先我们找到含有 <input type=”file” … /> 元素的 <form>，并找到含有上传文件信息的 <input> 元素。如 <input> 元素中不含有文件，说明用户没有选择任何文件，此时将报错。
清单 3 找到 <input> 元素
var form = document.forms["demoForm"];
if (form["file"].files.length > 0)
{
var file = form["file"].files[0];
… …
}
else
{
alert ("Please choose a file.");
}
这里，从 form[“file”].files 返回的对象类型即为提到的 FileList。我们从中拿取第一个元素。之后，我们构建 FileReader 对象：
var reader = new FileReader();
在 onloadstart事件触发时，填充页面上表示读取数据总量的 <span> 元素。参见清单 4
清单 4 onloadstart 事件
reader.onloadstart = function()
{
console.log("onloadstart");
document.getElementById("bytesTotal").textContent = file.size;
}
在 onprogress 事件触发时，更新页面上已读取数据量的 <span> 元素。参见清单 5
清单 5 onprogress 事件
reader.onprogress = function(p) {
console.log("onloadstart");
document.getElementById("bytesRead").textContent = p.loaded;
}
最后的 onloadend 事件中，如果没有错误，我们将读取文件内容，并通过 XMLHttpRequest 的方式上传。
清单 6 onloadend 事件
reader.onloadend = function()
{
if (reader.error)
{
console.log(reader.error);
}
else
{
// 构造 XMLHttpRequest 对象，发送文件 Binary 数据
var xhr = new XMLHttpRequest();
xhr.open(/* method */ "POST",
/* target url */ "upload.jsp?fileName=" + file.name
/*, async, default to true */);
xhr.overrideMimeType("application/octet-stream");
xhr.sendAsBinary(reader.result);
… …
}
}
按照 File API 的规范，我们也可以将事件 onloadend 的处理拆分为事件 error 以及事件 load 的处理。
在这个示例中，我们后台使用一个 JSP 来处理上传。JSP 代码如清单 7。
清单 7 处理上传的 JSP 代码
<%@ page import="java.io.*" %><%
BufferedInputStream fileIn = new
BufferedInputStream(request.getInputStream());
String fn = request.getParameter("fileName");
byte[] buf = new byte[1024];
//接收文件上传并保存到 d:\
File file = new File("d:/" + fn);
BufferedOutputStream fileOut = new BufferedOutputStream(new
FileOutputStream(file));
while (true) {
// 读取数据
int bytesIn = fileIn.read(buf, 0, 1024);
System.out.println(bytesIn);
if (bytesIn == -1)
{
break;
}
else
{
fileOut.write(buf, 0, bytesIn);
}
}
fileOut.flush();
fileOut.close();
out.print(file.getAbsolutePath());
%>
在这段 JSP 代码中，我们从 POST 请求中接受文件名字以及二进制数据。将二进制数据写入到服务器的“D:\”路径中。并返回文件的完整路径。以上代码可以在最新的 Firefox 3.6 中调试通过。
四、使用拖拽上传文件
前面我们介绍了怎样通过 HTML5 的 File API 来读取本地文件内容并上传到服务器，通过这种方式已经能够满足大部分用户的需求了。其中一个不足是用户只能通过点击“浏览”按钮来逐个添加文件，如果需要批量上传文件，会导致用户体验不是很友好。而在桌面应用中，用户一般可以通过鼠标拖拽的方式方便地上传文件。拖拽一直是 Web 应用的一个软肋，一般浏览器都不提供对拖拽的支持。虽然 Web 程序员可以通过鼠标的 mouseenter，mouseover 和 mouseout 等事件来实现拖拽效果，但是这种方式也只能使拖拽的范围局限在浏览器里面。一个好消息是 HTML5 里面不仅加入了 File API，而且加入了对拖拽的支持，Firefox 3.5 开始已经对 File API 和拖拽提供了支持。下面我们先简要介绍一下拖拽的使用，然后用一个例子来说明如何通过拖拽上传文件。
1、拖拽简介
拖拽一般涉及两个对象：拖拽源和拖拽目标。
拖拽源：在 HTML5 草案里如果一个对象可以作为源被拖拽，需要设置 draggable 属性为 true 来标识该对象可作为拖拽源。然后侦听源对象的 dragstart 事件，在事件处理函数里设置好 DataTransfer。在 DataTransfer 里可以设置拖拽数据的类型和值。比如是纯文本的值，可以设置类型为"text/plain"，url 则把类型设置为"text/uri-list"。 这样，目标对象就可以根据期望的类型来选择数据了。
拖拽目标：一个拖拽目标必须侦听 3 个事件。
dragenter：目标对象通过响应这个事件来确定是否接收拖拽。如果接收则需要取消这个事件，停止时间的继续传播。
dragover：通过响应这个事件来显示拖拽的提示效果。
drop：目标对象通过响应这个事件来处理拖拽数据。在下面的例子里我们将在 drop 事件的处理函数里获取 DataTransfer 对象，取出要上传的文件。
由于本文主要介绍 File API，对这部分不作详细解释，感兴趣的读者可以参考 HTML5 草案（见参考资料）。
2、拖拽上传文件实例
下面以一个较为具体的例子说明如何结合拖拽和 File API 来上传文档。由于直接和桌面交互，所以我们不需要处理拖拽源，直接在目标对象里从 DataTransfer 对象获取数据即可。
首先，我们需要创建一个目标容器用来接收拖拽事件，添加一个 div 元素即可。然后用一个列表来展示上传文件的缩略图，进度条及文件名。参见清单 8 的 HTML 代码和图 3 的效果图。详细代码请参见附件中的 dnd.html 文件。
清单 8 拖曳目标的 HTML 代码
<div id="container"> <span>Drag and drop files here to upload.</span> <ul id="fileList"></ul> </div>
拖拽目标创建好之后，我们需要侦听其对应的事件 dragenter，dragover 和 drop。在 dragenter 事件处理函数里，我们只是简单地清除文件列表，然后取消 dragenter 事件的传播，表示我们接收该事件。更加妥当的作法是判断 DataTransfer 里的数据是否为文件，这里我们假设所有拖拽源都是文件。dragover 事件里我们取消该事件，使用默认的拖拽显示效果。在 drop 事件里我们注册了 handleDrop 事件处理函数来获取文件信息并上传文件。清单 9 展示了这些事件处理函数。
清单 9 设置事件处理函数
function addDNDListeners()
{
var container = document.getElementById("container");
var fileList = document.getElementById("fileList");
// 拖拽进入目标对象时触发
container.addEventListener("dragenter", function(event)
{
fileList.innerHTML ='';
event.stopPropagation();
event.preventDefault();
}, false);
// 拖拽在目标对象上时触发
container.addEventListener("dragover", function(event)
{
event.stopPropagation();
event.preventDefault();
}, false);
// 拖拽结束时触发
container.addEventListener("drop", handleDrop, false);
}
window.addEventListener("load", addDNDListeners, false);
处理 drop 事件
用户在拖拽结束时松开鼠标触发 drop 事件。在 drop 事件里，我们可以通过 event 参数的 DataTransfer 对象获取 files 数据，通过遍历 files 数组可以获取每个文件的信息。然后针对每个文件，创建 HTML 元素来显示缩略图，进度条和文件名称。File 对象的 getAsDataURL 可以将文件内容以 URL 的形式返回，对图片文件来说可以用来显示缩略图。要注意的一点是，在 drop 事件处理函数里要取消事件的继续传播和默认处理函数，结束 drop 事件的处理。清单 10 展示了 drop 事件的处理代码。
清单 10 drop 事件的处理
function handleDrop(event)
{
// 获取拖拽的文件列表
var files = event.dataTransfer.files;
event.stopPropagation();
event.preventDefault();
var fileList = document.getElementById("fileList");
// 展示文件缩略图，文件名和上传进度，上传文件
for (var i = 0; i < files.length; i++)
{
var file = files[i];
var li = document.createElement('li');
var progressbar = document.createElement('div');
var img = document.createElement('img');
var name = document.createElement('span');
progressbar.className = "progressBar";
img.src = files[i].getAsDataURL();
img.width = 32;
img.height = 32;
name.innerHTML = file.name;
li.appendChild(img);
li.appendChild(name);
li.appendChild(progressbar);
fileList.appendChild(li);
uploadFile(file, progressbar)
}
}
上传文件
我们可以通过 XMLHttpRequest 对象的 sendAsBinary 方法来上传文件，通过侦听 upload 的 progress，load 和 error 事件来监测文件上传的进度，成功完成或是否发生错误。在 progress 事件处理函数里我们通过计算已经上传的比例来确定进度条的位置。参见清单 11。图 4 展示了上传文件的效果图。
清单 11 上传文件
function uploadFile(file, progressbar)
{
var xhr = new XMLHttpRequest();
var upload = xhr.upload;
var p = document.createElement('p');
p.textContent = "0%";
progressbar.appendChild(p);
upload.progressbar = progressbar;
// 设置上传文件相关的事件处理函数
upload.addEventListener("progress", uploadProgress, false);
upload.addEventListener("load", uploadSucceed, false);
upload.addEventListener("error", uploadError, false);
// 上传文件
xhr.open("POST", "upload.jsp?fileName="+file.name);
xhr.overrideMimeType("application/octet-stream");
xhr.sendAsBinary(file.getAsBinary());
}
function uploadProgress(event)
{
if (event.lengthComputable)
{
// 将进度换算成百分比
var percentage = Math.round((event.loaded * 100) / event.total);
console.log("percentage:" + percentage);
if (percentage < 100)
{
event.target.progressbar.firstChild.style.width = (percentage*2) + "px";
event.target.progressbar.firstChild.textContent = percentage + "%";
}
}
}
function uploadSucceed(event)
{
event.target.progressbar.firstChild.style.width = "200px";
event.target.progressbar.firstChild.textContent = "100%";
}
function uploadError(error)
{
alert("error: " + error);
}
本文通过对 File API 规范的讲解，以及两个展示其使用方法的例子，为大家提前揭示了作为未来 HTML5 重要组成部分的 JavaScript File API 的全貌。利用它，结合其他 HTML5 的新特性，比如 Drag&Drop，我们可以利用纯 JavaScript 方案，为用户提供更好使用体验的 Web 应用，与此同时，这样的一致化方案也使我们避免了以往跨浏览器支持所花费的巨大代价。相信 File API 的出现和广泛应用，将会是未来的 Web 2.0 应用的大势所趋。
更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
相关推荐
-
JavaScript File API文件上传预览
对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览
-
用file标签实现多图文件上传预览
js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("files"); var dd = document.getElementById("preview"); dd.innerHTML = ""; var fileList = docObj.files; for (var i
-
js 上传文件预览的简单实例
1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div id="test-image-preview" style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat
-
js HTML5多图片上传及预览实例解析（不含前端的文件分割）
本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用 1.HTML5 files可以选择多文件,以及获取多文件信息 2.XMLHTTPRequest对象,发送HTTP传输请求 3.将每一个文件放在FormData,进行传输 4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ
-
jsp中点击图片弹出文件上传界面及预览功能的实现
花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:
-
基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中
-
js前端实现多图图片上传预览的两个方法(推荐)
一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu
-
PHP仿微信多图片预览上传实例代码
生产图片区域,上传按钮#btn可替换自己想要的图片 <ul id="ul_pics" class="ul_pics clearfix"> <li><img src="logo.png" id="btn" class="img_common" /></li> </ul> plupload上传 var uploader = new plupload.U
-
JavaScript File API实现文件上传预览
一.概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽
-
H5手机端多文件上传预览插件
基于zepto,支持多文件上传,进度和图片预览,用于手机端. (function ($) { $.extend($, { fileUpload: function (options) { var para = { multiple: true, filebutton: ".filePicker", uploadButton: null, url: "/home/MUploadImg", filebase: "mfile",//mvc后台需要对应的
-
基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="
-
教你3分钟利用原生js实现有进度监听的文件上传预览组件
前言 本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,该组件利用FileReader来实现文件在前端的解析,预览,读取进度等功能,并对外暴露相应api来实现用户自定义的需求,比如文件上传,进度监听,自定义样式,读取成功回调等. 组件设计架构如下: 涉及的核心知识点如下: 闭包:减少变量污染,缩短变量查找范围 自执行函数 file API:对文件进行读取,解析,监控文件事件 DocumentFragment API:主要用来优化dom操作 minix :用来实现对象混合
-
Bootstrap fileinput文件上传预览插件使用详解
介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便. BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持 支持多文件.在线预览.拖拽上传等功能,封装后BaseFile主要包括以下功能: 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可编辑的附件明细(删除.预览.不可新增) 关于Bootstrap-fileinput的API文档可参考http://p
-
JavaScript使用FileReader实现图片上传预览效果
FileReader是HTML5 File API的一部分.它实现了一种异步文件读取机制.可以把FileReader想象为XMLHttpRequest,区别只是它读取的是文件系统,而不是远程服务器.为了读取文件中的数据,FileReader提供了如下几个方法. readAsText(file,encoding):以纯文本的方式读取文件,将读取到的文件保存到result属性中. readAsDataURL(file):读取文件并将文件以数据URI的形式保存在result属性中. readAsBin
-
JavaScript代码实现txt文件的上传预览功能
今天做项目刚好碰到这个记录一下.因为是简单的txt文件,只涉及文本,如果需要涉及图片预览就需要使用papaparse和jschardet,此处不多叙述. 表单按钮使用js的onchange="uploadfile()" 事件,function函数代码如下所示: //此处为txt文件上传预览的js代码 function uploadfile(){ var file=$("#txt")[0].files[0]; //判断上传文件是不是txt格式,判断后缀是不是.txt