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

1、第第12章章HTML5的文件操作与拖放操作file对象和对象和FileList对象对象1ArrayBuffer对象与对象与ArrayBufferView对象对象2Blob对象对象3FileReader接口接口4拖放拖放API5DataTransfer对象的属性与方法对象的属性与方法6拖放的应用拖放的应用712.1 file对象和FileList对象 在在HTML 5中，为中，为input元素添加元素添加multiple属性，属性，file元元素允许一次选择多个文件，用户选择的每一个文件都是一个素允许一次选择多个文件，用户选择的每一个文件都是一个file对象，而对象，而FileList对象则是这

2、些对象则是这些file对象的列表，代表用对象的列表，代表用户选择的所有文件，是户选择的所有文件，是file对象的集合。对象的集合。1.file对象对象 在页面中指定在页面中指定input元素的元素的type属性为属性为file，可以实现文，可以实现文件的选择功能。选择得到的文件即是件的选择功能。选择得到的文件即是file对象，它有两个属性对象，它有两个属性.name属性表示文件名，不包括路径属性表示文件名，不包括路径；lastModifiedDate属性表示文件的最后修改日期。属性表示文件的最后修改日期。12.1 file对象和FileList对象示例示例121是使用是使用input元素来选择

3、单个文件的示例元素来选择单个文件的示例12.1 file对象和FileList对象2.FileList对象对象 input元素元素的的multiple属性就属性就用于用于选择多个文件，选择多个文件，这些这些文件实际上保存在一个文件实际上保存在一个file数组中，也就是数组中，也就是FileList对象，对象，表示用户选择的文件列表，其中的每个元素都是一个表示用户选择的文件列表，其中的每个元素都是一个file对对象。象。示例示例12-2实现多个文件的选择实现多个文件的选择12.2 ArrayBuffer对象与ArrayBufferView对象1.ArrayBuffer和和ArrayBufferV

4、iew概念概念 ArrayBuffer实际上是实际上是JavaScript操作二进制数据的操作二进制数据的一个接口，它的作用是分配一段可以存放数据的连续内存区一个接口，它的作用是分配一段可以存放数据的连续内存区域。一个域。一个ArrayBuffer对象代表一个固定长度的用于装载对象代表一个固定长度的用于装载数据的缓存区。数据的缓存区。在在HTML 5中，不能直接操作中，不能直接操作ArrayBuffer对象中的内对象中的内容，需要容，需要ArrayBufferView对象来读写。对象来读写。ArrayBufferView对象可以将缓存区中的数据转换为对象可以将缓存区中的数据转换为各种数据类型的

5、数组。各种数据类型的数组。12.2 ArrayBuffer对象与ArrayBufferView对象2.ArrayBuffer对象对象 ArrayBuffer对象代表一个存储固定长度的二进制数据对象代表一个存储固定长度的二进制数据的缓冲存区。不能直接存取的缓冲存区。不能直接存取ArrayBuffer缓存区中的内容缓存区中的内容，必须通过，必须通过ArrayBufferView对象来读写对象来读写ArrayBuffer缓存区中的内容。缓存区中的内容。在在HTML 5中，使用中，使用ArrayBuffer的构造方法可以创建的构造方法可以创建ArrayBuffer对象。对象。var arrayBuff

6、er=new ArrayBuffer(length);12.2 ArrayBuffer对象与ArrayBufferView对象3.ArrayBufferView对象对象(1)ArrayBufferView对象概述对象概述 由于由于ArrayBuffer对象不提供任何直接读写内存的方法，对象不提供任何直接读写内存的方法，而而ArrayBufferView对象实际上是建立在对象实际上是建立在ArrayBuffer对象基础上的视图，它指定了原始二进制数据的基本处理单对象基础上的视图，它指定了原始二进制数据的基本处理单元，通过元，通过ArrayBufferView对象来读取对象来读取ArrayBuff

7、er对对象的内容。象的内容。表表12-1 ArrayBuffer对象存储的视图对象存储的视图类型类型字字节长节长度度描述描述类型类型字字节长节长度度描述描述Int8Array18位整数数组位整数数组Int32Array432位整数数组位整数数组Uint8Array18位无符号整数数组位无符号整数数组Uint32Array432位无符号整数数组位无符号整数数组Uint8ClampedArray18位无符号整数数组位无符号整数数组Float32Array432位位IEEE浮点数数组浮点数数组Int16Array216位整数数组位整数数组Float 64Array864位位IEEE浮点数数组浮点数数

