html5 拖拽

HTML5拖拽文件以及显示文件
利用支持HTML5（具体是拖拽API和File API）的浏览器拖拽图片/音频文件到浏览器窗口指定区域来看到预览（还未上传），需要了解的知识主要是拖拽API，和通过拖拽事件获得File之后，对File进行相关信息读取。在HTML5出现之前读取文件信息操作往往是通过后台来实现，现在浏览器也具有了这样的能力，就能提供更好的用户体验。需要的知识大概如下：

(拖拽事件 API) 拖放文件到页面上的指定区域，drop事件发生
(拖拽事件 API) 从drop事件取得DataTransfer对象
(File API) 调用DataTransfer对象的files属性，得到FileList，它代表了拖放文件的列表。
(File API) 遍历FileList，得到每一个单独的File对象。
(File API) 通过FileReader对象来读取每一个File对象的内容（FileReader.readAsDataURL(file)）。然后一个新的data URI格式对象被创建，然后剩下的就交给onloadend回调函数来处理。
(File API) 现在我们通过对拖拽文件的处理得到了一个“data URL”，比如显示图片和MP3播放器。或者可以通过读取text来获得拖拽css文件的文本内容。