html5 备课,HTML5文件教案.pptx

HTML5中的文件

本章内容

选择文件

使用FileReader接口读取文件

使用DataTransfer对象拖放上传图片文件

文件读取时的错误与异常

选择文件

选择单个文件

选择多个文件

使用Blob接口获取文件的类型与大小

Blob表示二进制数据块，Blob接口提供了一个slice方法，用该方法可以访问指定长度与类型的字节内部数据块。该接口提供两个属性：一个为size，表示返回数据块的大小；另外一个为type，表示返回数据块的MIME类型，如果不能确定数据块的类型，则返回一个空字符串。

获取上传文件的类型与大小

通过类型过滤上传文件

过滤流程：当选择上传文件后，遍历每一个分 file对象，获取该对象类型，并将该类型与设置的过滤类型进行匹配，如果不符合，则提示上传文件类型出错或拒绝上传，从而实现在选择文件时过滤掉不需要上传的文件。

通过类型过滤上传文件

如果上传文件是图片类型，则file对象返回的类型均以”image/”开头，后面添加”*”表示所有的图片类型，因此，如果是一个图片文件，该文件返回的类型必定以”image/”字样开头。当遍历传回的文件集合时，通过match()方法检测每个文件返回的类型中是否含有”image/*”，如果没有，说明是非图片类型文件。

通过accept属性过滤文件类型

通过accept类型过滤上传文件

Html5提供的File Api

FileList序列，代表着由本地系统里选中的单个文件组成的数组。用来选择文件的用户接口可以通过调用实现。Blob接口，它代表原始二进制数据，通过Blob对象可以访问里面的字节数据。File接口，它里面存有文件的只读属性信息，像文件名，文件类型，文件数据访问的地址。FileReader接口，它提供了读取一个文件的方法，和一个获取文件读取结果的事件模型。FileError接口和一个FileException对象，用来定义这个规范中的错误产生条件。

使用FileReader接口读取文件

使用Blob接口可以获取文件的相关信息，如文件名称、大小、类型，但如果要读取文件内容，则需要通过FileReader接口。该接口不仅可以读取图片文件，还可以读取文本或二进制文件。

当访问不同文件时，必须重新调用FileReader接口的构造函数。每调用一次，FileReader接口都返回一个新的FileReader对象，只有这样，才能实现访问不同文件的数据。

使用readAsDataURL方法预览图片

使用readAsDataURL方法预览图片

在Js代码中，遍历传回的上传文件集合，获取每个file对象。然后，将每个文件以数据url的方式读入页面中，当读取成功时，触发onload事件，在该事件中，通过result属性获取文件读入页面中的URL地址，并将该地址与元素绑定。最后，通过ID号为ulUpload的列表元素展示在页面中。

使用readAsText方法读取文本文件

使用readAsText方法读取文本文件

在Js代码中，首先检测浏览器是否支持FileReader对象。如果支持，重构一个新的FileReader对象，调用该对象的readAsText方法，将文件以文本编码的方式读入页面中。然后，通过result属性获取读入的内容，并将该内容赋值给ID号为”artShow”的元素。最后，通过该元素将文件内容显示在页面中。

侦听FileReader接口事件

FileReader接口常用事件

侦听FileReader接口事件

一个文件通过FileReader接口中的方法正常读取时，触发事件的先后顺序。

大部分文件读取过程集中在onprogress事件

如果文件读取过程出现异常或中止，onprogress事件将结束，直接触发onerror或onabort事件

使用DataTransfer对象拖放上传图片文件

使用DataTransfer对象拖放上传图片文件示例

为了接收被保存的数据，页面中的目标元素在调用元素的拖放事件ondrop中，调用了一个自定义函数dropFile，同时，为了确保目标元素顺利接收拖放文件，必须将目标元素的ondragenter与ondragover事件都返回return false。

要实现文件的拖放过程，还要在目标元素的拖放事件中，停止其他事件的传播并且关闭默认事件。

使用DataTransfer对象拖放上传图片文件

e.target.result返回的即是图片的dataURI格式的内容

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

document.getElement