8、组Uint16Array216位无符号整数数组位无符号整数数组 12.2 ArrayBuffer对象与ArrayBufferView对象(2)ArrayBufferView对象的生成对象的生成 ArrayBufferView对象的每一个子类均有多种方法可对象的每一个子类均有多种方法可以生成。以生成。v在在ArrayBuffer对象之上生成视图对象之上生成视图/创建一个创建一个8字节的字节的ArrayBuffervar b=new ArrayBuffer(8);/创建一个指向创建一个指向b的的Int32视图，开始于字节视图，开始于字节0，直到缓冲区的末尾，直到缓冲区的末尾var v1=new I

9、nt32Array(b);/创建一个指向创建一个指向b的的Uint8视图，开始于字节视图，开始于字节2，直到缓冲区的末尾，直到缓冲区的末尾var v2=new Uint8Array(b,2);/创建一个指向创建一个指向b的的Int16视图，开始于字节视图，开始于字节2，长度为，长度为2var v3=new Int16Array(b,2,2);12.2 ArrayBuffer对象与ArrayBufferView对象v直接生成直接生成var f64a=new Float64Array(8);f64a0=10;f64a1=20;f64a2=f64a0+f64a1;v将普通数组转为视图数组将普通数组转

10、为视图数组将一个数据类型符合要求的普通数组，传入构造方法，也能将一个数据类型符合要求的普通数组，传入构造方法，也能直接生成视图，视图可以由一个类型化数组引用。直接生成视图，视图可以由一个类型化数组引用。var typedArray=new Uint8Array(1,2,3,4 );12.2 ArrayBuffer对象与ArrayBufferView对象3 ArrayBufferView对象对象(3)ArrayBufferView对象的操作对象的操作v数组操作数组操作var buffer=new ArrayBuffer(16);var int32View=new Int32Array(buffe

11、r);for(var i=0;iint32View.length;i+)int32Viewi=i*2;12.2 ArrayBuffer对象与ArrayBufferView对象vbuffer属性的使用属性的使用var a=new Float32Array(64);var b=new Uint8Array(a.buffer);vbyteLength属性和属性和byteOffset属性的使用属性的使用var b=new ArrayBuffer(8);/v1.byteLength=8,v1.byteOffset=0var v1=new Int32Array(b);/v2.byteLength=6,v2

12、.byteOffset=2var v2=new Uint8Array(b,2);/v3.byteLength=4,v3.byteOffset=2var v3=new Int16Array(b,2,2);12.2 ArrayBuffer对象与ArrayBufferView对象3 ArrayBufferView对象对象(4)DataView对象对象 DataView视图提供更多操作选项，而且支持设定字节视图提供更多操作选项，而且支持设定字节序。从设计目的而言，序。从设计目的而言，ArrayBuffer对象的各种类型化视对象的各种类型化视图，是用来向网卡、声卡之类的本机设备传送数据，所以使图，是用来

13、向网卡、声卡之类的本机设备传送数据，所以使用本机的字节序就可以了；用本机的字节序就可以了；而而DataView的设计目的，是用来处理网络设备传来的的设计目的，是用来处理网络设备传来的数据，所以大端字节序或小端字节序是可以自行设定的。数据，所以大端字节序或小端字节序是可以自行设定的。12.2 ArrayBuffer对象与ArrayBufferView对象vDataView对象的生成对象的生成DataView本身也是构造方法，接受一个本身也是构造方法，接受一个ArrayBuffer对对象作为参数，生成视图，构造象作为参数，生成视图，构造DataView对象的语法格式对象的语法格式如下。如下。Dat

14、aView(ArrayBuffer buffer,start,length);下面是一个构造下面是一个构造DataView对象的示例。对象的示例。var buffer=new ArrayBuffer(24);var dv=new DataView(buffer);12.2 ArrayBuffer对象与ArrayBufferView对象vDataView对象读取内存的方法对象读取内存的方法表表12-2 DataView视图读取内存的方法视图读取内存的方法方法方法功能功能方法方法功能功能getInt8()读取读取1个字节，返回一个个字节，返回一个8位整数位整数getInt32()读取读取4个字节，

15、返回一个字节，返回一个个32位整数位整数getUint8()读取读取1个字节，返回一个个字节，返回一个无符号的无符号的8位整数位整数getUint32()读取读取4个字节，返回一个字节，返回一个无符号的个无符号的32位整数位整数getInt16()读取读取2个字节，返回一个个字节，返回一个16位整数位整数getFloat32()读取读取4个字节，返回一个字节，返回一个个32位浮点数位浮点数getUint16()读取读取2个字节，返回一个个字节，返回一个无符号的无符号的16位整数位整数getFloat64()读取读取8个字节，返回一个字节，返回一个个64位浮点数位浮点数12.2 ArrayBuf

