html拖入文件,HTML5开发 拖拽文件上传 Drag&Drop 拖拽功能的处理

Drag&Drop 拖拽功能的处理

关于HTML5拖拽文件上传，其实国外已经有很多网站有这样的应用，最早推出拖拽上传应用的是 Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送，但其实现在利用HTML5的功能实现，主要借助于新版支持的浏览器来实现，IE还是弱很多。

拖拽上传应用主要使用了以下 HTML5技术：

Drag&Drop :HTML5基于拖拽的事件机制.

File API : 可以很方便的让 Web 应用访问文件对象，File API 包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的 FileList 和 FileReader 接口。

FormData : FormData 是基于 XMLHttpRequest Level 2的新接口，可以方便 web 应用模拟 Form 表单数据，重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现 AJAX 向后端发送文件数据了。

HTML5 Drag & Drop 事件过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，还要不停的修改元素的位置，代码要堆很多，而且性能上也很不好(不停地修改元素位置会导致页面reflow，除非绝对定位)，现在有了html5原生的Drag & Drop 拖拽事件，真的是方便了许多，用”事半功倍”来形容绝不为过。

Drag & Drop 包括以下事件：

dragstart： 要