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文件的文本内容。
分享到:
相关推荐
html5 拖拽交换
此文档主要如何实现拖拽上传,欢迎大家下载查看!
html5拖拽上传文件,html5新特性,支持外部拖拽文件
HTML5拖拽,draggable='true',目前只有Firefox、Google、Safari支持。
HTML5拖拽式上传,间断代码,可以实现拖拽式和普通上传试图片。
html5拖拽列表
html5实现拖拽效果!很实用,易用性很好,方便修改与扩展!
html5拖拽图片调整截图代码是一款基于html5实现的拖拽图片调整大小编辑头像截图代码。
html5拖拽上传文件
The drag and drop sample contains four code examples to show how the draggable attribute helps you create fully drag and drop enabled web applications.
html5拖拽排序多图片上传插件特效源码.zip
jsPlumb开发入门教程(实现html5拖拽连线).pdf
jsPlumb开发入门教程(实现html5拖拽连线)借鉴.pdf
因为标题写的是实例,所以本次就不做讲解了,因为这个实例我也算是东拼西凑整出来的,参考了大概5、6款拖拽上传的插件和demo,然后把其中好的地方挑出来,最后就成了这么一个实例,一起来看下吧(地址不能保证长久...
拖拽布局插件 拖拽 布局 手机拖拽
对应Vue3中使用原生HTML5拖拽属性实现任务管理小功能中的核心代码文件(1~37行)该功能如需实现增删改操作需要后端文件配合,该资源文件只是实现拖拽功能的前端核心代码文件,可作为参考。