16、fer对象与ArrayBufferView对象vDataView对象读取内存的方法对象读取内存的方法表表12-3 DataView视图写内存的方法视图写内存的方法方法方法功能功能方法方法功能功能setInt8()写入写入1个字节的个字节的8位整数位整数setInt32()写入写入4个字节的个字节的32位位整数整数setUint8()写入写入1个字节的个字节的8位无符位无符号整数号整数setUint32()写入写入4个字节的个字节的32位位无符号整数无符号整数setInt16()写入写入2个字节的个字节的16位整位整数数setFloat32()写入写入4个字节的个字节的32位位浮点数浮点数set

17、Uint16()写入写入2个字节的个字节的16位无位无符号整数符号整数setFloat64()写入写入8个字节的个字节的64位位浮点数浮点数12.3 Blob对象12.3.1 使用使用Blob对象获取文件大小和类型对象获取文件大小和类型 Blob表示二进制原始数据，表示二进制原始数据，Blob对象有两个属性，对象有两个属性，size属性表示一个属性表示一个Blob对象的字节长度，对象的字节长度，type属性表示属性表示Blob对象的对象的MIME类型，如果是未知类型，则返回空字符串。类型，如果是未知类型，则返回空字符串。1size属性属性 表示表示Blob对象的字节长度。对象的字节长度。2ty

18、pe属性属性 表示表示Blob对象的对象的MIME类型，如果是未知类型，则返类型，如果是未知类型，则返回一个空字符串。回一个空字符串。12.3 Blob对象示例示例12-3说明说明Blob对象的两个属性。对象的两个属性。12.3 Blob对象示例示例12-4通过通过Blob对象的对象的type属性来判断用户选择的多个文件的类属性来判断用户选择的多个文件的类型，如果不是指定类型，将弹出提示信息。型，如果不是指定类型，将弹出提示信息。12.3 Blob对象3通过通过accept属性过滤选择的文件属性过滤选择的文件 在选择文件上传后，如果能根据文件返回的类型过滤所在选择文件上传后，如果能根据文件返回

19、的类型过滤所选择的文件，也是一种可行的方法，在选择的文件，也是一种可行的方法，在HTML 5中，可以通中，可以通过为过为file类型的类型的input元素添加元素添加accept属性来指定要过滤属性来指定要过滤的文件类型。的文件类型。在设置完在设置完accept属性之后，在浏览器中选择文件时会自属性之后，在浏览器中选择文件时会自动筛选符合条件的文件。例如，选择图像文件的语法格式如动筛选符合条件的文件。例如，选择图像文件的语法格式如下。下。12.3 Blob对象12.3.2 通过通过slice方法分割文件方法分割文件 Blob对象有一个方法对象有一个方法slice()，用于将，用于将Blob对象

20、分割为对象分割为更小的二进制更小的二进制Blob对象。对象。File对象是继承对象是继承Blob对象的，因对象的，因此此File对象也含有对象也含有slice方法。方法。/获取一个上传的文件，并通过获取一个上传的文件，并通过slice方法分割方法分割var file=document.getElementById(file).files0;var file1=file.slice(startByte,endByte);12.3 Blob对象示例示例12-5通过通过Blob对象的对象的slice方法来分割选择方法来分割选择的文件，并将分割后的文件大小显示出来。的文件，并将分割后的文件大小显示出来

21、。12.4 FileReader接口12.4.1 FileReader接口的方法接口的方法 FileReader接口有接口有5个方法，表个方法，表12-4列出了这些方法列出了这些方法以及他们的参数和功能以及他们的参数和功能表表12-4 FileReader接口的方法接口的方法方法名方法名参数参数描述描述abort()none中断读取中断读取readAsBinaryString(in Blob blob)file将文件读取为二进制码将文件读取为二进制码readAsDataURL(in Blob blob)file将文件读取为将文件读取为DataURLreadAsArrayBuffer(in Bl

22、ob blob)file将文件读取为将文件读取为ArrayBuffer对象对象readAsText(in Blob blob,optional in DOMString encoding)file将文件读取为文本将文件读取为文本12.4 FileReader接口12.4.2 FileReader接口的事件接口的事件 FileReader接口提供了很多常用的事件以及一套完整的接口提供了很多常用的事件以及一套完整的事件处理机制。事件处理机制。表表12-5 FileReader接口的事件接口的事件事件描述onabort中断时触发回调函数调用onerror出错时触发回调函数调用。如果产生了error事

