HTML5读取拖放的本地文件的例子

在桌面上创建了自定义的放置目标后，可以从桌面上把文件拖放到该目标。与拖放一张图片或链接类似，从桌面上把文件拖放到浏览器中也会触发drop事件。而且可以在event.dataTransfer.files中读取到被放置的文件，此时它是一个File对象，与通过文件输入字段取得的File对象一样。

例子：

请把文件拖到下面的框里：

与其他拖放示例一样，这里也必须取消dragenter、dragover和drop的默认行为。

在drop事件中，可以通过event.dataTransfer.files读取文件信息。

读取拖放的文件的功能常用情景有：

结合XMLHttpRequest和拖放文件来实现上传。（最多）
查看和管理本地图片。
查看和管理本地音乐。