一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 18:12:37 编辑:袖梨 来源:一聚教程网


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

例子:




   


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






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

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

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


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

热门栏目