移动Web开发之文件操作处理研究.pptx

目录 文件操作基础知识 实例9-1：在表单中选择单个文件 实例9-5：读取文件内容 实例9-2：通过类型过滤上传文件储方式 实例9-3：通过accept属性过滤选择文件的类型 实例9-4：用readAsDataURL()预览图片 实例9-6：同时上传多个文件 实例9-7：获取文件类型与大小 综合实例：用拖动的方式选择并浏览文件 1 文件操作基础知识 9.1.1 选择单个或多个文件 当创建“file”类型的input元素上传文件时，该元素在页面中不再显示为文本框效果，而是显示为一个“选择文件”的按钮，并且在按钮的右侧显示选择上传文件的名称。因为在初始化页面时没有上传文件，所以会显示为“未选择文件”字样。 HTML5标记语言中，除了可以选择单个上传文件外，还可以同时选择多个上传文件，此功能的具体实现流程如下： （1）为元素添加multiple属性； （2）将属性multiple的值设为true。 1 文件操作基础知识 在HTML5页面中，一个文件对应一个File对象，在该对象中存在以下两个重要属性： name：表示不包含路径的文件名称。 lastModifiedDate：表示最后修改文件的时间。 当使用file类型的input元素选择多个文件时，该元素中就含有多个File对象，从而形成了FileList对象，也就是File对象的列表。Filelist接口有两个重要成员： item方法：返回Filelist数组的第index个数组元素。 length：数组元素的数量。 1 文件操作基础知识 9.1.2 使用Blob获取文件的类型与大小 在HTML5网页应用中，通过访问Blob对象的方式可以获取上传文件的类型和大小属性。Blob表示二进制数据块，通过接口Blob中的slice方法可以访问指定长度与类型的字节内部数据块。 Blob接口提供了如下所示的两个属性： size：表示返回数据块的大小。 type：表示返回数据块的MIME类型，如果不能确定数据块的类型，则返回一个空字符串。 Blob接口定义了下面两个方法： slice：返回从start开始到end结束的contentType数据类型新的Blob对象。 close：关闭Blob对象。 1 文件操作基础知识 9.1.3 FileReader接口 在HTML5网页应用中，FileReader接口提供了一个异步的API，通过这个API不仅可以读取图片文件，而且还可以读取文本或二进制文件。同时，根据该接口提供的事件与方法，可以动态侦察文件读取时的详细状态。 当访问不同文件时，必须重新调用FileReader接口的构造函数。因为每调用一次，FileReader接口都会返回一个新的FileReader对象，只有这样才能访问不同文件的数据。 1 文件操作基础知识 在FileReader接口中，拥有许多用于读取文件或响应事件的方法，例如触发onabort事件时，需要调用abort()方法。FileReader接口中常用方法如右表所示。 FileReader接口的常用方法 1 文件操作基础知识 在HTML5提供的FileReader接口中，包含了很多常用的事件和一套完整的事件处理机制。通过触发这些事件可以清晰地侦听FileReader对象读取文件的详细过程，以便更加精确地定位每次读取文件时的事件先后顺序，为编写事件代码提供有力的支持。接口FileReader中的常用事件如下： onabort：中断时触发。 onerror：出错时触发。 onload：文件成功读取完毕时触发。 onloadend：文件读取完毕时触发，无论是否失败。 onloadstart：文件开始读取时触发。 onprogress：当文件读取时，周期性地触发。 1 文件操作基础知识 在现实应用中，网页文件通过接口FileReader中的方法进行正常读取工作时，触发事件的先后顺序如下： onloadstart onprogress onload onloadend 在调用接口FileReader中的方法正常读取文件时，大部分的文件读取过程都集中在onprogress事件中，该事件耗时最长。如果文件在读取过程中出现异常或中止，那么将结束onprogress事件，直接触发onerror或onabort事件，而不会触发onload事件。另外，onload事件是文件读取成功时触发，而onloadend虽然也是文件操作成功时触发，但该事件不论文件读取是否成功，都将触发。由此可见，要想要正确获取文件数据，必须在onload事件中编写代码。 2 实例9-1在表单中选择单个文件 具体实现流程如下： （1）新建一个HTML5页面，在里面创建一个“file”类型的input元素。 （2）单击input元素的“选择文件”按钮后可以选择一个图片文件。