HTML5文件实现拖拽上传

转自：http://www.cnblogs.com/caonidayecnblogs/archive/2010/09/09/1821925.html

通过HTML的文件API ，Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件，并上传到服务器。

相对于使用了十多年的HTML表单，这是一个革命性的进步。虽然IE的落后让很多开发者还在观望中，但是Gmail邮箱的附件拖拽功能已经给部分用户带来了极大的方便，而需要大量上传文件的CMS（内容管理系统）也将会从中受益。

让我们看一下Firefox 是如何使用拖拽上传功能的：

首先提供一个区域来放置文件

Html代码

然后监听拖拽过程中的dragenter、dragleave、drop等事件

Js代码

其中最主要的是drop事件中用handleFiles()依次处理所有文件

对于图片类型的文件可以直接读取内容，显示预览图

接下来就是核心功能：ajax上传。首先新建一个XHR请求

监听上传进度和完成事件

最后把数据模拟成multipart/form-data的格式上传