移动Web开发之文件操作处理.pptxVIP

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