第12章 HTML5的文件操作与拖放操作1(HTML5与CSS3 Web前端开发技术)[精].ppt

第12章HTML5的文件操作与拖放操作
file对象和FileList对象
1
ArrayBuffer对象与ArrayBufferView对象
2
Blob对象
3
FileReader接口
4
拖放API
5
DataTransfer对象的属性与方法
6
拖放的应用
7
file对象和FileList对象
在HTML 5中,为input元素添加multiple属性,file元素允许一次选择多个文件,用户选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的列表,代表用户选择的所有文件,是file对象的集合。
1. file对象
在页面中指定input元素的type属性为file,可以实现文件的选择功能。选择得到的文件即是file对象,它有两个属性.
name属性表示文件名,不包括路径; lastModifiedDate属性表示文件的最后修改日期。
file对象和FileList对象
示例121是使用input元素来选择单个文件的示例
file对象和FileList对象
2. FileList对象
input元素的multiple属性就用于选择多个文件,这些文件实际上保存在一个file数组中,也就是FileList对象,表示用户选择的文件列表,其中的每个元素都是一个file对象。
示例12-2实现多个文件的选择
ArrayBuffer对象与ArrayBufferView对象
1. ArrayBuffer和ArrayBufferView概念
ArrayBuffer实际上是JavaScript操作二进制数据的一个接口,它的作用是分配一段可以存放数据的连续内存区域。一个ArrayBuffer对象代表一个固定长度的用于装载数据的缓存区。
在HTML 5中,不能直接操作ArrayBuffer对象中的内容,需要ArrayBufferView对象来读写。
ArrayBufferView对象可以将缓存区中的数据转换为各种数据类型的数组。
ArrayBuffer对象与ArrayBufferView对象

(1)ArrayBufferView对象概述
由于ArrayBuffer对象不提供任何直接读写内存的方法,而ArrayBufferView对象实际上是建立在ArrayBuffer对象基础上的视图,它指定了原始二进制数据的基本处理单元,通过ArrayBufferView对象来读取ArrayBuffer对象的内容。
表12-1 ArrayBuffer对象存储的视图
类型
字节长度
描述
类型
字节长度
描述
Int8Array
1
8位整数数组
Int32Array
4
32位整数数组
Uint8Array
1
8位无符号整数数组
Uint32Array
4
32位无符号整数数组
Uint8ClampedArray
1
8位无符号整数数组
Float32Array
4
32位IEEE浮点数数组
Int16Array
2
16位整数数组
Float 64Array
8
64位IEEE浮点数数组
Uint16Array
2
16位无符号整数数组
ArrayBuffer对象与ArrayBufferView对象
(2)ArrayBufferView对象的生成
ArrayBufferView对象的每一个子类均有多种方法可以生成。
在ArrayBuffer对象之上生成视图
// 创建一个8字节的ArrayBuffer
var b = new ArrayBuffer(8);
// 创建一个指向b的Int32视图,开始于字节0,直到缓冲区的末尾
var v1 = new Int32Array(b);
// 创建一个指向b的Uint8视图,开始于字节2,直到缓冲区的末尾
var v2 = new Uint8Array(b, 2);
// 创建一个指向b的Int16视图,开始于字节2,长度为2
var v3 = new Int16Array(b, 2, 2);
ArrayBuffer对象与ArrayBufferView对象
直接生成
var f64a = new Float64Array(8);
f64a[0] = 10;
f64a[1] = 20;
f64a[2] = f64a[0] + f64a[1];
将普通数组转为视图数组
将一个数据类型符合要求的普通数组,传入构造方法,也能直接生成视图,视图可以由一个类型化数组引用。
var typedArray = new Uint8Array(