1

HTML5拖拽文件以及显示文件

 3 years ago
source link: https://yuguo.us/weblog/html5-dd-and-file-api/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
HTML5拖拽文件以及显示文件余果的博客

HTML5拖拽文件以及显示文件

Introduction

HTML5拖拽文件以及显示文件

余果 2011-03-16 front-end

利用支持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
Copyright 2010-2019 Yuguo
Thanks for reading

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK