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

1、文件操作基础知识实例9-1：在表单中选择单个文件实例9-5：读取文件内容实例9-2：通过类型过滤上传文件储方式实例9-3：通过accept属性过滤选择文件的类型实例9-4：用readAsDataURL()预览图片实例9-6：同时上传多个文件实例9-7：获取文件类型与大小综合实例：用拖动的方式选择并浏览文件当创建“file”类型的元素上传文件时，该元素在页面中不再显示为文本框效果，而是显示为一个“选择文件”的按钮，并且在按钮的右侧显示选择上传文件的名称。因为在初始化页面时没有上传文件，所以会显示为“未选择文件”字样。HTML5标记语言中，除了可以选择单个上传文件外，还可以同时选择多个上传文件，此

2、功能的具体实现流程如下：（1）为元素添加multiple属性；（2）将属性multiple的值设为true。在HTML5页面中，一个文件对应一个File对象，在该对象中存在以下两个重要属性：name：表示不包含路径的文件名称。lastModifiedDate：表示最后修改文件的时间。当使用file类型的元素选择多个文件时，该元素中就含有多个File对象，从而形成了FileList对象，也就是File对象的列表。Filelist接口有两个重要成员：item方法：方法：返回Filelist数组的第index个数组元素。length：数组元素的数量。在HTML5网页应用中，通过访问Blob对象的方式

3、可以获取上传文件的类型和大小属性。Blob表示二进制数据块，通过接口Blob中的slice方法可以访问指定长度与类型的字节内部数据块。Blob接口提供了如下所示的两个属性：size：表示返回数据块的大小。type：表示返回数据块的MIME类型，如果不能确定数据块的类型，则返回一个空字符串。Blob接口定义了下面两个方法：slice：返回从start开始到end结束的contentType数据类型新的Blob对象。close：关闭Blob对象。在HTML5网页应用中，FileReader接口提供了一个异步的API，通过这个API不仅可以读取图片文件，而且还可以读取文本或二进制文件。同时，根据该接

4、口提供的事件与方法，可以动态侦察文件读取时的详细状态。当访问不同文件时，必须重新调用FileReader接口的构造函数。因为每调用一次，FileReader接口都会返回一个新的FileReader对象，只有这样才能访问不同文件的数据。在FileReader接口中，拥有许多用于读取文件或响应事件的方法，例如触发onabort事件时，需要调用abort()方法。FileReader接口中常用方法如右表所示。FileReader接口的常用方法在HTML5提供的FileReader接口中，包含了很多常用的事件和一套完整的事件处理机制。通过触发这些事件可以清晰地侦听FileReader对象读取文件的详细

5、过程，以便更加精确地定位每次读取文件时的事件先后顺序，为编写事件代码提供有力的支持。接口FileReader中的常用事件如下：onabort：中断时触发。onerror：出错时触发。onload：文件成功读取完毕时触发。onloadend：文件读取完毕时触发，无论是否失败。onloadstart：文件开始读取时触发。onprogress：当文件读取时，周期性地触发。在现实应用中，网页文件通过接口FileReader中的方法进行正常读取工作时，触发事件的先后顺序如下：onloadstartonprogressonloadonloadend在调用接口FileReader中的方法正常读取文件时，大部

6、分的文件读取过程都集中在onprogress事件中，该事件耗时最长。如果文件在读取过程中出现异常或中止，那么将结束onprogress事件，直接触发onerror或onabort事件，而不会触发onload事件。另外，onload事件是文件读取成功时触发，而onloadend虽然也是文件操作成功时触发，但该事件不论文件读取是否成功，都将触发。由此可见，要想要正确获取文件数据，必须在onload事件中编写代码。具体实现流程如下：（1）新建一个HTML5页面，在里面创建一个“file”类型的元素。（2）单击元素的“选择文件”按钮后可以选择一个图片文件。（3）单击“打开”按钮或双击该文件后，在“选择

7、文件”按钮的右侧将显示该图片文件的名称。文件9-1.html的具体实现代码如下：选择单个文件上传 上传单个文件： 执行后的效果如下图所示。执行效果由上述执行效果可以看出，当单击“选择文件”按钮并选中上传文件后，在没有编写任何JavaScript代码的情况下，就可以在页面中显示出所选文件的名称。在HTML5网页应用中，通过File对象可以获取每个上传文件的名称、类型、大小。基于这个原理，可以过滤上传文件的类型，具体流程如下：（1）选择上传文件后遍历每一个File对象，然后获取该对象的类型，并将该类型与设置的过滤类型进行匹配。（2）如果不符合，则提示上传文件类型出错或拒绝上传，从而实现在选择文件时

