HTML5 文件拖放新特性API展示

 

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

       该 API 的设计初衷，是改善基于浏览器的 Web 应用程序处理文件上传的方式，使文件直接拖放上传成为可能。草案定义了新的输入选项 <input type=”file”> 来处理文件上传。

       Drag & Drop API
       1.创建拖放事件监听程序时，一定要阻止默认行为，尤其是在dragover事件中一定要执行preventDefault()，否则drop事件不会出发，同时dropEffect也不会生效。
       2.dataTransfer接口：
       dataTransfer.effectAllowed[=value]
       dataTransfer.dropEffect[=value]
       dataTransfer.setDragImage(element,x,y)
       dataTransfer.setData(format,data):format有两种格式：text/plain,text/uri-list
       dataTransfer.getData(format)
       dataTransfer.clearData([format]) 
       dataTransfer.items:返回关于拖拽数据的DataTransferItemList对象。
       dataTransfer.addElement(element)将元素添加到被拖拽的列表里。如果想要让某个元素跟随被拖拽元素一同被拖拽，可使用该方法。
       dataTransfer.types:返回再dragStart事件触发时为元素存储数据的格式。如果是系统文件的拖拽，则返回files。
       dataTransfer.files:如果是拖拽系统文件，返回正在被拖拽的文件列表对象。可以通过它获得所拖拽的文件数据。