HTML5的拖放和文件操作

一、HTML5拖放

1.实现拖放主要有以下两个步骤：

(1)将对象的属性设置为可拖放，即“draggable='true'”

(2)编写有关拖放事件的处理方法

2.dataTransfer对象介绍

dataTransfer对象是事件对象的一个属性，用于从拖拽元素向放置目标传递字符串格式的数据。因为它是事件对象的属性，所有只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中，可以使用这个对象的属性和方法来完善拖放功能。

3.dropEffect属性所表示的实际视觉效果必须在effectAllowed属性所表示的允许的视觉效果范围内。规则如下：

(1)如果effectAllowed属性设定为none,则不允许拖放元素

(2)如果dropEffect属性设定为none,则不允许被拖放到目标中

(3)如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示

(4)如果effectAllowed属性设定为具体效果（不为none和all）,dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素放到目标元素中

4.自定义拖放图标

dataTransfer对象有一个setDragImage()方法，该方法有三个参数：第一个参数为image,image设定为拖放图标的图标元素；第二个参数为拖放图标离鼠标指针的x轴方向的位移量；第三个参数是拖放图标离鼠标指针的y轴方向的位移量

二、ArrayBuffer对象和Blob对象

1.ArrayBuffer对象表示一段二进制数据，用来模拟内存里面的数据

(1)它接受一个整数作为参数，表示这段二进制数据占用多少个字节，语法如下：

var buffer=new ArrayBuffer(内存长度);

(2)ArrayBuffer对象有实例属性byteLength,表示当前实例占用的内训长度（单位：字节）语法如下：

var buffer=new ArrayBuffer(8);

console.log(buffer.byteLength);

2.Blob对象的属性和方法

Blod对象具有size和type两个实例属性，分别用来返回数据的大小和类型。Blob对象具有一个实例方法slice()，用来拷贝原来的数据，返回的也是一个Blod实例，其中slice()方法的语法如下：

blob.slice(start,end,contentType);

三、HTML5文件操作（一）

1.Web文件存储介绍

目前HTML5规范中包含三个文件相关的规范：“文件API” “文件API：目录和系统” 以及 “文件API：写入器”

2.File对象构造函数

浏览器原生提供一个File()构造函，用来生成File实例对象。具体语法如下：

var file=new File(array,name[,option]);

其中，File对象的构造函数接受三个参数：

array：一个数组，成员可以是二进制对象或字符串，表示文件的内容

name：字符串，表示文件名或文件路径

option：配置对象，设置实例的属性，该参数可选

3.File对象的属性和方法

File对象没有自己的实例方法，由于继承了Blob对象，因此可以使用Blob对象的实例方法slice()

File对象的属性

属性	说明
name	文件名或文件路径
size	文件大小（单位：字节）
type	文件的MIME类型
lastModified	最后修改时间

4.FileList对象

FileList对象是一个类似于数组的对象，代表一组选中的文件，每个成员都是一个File实例。它主要出现在两个场合中

(1)文件选择器（<input type='file'>）的files属性返回一个FileList实例

(2)拖拉一组文件时，目标区的DataTransfer.file属性返回一个FileList实例

四、HTML5文件操作（二）

1.FileReader对象

FileReader对象用于读取File对象或Blod对象所包含的文件内容

FileReader对象的属性

属性	说明
error	读取文件时产生的错误对象
readyState	整数，表示读取文件时的当前状态。一共有3种可能的状态：0表示尚未加载任何数据；1表示数据正在加载；2表示加载完成
result	读取完成后的文件内容，有可能是字符串，也有可能是一个ArrayBuffer实例

FileReader对象的方法

方法	说明
abort()	终止读取操作，readyState属性将变成2
readAsArrayBuffer()	以ArrayBuffer的格式读取文件，读取完成后，result属性将返回一个ArrayBuffer实例
readAsBinaryString()	读取完成后，result属性将返回原始的二进制字符串
readAsDataURL()	读取完成后，result属性将返回一个DataURL格式（Base编码）的字符串，代表文件内容。对于图片文件，这个字符串不能直接进行Base64解码，必须把前缀data:*/*;base64从字符串里删除后再进行解码
readAsText()	读取完成后，result属性将返回文件内容的文本字符串。该方法的第一个参数是代表文件的Blob实例，第二个参数是可选的，表示文本编码，默认为UTF-8

是

FileReader对象的事件

事件	说明
abort	用户终止读取操作事件
error	读取操作错误事件
loadstart	读取操作开始事件
loadend	读取操作结束事件
progess	读取进行中事件
load	读取操作完成事件。通常在事件处理方式中使用result属性获得文件内容