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

HTML5+CSS3 Web前端开发技术第12章HTML5的文件操作与拖放操作file对象和FileList对象1ArrayBuffer对象与ArrayBufferView对象2Blob对象3FileReader接口4拖放API5DataTransfer对象的属性与方法6拖放的应用7HTML5+CSS3 file对象和FileList对象在HTML 5中,为input元素添加multiple属性,file元素允许一次选择多个文件,用户选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的列表,代表用户选择的所有文件,是file对象的集合。1. file对象在页面中指定input元素的type属性为file,可以实现文件的选择功能。选择得到的文件即是file对象,,不包括路径;lastModifiedDate属性表示文件的最后修改日期。HTML5+CSS3 file对象和FileList对象示例121是使用input元素来选择单个文件的示例HTML5+CSS3 file对象和FileList对象2. FileList对象input元素的multiple属性就用于选择多个文件,这些文件实际上保存在一个file数组中,也就是FileList对象,表示用户选择的文件列表,其中的每个元素都是一个file对象。示例12-2实现多个文件的选择HTML5+CSS3 ArrayBuffer对象与ArrayBufferView对象1. ArrayBuffer和ArrayBufferView概念 ArrayBuffer实际上是JavaScript操作二进制数据的一个接口,它的作用是分配一段可以存放数据的连续内存区域。一个ArrayBuffer对象代表一个固定长度的用于装载数据的缓存区。在HTML 5中,不能直接操作ArrayBuffer对象中的内容,需要ArrayBufferView对象来读写。 ArrayBufferView对象可以将缓存区中的数据转换为各种数据类型的数组。HTML5+CSS3 。不能直接存取ArrayBuffer缓存区中的内容,必须通过ArrayBufferView对象来读写ArrayBuffer缓存区中的内容。在HTML 5中,使用ArrayBuffer的构造方法可以创建ArrayBuffer对象。var arrayBuffer = new ArrayBuffer(length);HTML5+CSS3 (1)ArrayBufferView对象概述由于ArrayBuffer对象不提供任何直接读写内存的方法,而ArrayBufferView对象实际上是建立在ArrayBuffer对象基础上的视图,它指定了原始二进制数据的基本处理单元,通过ArrayBufferView对象来读取ArrayBuffer对象的内容。表12-1 ArrayBuffer对象存储的视图类型字节长度描述类型字节长度描述Int8Array18位整数数组Int32Array432位整数数组Uint8Array18位无符号整数数组Uint32Array432位无符号整数数组Uint8ClampedArray18位无符号整数数组Float32Array432位IEEE浮点数数组Int16Array216位整数数组Float 64Array864位IEEE浮点数数组Uint16Array216位无符号整数数组HTML5+CSS3 ArrayBuffer对象与ArrayBufferView对象(2)ArrayBufferView对象的生成 ArrayBufferView对象的每一个子类均有多种方法可以生成。?在ArrayBuffer对象之上生成视图// 创建一个8字节的ArrayBuffervar b = new ArrayBuffer(8);// 创建一个指向b的Int32视图,开始于字节0,直到缓冲区的末尾var v1 = new Int32Array(b);// 创建一个指向b的Uint8视图,开始于字节2,直到缓冲区的末尾var v2 = new Uint8Array(b, 2);// 创建一个指向b的Int16视图,开始于字节2,长度为2var v