Yuguo.us

HTML5拖拽文件以及显示文件

Introduction

user

余果

全栈工程师,《Web全栈工程师的自我修养》作者。


Featured

front-end

HTML5拖拽文件以及显示文件

Posted by 余果 on .

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

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

余果

https://yuguo.us

全栈工程师,《Web全栈工程师的自我修养》作者。