23、件，那么load事件将不会再产生；触发error事件，相关的信息将会保存到FileReader的error属性中onload文件读取成功完成时触发回调函数调用onloadend读取完成触发回调函数调用，无论读取文件成功或失败onloadstart 读取开始时触发回调函数调用onprogress 数据读取中触发回调函数调用，通常用来跟踪当前文件读取的进度，它一般在文件读取的过程中，每隔50ms左右触发一次12.4 FileReader接口12.4.3 FileReader接口的应用接口的应用1FileReader接口中读取文件的方法接口中读取文件的方法12.4 FileReader接口2.Fil

24、eReader接口的事件处理应用示例接口的事件处理应用示例12.5 拖放拖放API12.5.1 拖放拖放API简介简介1.draggable属性属性 HTML5为所有的为所有的HTML元素都提供了一个元素都提供了一个draggable属性，用于指定一个元素是否可以被拖放。属性，用于指定一个元素是否可以被拖放。draggable有有以下以下3种取值。种取值。true：表示此元素可拖放。：表示此元素可拖放。false：表示此元素不可拖放。：表示此元素不可拖放。auto：除：除img和带和带href的标记的标记a标记表示可拖放外，其标记表示可拖放外，其它标记均不可拖放。它标记均不可拖放。12.5 拖

25、放拖放API2.拖放事件拖放事件表表12-6 拖放的相关事件拖放的相关事件事件事件产生事件的元素产生事件的元素描述描述dragstart被拖放元素被拖放元素开始拖放操作。开始拖放操作。drag被拖放元素被拖放元素在在dragstart之后，释放鼠标之前，不管鼠标是之后，释放鼠标之前，不管鼠标是否移动，此事件不停地被触发。否移动，此事件不停地被触发。dragenter拖放过程中鼠标经过拖放过程中鼠标经过的元素的元素被拖放元素进入目标元素时，触发一次。被拖放元素进入目标元素时，触发一次。dragleave鼠标离开前的目标元鼠标离开前的目标元素素被拖放元素离开本元素范围时触发一次。被拖放元素离开本元

26、素范围时触发一次。dragover拖放过程中鼠标经过拖放过程中鼠标经过的元素的元素在在dragenter之后，之后，dragleave之前，不管是之前，不管是否移动，此事件都将不停地触发。否移动，此事件都将不停地触发。drop拖放的目标元素拖放的目标元素释放鼠标后，由目标元素触发。释放鼠标后，由目标元素触发。dragend被拖放元素被拖放元素释放鼠标后，由被拖放元素触发，顺序在释放鼠标后，由被拖放元素触发，顺序在drop之后。之后。12.5 拖放拖放API12.5.2 拖放的实现过程拖放的实现过程在在HTML5中要想实现拖放操作，需要以下步骤。中要想实现拖放操作，需要以下步骤。（1）指定拖放源

27、并设置元素为可拖放）指定拖放源并设置元素为可拖放为了使元素可拖动，把为了使元素可拖动，把draggable属性设置为属性设置为true。常见的元素有图。常见的元素有图片、文字、动画等。片、文字、动画等。（2）处理拖拽事件）处理拖拽事件编写编写dragstart、drag等事件的处理程序。等事件的处理程序。（3）指定放置位置并处理放置事件）指定放置位置并处理放置事件将可拖放元素放到适合位置，实现该功能的事件是将可拖放元素放到适合位置，实现该功能的事件是ondragover，默认，默认情况下，无法将数据、元素放置到其他元素中。如果需要设置允许放置情况下，无法将数据、元素放置到其他元素中。如果需要设

28、置允许放置，用户必须阻止目标元素的默认处理方式。，用户必须阻止目标元素的默认处理方式。（4）放置并处理拖拽结束事件）放置并处理拖拽结束事件当放置被拖放元素时，就会发生当放置被拖放元素时，就会发生drop事件、事件、dragend事件等。事件等。12.5 拖放拖放API12.5.2 拖放的实现过程拖放的实现过程示例示例12-8实现了拖放功能，实现的是将一张图片拖放到一实现了拖放功能，实现的是将一张图片拖放到一个矩形框中个矩形框中12.6 DataTransfer对象的属性与方法12.6.1 DataTransfer对象的属性及拖放视觉效果对象的属性及拖放视觉效果1DataTransfer对象的属

