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

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

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

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

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

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

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

　　一、传统形式

　　让我们从最基本的开始。

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

<form action="upload.php" method="post" enctype="multipart/form-data" >
<input type="file" name="upload" /> <br />
<input type="submit" value="Upload" />
</form>

it知识库：文件上传的渐进式增强，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。