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

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

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

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

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

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

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

　　一、传统形式

　　让我们从较基本的开始。

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

"upload.php" method="post" enctype="multipart/form-data" >
"file" name="upload" /> 

"submit" value="Upload" />

　　所有浏览器都支持上面的代码。它在 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 = $('