29、性对象的属性表表12-7 DataTransfer对象的属性对象的属性属性属性描述描述effectAllowed用于设置或返回指定元素被拖放时的显示效果，可以设定的用于设置或返回指定元素被拖放时的显示效果，可以设定的值值包括包括none、copy、copyLink、copyMove，l i n k 、l i n k M o v e 、m o v e 、a l l 、uninitialized。dropEffect用于设置或返回指定被拖放元素释放时的显示效果，该属性用于设置或返回指定被拖放元素释放时的显示效果，该属性设置的取值必须在设置的取值必须在effectAllowed设置范围内，否则无效。

30、设置范围内，否则无效。items用于返回用于返回DataTransferItemList对象。对象。types用于返回已保存的数据类型，如果是文件操作则返回文件类用于返回已保存的数据类型，如果是文件操作则返回文件类型。型。files用于返回被拖放的文件列表。用于返回被拖放的文件列表。12.6 DataTransfer对象的属性与方法 如果如果effectAllowed属性设定为属性设定为none，则不允许拖放，则不允许拖放元素。元素。如果不如果不dropEffect属性设定为属性设定为none，则不允许被拖放，则不允许被拖放到目标元素中。到目标元素中。如果如果effectAllowed属性设定

31、为属性设定为all或不设定，则或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉属性允许被设定为任何值，并且按指定的视觉效果进行显示。效果进行显示。如果如果effectAllowed属性设定为具体效果（不为属性设定为具体效果（不为none、all），），dropEffect属性也设定了具体视觉效果，则两个属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。目标元素中。12.6 DataTransfer对象的属性与方法2.DataTransfer对象的方法对象的方法（1）setD

32、ata(format,data)该方法将指定类型的数据存入该方法将指定类型的数据存入dataTransfer对象，参数对象，参数format表示保存的数据类型，参数表示保存的数据类型，参数data表示数据内容。表示数据内容。下面代码使用下面代码使用setData()方法将数据方法将数据e.target.id保存到保存到dataTransfer对象。对象。src.ondragstart=function(e)/开始拖放元素时触发开始拖放元素时触发 /使用使用 dataTransfer保存拖放元素保存拖放元素ID e.dataTransfer.setData(text,e.target.id);m

33、sg.innerHTML=开始拖放：开始拖放：+draggedID;12.6 DataTransfer对象的属性与方法（2）getData(format)该方法用于从该方法用于从dataTransfer对象中读取指定类型的数据对象中读取指定类型的数据信息，参数信息，参数format表示读取的数据类型。表示读取的数据类型。下面代码使用下面代码使用getData()方法从方法从dataTransfer对象取对象取得数据。得数据。target.ondrop=function(ev)/释放鼠标的时候触发释放鼠标的时候触发 target.innerHTML=ev.dataTransfer.getData

34、(text);e.preventDefault();12.6 DataTransfer对象的属性与方法（3）clearData(format)该方法用于从该方法用于从dataTransfer对象中移除指定类型的数对象中移除指定类型的数据信息，参数据信息，参数format表示移除的数据类型表示移除的数据类型。（4）setDragImage(image,x,y)该方法用于设置拖拽过程中鼠标指针显示的图标，当没该方法用于设置拖拽过程中鼠标指针显示的图标，当没有显示调用有显示调用setDragImage()方法进行设置时，拖拽图标方法进行设置时，拖拽图标将使用默认样式。参数将使用默认样式。参数imag

35、e用于设定拖拽图标的图像元用于设定拖拽图标的图像元素，素，x用于设定图标与鼠标指针在用于设定图标与鼠标指针在x轴方向的距离，轴方向的距离，y用于设用于设定图标与鼠标指针在定图标与鼠标指针在y轴方向的距离。轴方向的距离。12.6 DataTransfer对象的属性与方法12.6.2 DataTransfer对象的方法对象的方法示例示例12-9展示了展示了DataTransfer对象的方法。对象的方法。12.7 拖放的应用12.7.1 拖动网页元素拖动网页元素示例示例12-10实现了网页元素的拖动实现了网页元素的拖动12.7 拖放的应用v12.7.2 拖动上传图片拖动上传图片示例示例12-11实现了从文件夹中拖动图片到虚线框预览的效果实现了从文件夹中拖动图片到虚线框预览的效果作业（1）使用HTML 5中的文件API实现图片选择预览效果，效果如图。（2）使用HTML 5中的文件API读取文本文件内容，效果如图。