HTML5文件.pptx

HTML5中的文件本章内容选择文件使用FileReader接口读取文件使用DataTransfer对象拖放上传图片文件文件读取时的错误与异常选择文件file:///I:\HTML5\site\5-1.html选择单个文件file:///I:\HTML5\site\5-2.html选择多个file:///I:\HTML5\site\5-2.html文件使用Blob接口获取文件的类型与大小Blob表示二进制数据块，Blob接口提供了一个slice方法，用该方法可以访问指定长度与类型的字节内部数据块。该接口提供两个属性：一个为size，表示返回数据块的大小；另外一个为type，表示返回数据块的MIME类型，如果不能确定数据块的类型，则返回一个空字符串。file:///I:\HTML5\site\5-3.html获取上传文件的类型与大小通过类型过滤上传文件过滤流程：当选择上传文件后，遍历每一个分 file对象，获取该对象类型，并将该类型与设置的过滤类型进行匹配，如果不符合，则提示上传文件类型出错或拒绝上传，从而实现在选择文件时过滤掉不需要上传的文件。site/5-4.html通过类型过滤上传文件如果上传文件是图片类型，则file对象返回的类型均以”image/”开头，后面添加”*”表示所有的图片类型，因此，如果是一个图片文件，该文件返回的类型必定以”image/”字样开头。当遍历传回的文件集合时，通过match()方法检测每个文件返回的类型中是否含有”image/*”，如果没有，说明是非图片类型文件。通过accept属性过滤文件类型 site/Ch5/5-5.html通过site/Ch5/5-5.htmlacceptsite/Ch5/5-5.html类型过滤上传文件Html5提供的File Api FileList序列，代表着由本地系统里选中的单个文件组成的数组。用来选择文件的用户接口可以通过input type=”file”调用实现。Blob接口，它代表原始二进制数据，通过Blob对象可以访问里面的字节数据。File接口，它里面存有文件的只读属性信息，像文件名，文件类型，文件数据访问的地址。FileReader接口，它提供了读取一个文件的方法，和一个获取文件读取结果的事件模型。FileError接口和一个FileException对象，用来定义这个规范中的错误产生条件。使用FileReader接口读取文件 使用Blob接口可以获取文件的相关信息，如文件名称、大小、类型，但如果要读取文件内容，则需要通过FileReader接口。该接口不仅可以读取图片文件，还可以读取文本或二进制文件。当访问不同文件时，必须重新调用FileReader接口的构造函数。每调用一次，FileReader接口都返回一个新的FileReader对象，只有这样，才能实现访问不同文件的数据。使用readAsDataURL方法预览图片 site/Ch5/5-6.html使用site/Ch5/5-6.htmlreadAsDataURLsite/Ch5/5-6.html方法预览图片在Js代码中，遍历传回的上传文件集合，获取每个file对象。然后，将每个文件以数据url的方式读入页面中，当读取成功时，触发onload事件，在该事件中，通过result属性获取文件读入页面中的URL地址，并将该地址与img元素绑定。最后，通过ID号为ulUpload的列表元素展示在页面中。使用readAsText方法读取文本文件site/Ch5/5-7.html使用site/Ch5/5-7.htmlreadAsTextsite/Ch5/5-7.html方法读取文本文件在Js代码中，首先检测浏览器是否支持FileReader对象。如果支持，重构一个新的FileReader对象，调用该对象的readAsText方法，将文件以文本编码的方式读入页面中。然后，通过result属性获取读入的内容，并将该内容赋值给ID号为”artShow”的元素。最后，通过该元素将文件内容显示在页面中。侦听FileReader接口事件FileReader接口常用事件侦听FileReader接口事件一个文件通过FileReader接口中的方法正常读取时，触发事件的先后顺序。大部分文件读取过程集中在onprogress事件如果文件读取过程出现异常或中止，onprogress事件将结束，直接触发onerror或onabort事件使用DataTransfer对象拖放上传图片文件site/Ch5/5-9.html使用site/Ch5/5-9.htmlDataTransfersite/Ch5/5-9.html对象拖放上传图片site/Ch5/5-9.html文件示例为了接收被保存的数据，页面中的目标元素在调用元素的拖放事件ondro