8、过滤掉不需要上传的文件。在接下来的内容中，将通过一个演示实例来讲解使用类型过滤上传文件的方法。具体实现流程如下：（1）新建一个HTML5页面，然后在页面表单中创建一个“file”类型的元素，并设置“multiple”属性为“true”，用于选择多个文件。（2）当单击“选择文件”按钮，并选取了需要上传的文件后，开始调用JS文件js2.js进行处理。（3）如果选取的文件中存在不符合“图片”类型的文件，则在页面中显示总数量与文件名称。实例文件9-2.html的具体实现代码如下：通过类型过滤上传文件 上传过滤类型后的文件： 再看JavaScript文件js2.js，功能是调用fileUpload_Ch

9、eckType()函数按设置的类型格式过滤需要上传的文件，具体实现的代码如下：function $(id) return document.getElementById(id);/选择上传文件时调用的函数function fileUpload_CheckType(f) var strP = , strN = , intJ = 0; var strFileType = /image.*/; for (var intI = 0; intI f.length; intI+) var tmpFile = fintI; if (!tmpFile.type.match(strFileType) intJ

10、= intJ + 1; strN = strN + tmpF + ; strP = 检测到( + intJ + )个非图片格式文件 ; if (intJ 0) strP = strP + 文件名如下: + strN + ; $(pTip).innerHTML= strP;在上述代码中，如果上传的文件是图片类型，则File对象返回的类型均以“image/”开头，后面添加“*”以表示所有的图片类型，或添加“gif”表示某种类型图片。如果是一个图片文件，则该文件返回的类型必定以“image/”字样开头。正因为上述设置，当在本实例中遍历传回的文件集合时，通过match()方法检测每个文

11、件返回的类型中是否含有“image/*”。如果没有，说明是非图片类型文件，分别将总量与文件名称以叠加的形式保存在变量中；然后将变量的内容赋值给ID号为“pTip”的元素；最后，通过该元素显示全部过滤文件的总量与名称表。本实例执行后的效果如下图所示。执行效果在HTML5网页应用中，可以设置“file”类型元素的“accept”属性为文件的过滤类型。设置完“accept”属性值后，在打开窗口选择文件时，默认的文件类型就是所设置的过滤类型。下面将通过一个演示实例来学习通过通过accept属性过滤选择文件类型的方法。具体实现流程如下：（1）新建一个HTML5页面，在页面表单中创建一个“file”类型的

12、元素。（2）在元素中添加一个“accept”属性，将属性值设置为“image/gif”。（3）当用户单击“选择文件”按钮时，在打开的文件选择窗口中，将显示设置的文件类型为“Gif Image”。实例文件9-3.html的具体实现代码如下：通过accept属性过滤某类型上传文件 选择某类型上传文件： 执行后的效果如下图所示。执行效果下面通过一个演示实例来讲解通过readAsDataURL()方法预览图片的方法。具体实现流程如下：（1）新建一个HTML5页面，然后在页面表单中添加一个“file”类型的元素，用于选择上传文件。（2）设置属性“multiple”的值为“true”，表示允许选择多个文件

13、。（3）单击“选择文件”按钮后，如果选择的是一个图片格式的文件，则调用JS文件js4.js在页面中显示这个图片。实例文件9-4.html的具体实现代码如下：使用readAsDataURL()方法预览图片 预览图片文件： js4.js文件的功能是调用fileUpload_PrevImageFile()方法访问fileReader接口，将选择的文件以数据URL的方式返回并显示在页面中。具体实现流程如下：（1）遍历传回的上传文件集合，获取每个File对象。（2）因为每个文件返回的数据块都不同，所以在每次读取文件前需要先重构一个新的FileReader对象，然后将每个文件以数据URL的方式读入页面中。

14、（3）读取成功时触发onload事件，在该事件中通过“result”属性获取文件读入页面中的URL地址，并将该地址与元素进行绑定。（4）通过列表ID号为“ulUpload”的列表元素展示在页面中，从而实现上传图片文件预览的效果。在本实例中，需要引用FileReader接口提供的读取文件方法readAsDataURL()。在引用接口之前，需要考虑各个浏览器对接口的兼容性差异，因此首先利用JavaScript代码检测用户的浏览器是否支持FileReader对象，如果不支持则提示出错信息。文件js4.js的具体实现的代码如下：function $(id) return document.getEle

15、mentById(id);/选择上传文件时调用的函数function fileUpload_PrevImageFile(f) /检测浏览器是否支持FileReader对象 if (typeof FileReader = undefined) alert(检测到您的浏览器不支持FileReader对象!); var strHTML= ; for (var intI = 0; intI f.length; intI+) var tmpFile = fintI; var reader = new FileReader(); reader.readAsDataURL(tmpFile); reader.

16、onload = function(e) strHTML= strHTML+ ; strHTML= strHTML+ ; strHTML= strHTML+ ; $(ulUpload).innerHTML= + strHTML+ ; 执行后的效果如下图所示。执行效果在HTML5标记语言中，使用FileReader接口中的readAsText()方法可以以文本编码的方式读取文件，也就是说可以读取上传文本文件的内容。实现上述功能的方法与读取图片基本相似，只是读取文件的方式不同而已。下面我们通过一个演示实例来讲解使用readAsText()方法读取文本文件内容的方法。具体实现流程如下：（1）新建一个

17、HTML5页面，在页面表单中新建一个“file”类型的元素，用于获取上传的文本文件。（2）当单击“选择文件”按钮并选中一个文本文件后，通过调用JS文件js5.js在页面中将显示该文本文件的内容。实例文件9-5.html的具体实现代码如下：使用fileReader方法读取文本文件 读取文本文件: js5.js文件的功能是调用fileUpload_ReadTxtFile()方法，将文件以文本编码方式读取并返回页面，具体实现代码如下：function $(id) return document.getElementById(id);/选择上传文件时调用的函数function fileUpload_R

18、eadTxtFile(f) /检测浏览器是否支持FileReader对象 if (typeof FileReader = undefined) alert(检测到您的浏览器不支持FileReader对象!); var tmpFile = f0; var reader = new FileReader(); reader.readAsText(tmpFile); reader.onload = function(e) $(artShow).innerHTML= + e.target.result + ; 在上述代码中，首先检测浏览器是否支持FileReader对象，如果支持则重构一个新的File

19、Reader对象，并调用该对象的readAsText()方法将文件以文本编码的方式读入页面中；然后通过result属性获取读入的内容，并将该内容赋值给ID号为“artShow”的元素；最后，通过该元素将文本文件的内容显示在页面。本实例执行后的效果如右图所示。执行效果本实例的具体实现流程如下：（1）新建一个HTML5页面，在页面中创建一个“file”类型的元素，添加“multiple”属性，并将该属性的值设置为“true”。（2）单击“选择文件”时，同时选择3个文件。（3）单击“打开”按钮后，在“选择文件”按钮的右侧将显示“3个文件”的字样。（4）当移动鼠标至文字上时，将显示这3个文件的详细名称

20、与类型。实例文件9-6.html的具体实现代码如下：选择多个文件上传 上传多个文件： 在上述代码中，因为在“file”类型的元素中添加了“multiple”属性，所以可以通过该元素选择多个文件。当选择成功后，不会在“选择文件”按钮右侧显示文件的名称，而是显示成功选择文件的总数。执行效果如下图所示。执行效果当将鼠标移至总数时，会显示全部上传文件的详细列表。这个功能的实现是因为当选中多个文件时，在上传文件元素中将会产生一个“FileList”对象，用来装载各个文件的基本信息，如文件名称、类型、大小等。当在上传文件总量的文字上移动鼠标时，将调用该对象的列表信息展示在页面中。具体实现流程如下：（1）新

21、建一个HTML5页面，在页面的表单中创建一个“file”类型的元素。（2）将元素元素的“multiple”属性设置为“true”，这表示允许选择多个文件。（3）当单击“选择文件”按钮，选取多个需要上传的文件后，通过调用js3.js文件，在页面中以列表的方式展示所选文件的名称、类型、大小信息。实例文件9-7.html的具体实现代码如下：获取上传文件的类型与大小 上传多个文件： js7.js文件调用了fileUpload_GetFileList方法，以列表的形式展示上传文件的数据信息。其具体实现代码如下：function $(id) return document.getElementById(id);/选择上传文件时调用的函数function fileUpload_GetFileList(f) var strLi = ; strLi = strLi + 文件名称; strLi = strLi + 文件类型; strLi =