转自：

文件上传是最古老的互联网操作之一。

　　20多年了，它几乎没变，还是原来的样子：操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代，显得非常落伍。

　　网页开发者们想了很多办法，试图提升文件上传的功能和操作体验，在各种 Javascript 库的基础上，开发了五花八门的。可是，由于不同浏览器之间的差异，缺乏统一接口，这些插件要么用起来很麻烦，要么不能普遍适用。

　　HTML5提供了一系列新的浏览器 API，使得文件上传有可能出现革命性变化。英国程序员  总结了这些，本文在他的文章基础上，讨论如何采用 HTML5 的 API，对文件上传进行渐进式增强，实现以下功能：

• iframe 上传
• ajax 上传
• 进度条
• 文件预览
• 拖放上传

　　为了对这些功能有一个感性认识，你可以先看看 Remy Sharp 提供的。

　　虽然这些 API，还没有得到广泛部署，但它们是未来的潮流。有了它们，代码就可以写得非常优雅简洁，上面五个功能都能在 20 行以内实现。

　　一、传统形式

　　让我们从最基本的开始。

　　文件上传的传统形式，是使用表单元素 file：

　　所有浏览器都支持上面的代码。它在 IE 浏览器中，显示如下：

　　用户先选择文件，然后点击"Upload"按钮，文件开始上传。

　　二、iframe 上传

　　传统的表单上传，属于"同步上传"。也就是说，点击上传按钮后，网页"锁死"，用户只能等待上传结束，然后浏览器刷新，跳到表单的 action 属性指定的网址。

　　有没有办法"异步上传"，在网页不重载的情况下，完成整个上传过程呢？

　　在 HTML5 没有出现之前，只能使用 iframe 做到这一点。用户点击 submit 时，动态插入一个 iframe 元素（以下代码使用了 jQuery 函数库）。

var form = $("#upload-form"); form.on ('submit',function () {
    　　// 此处动态插入 iframe 元素 });

　　插入 iframe 的代码如下：

var seed = Math.floor(Math.random() * 1000);var id = "uploader-frame-" + seed;var callback = "uploader-cb-" + seed;var iframe = $('

　　最后一行，有两个地方值得注意。首先，它为表单添加 target 属性，指向动态插入的 iframe 窗口，这使得上传结束后，服务器将结果返回 iframe 窗口，所以当前页面就不会跳转了。其次，它在 action 属性指定的上传网址的后面，添加了一个参数，使得服务器知道回调函数的名称。这样就能将服务器返回的信息，从 iframe 窗口传到上层页面。

　　服务器（upload.php）返回的信息，应该是如下形式：

　　然后，在当前网页定义回调函数：

window[callback] = function (data){
    　　console.log ('received callback:'， data); 　　iframe.remove (); //removing iframe 　　form.removeAttr ('target'); 　　form.attr ('action'， url); 　　window[callback] = undefined; //removing callback };

　　三、ajax 上传

　　HTML5 提出了 XMLHttpRequest 对象的，从此 ajax 能够上传文件了。这是真正的"异步上传"，是将来的主流。上一节的 iframe 上传，可以用作老式浏览器的替代方案。

　　ajax 上传代码，放在表单的 submit 事件回调函数中：

form.on ('submit',function () {
    　　// 此处进行 ajax 上传 });

　　我们主要用的是 ，它能够构建类似表单的键值对。

// 检查是否支持 FormData if(window.FormData) {
    　　var formData = new FormData (); 　　// 建立一个 upload 表单项，值为上传的文件 　　formData.append ('upload'， document.getElementById('upload').files[0]); 　　var xhr = new XMLHttpRequest (); 　　xhr.open ('POST'， $(this).attr('action')); 　　// 定义上传完成后的回调函数 　　xhr.onload = function () {
    　　　　if (xhr.status === 200) {
    　　　　　　console.log ('上传成功'); 　　　　} else {
    　　　　　　console.log ('出错了'); 　　　　} 　　}; 　　xhr.send (formData); }

　　四、进度条

　　XMLHttpRequest 第二版还定义了一个 ，可以用来制作进度条。

　　首先，在页面中放置一个 HTML 元素 progress。

0

　　然后，定义 progress 事件的回调函数。

xhr.upload.onprogress = function (event) {
    　　if (event.lengthComputable) {
    　　　　var complete = (event.loaded / event.total * 100 0); 　　　　var progress = document.getElementById ('uploadprogress'); 　　　　progress.value = progress.innerHTML = complete; 　　} };

　　注意，progress 事件不是定义在 xhr，而是定义在 xhr.upload，因为这里需要区分下载和上传，下载也有一个 progress 事件。

　　五、图片预览

　　如果上传的是图片文件，利用 ，我们可以做一个图片文件的预览。这里主要用到 。

// 检查是否支持 FileReader 对象 if (typeof FileReader != 'undefined') {
    　　var acceptedTypes = {
    　　　　'image/png': true, 　　　　'image/jpeg': true, 　　　　'image/gif': true 　　}; 　　if (acceptedTypes[document.getElementById ('upload') .files[0].type] === true) {
    　　　　var reader = new FileReader (); 　　　　reader.onload = function (event) {
    　　　　　　var image = new Image (); 　　　　　　image.src = event.target.result; 　　　　　　image.width = 100; 　　　　　　document.body.appendChild (image); 　　　　}; 　　　　reader.readAsDataURL (document.getElementById ('upload') .files[0]); 　　} }

　　六、拖放上传

　　最后，利用 HTML5 的，实现拖放上传。

　　先在页面中放置一个容器，用来接收拖放的文件。

　　对它设置样式：

#holder {
    border: 10px dashed #ccc; width: 300px; min-height: 300px; margin: 20px auto; } #holder.hover {
    border: 10px dashed #0c0; }

　　拖放文件的代码，主要是定义 dragover、dragend 和 drop 这三个事件。

// 检查浏览器是否支持拖放上传。 if('draggable' in document.createElement ('span')){
    　　var holder = document.getElementById ('holder'); 　　holder.ondragover = function () { this.className = 'hover'; return false; }; 　　holder.ondragend = function () { this.className = ''; return false; }; 　　holder.ondrop = function (event) {
    　　　　event.preventDefault (); 　　　　this.className = ''; 　　　　var files = event.dataTransfer.files; 　　　　// do something with files 　　}; }

　　完成后的效果和总体代码，请看拖放上传 。