HTML第12章-HTML5的文件操作与拖放操作课件1.ppt

第12章HTML5的文件操作与拖放操作
file对象和FileList对象
1
ArrayBuffer对象与ArrayBufferView对象
2
Blob对象
3
FileRea[0] + f64a[1];
将普通数组转为视图数组
将一个数据类型符合要求的普通数组，传入构造方法，也能直接生成视图，视图可以由一个类型化数组引用。
var typedArray = new Uint8Array( [ 1, 2, 3, 4 ] );
ArrayBuffer对象与ArrayBufferView对象
3 ArrayBufferView对象
(3)ArrayBufferView对象的操作
数组操作
var buffer = new ArrayBuffer(16);
var int32View = new Int32Array(buffer);
for (var i=0; i<; i++) {
int32View[i] = i*2;
}
ArrayBuffer对象与ArrayBufferView对象
buffer属性的使用
var a = new Float32Array(64);
var b = new Uint8Array();
byteLength属性和byteOffset属性的使用
var b = new ArrayBuffer(8);
// =8, =0
var v1 = new Int32Array(b);
// =6, =2
var v2 = new Uint8Array(b, 2);
// =4, = 2
var v3 = new Int16Array(b, 2, 2);
ArrayBuffer对象与ArrayBufferView对象
3 ArrayBufferView对象
(4 )DataView对象
DataView视图提供更多操作选项，而且支持设定字节序。从设计目的而言，ArrayBuffer对象的各种类型化视图，是用来向网卡、声卡之类的本机设备传送数据，所以使用本机的字节序就可以了；
而DataView的设计目的，是用来处理网络设备传来的数据，所以大端字节序或小端字节序是可以自行设定的。
ArrayBuffer对象与ArrayBufferView对象
DataView对象的生成
DataView本身也是构造方法，接受一个ArrayBuffer对象作为参数，生成视图，构造DataView对象的语法格式如下。
DataView(ArrayBuffer buffer [, start [, length]]);
下面是一个构造DataView对象的示例。
var buffer = new ArrayBuffer(24);
var dv = new DataView(buffer);
ArrayBuffer对象与ArrayBufferView对象
DataView对象读取内存的方法
表12-2 DataView视图读取内存的方法
ArrayBuffer对象与ArrayBufferView对象
DataView对象读取内存的方法
表12-3 DataView视图写内存的方法
Blob对象
使用Blob对象获取文件大小和类型
Blob表示二进制原始数据，Blob对象有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob对象的MIME类型，如果是未知类型，则返回空字符串。
1．size属性
表示Blob对象的字节长度。
2．type属性
表示Blob对象的MIME类型，如果是未知类型，则返回一个空字符串。
Blob对象
示例12-3说明Blob对象的两个属性。
Blob对象
示例12-4通过Blob对象的type属性来判断用户选择的多个文件的类型，如果不是指定类型，将弹出提示信息。
Blob对象
3．通过accept属性过滤选择的文件
在选择文件上传后，如果能根据文件返回的类型过滤所选择的文件，也是一种可行的方法，在HTML 5中，可以通过为file类型的input元素