搜索
文件操作基础知识实例9-1：在表单中选择单个文件实例9-5：读取文件内容实例9-2：通过类型过滤上传文件储方式实例9-3：通过accept属性过滤选择文件的类型实例9-4：用readAsDataURL()预览图片实例9-6：同时上传多个文件实例9-7：获取文件类型与大小综合实例：用拖动的方式选择并浏览文件当创建“file”类型的input元素上传文件时，该元素在页面中不再显示为文本框效果，而是显示为一个“选择文件”的按钮，并且在按钮的右侧显示选择上传文件的名称。因为在初始化页面时没有上传文件，所以会显示为“未选择文件”字样。HTML5标记语言中，除了可以选择单个上传文件外，还可以同时选择多个上传文件，此功能的具体实现流程如下：（1）为元素添加multiple属性；（2）将属性multiple的值设为true。在HTML5页面中，一个文件对应一个File对象，在该对象中存在以下两个重要属性：name：表示不包含路径的文件名称。lastModifiedDate：表示最后修改文件的时间。当使用file类型的input元素选择多个文件时，该元素中就含有多个File对象，从而形成了FileList对象，也就是File对象的列表。Filelist接口有两个重要成员：item方法：返回Filelist数组的第index个数组元素。length：数组元素的数量。在HTML5网页应用中，通过访问Blob对象的方式可以获取上传文件的类型和大小属性。Blob表示二进制数据块，通过接口Blob中的slice方法可以访问指定长度与类型的字节内部数据块。Blob接口提供了如下所示的两个属性：size：表示返回数据块的大小。type：表示返回数据块的MIME类型，如果不能确定数据块的类型，则返回一个空字符串。Blob接口定义了下面两个方法：slice：返回从start开始到end结束的contentType数据类型新的Blob对象。close：关闭Blob对象。在HTML5网页应用中，FileReader接口提供了一个异步的API，通过这个API不仅可以读取图片文件，而且还可以读取文本或二进制文件。同时，根据该接口提供的事件与方法，可以动态侦察文件读取时的详细状态。当访问不同文件时，必须重新调用FileReader接口的构造函数。因为每调用一次，FileReader接口都会返回一个新的FileReader对象，只有这样才能访问不同文件的数据。在FileReader接口中，拥有许多用于读取文件或响应事件的方法，例如触发onabort事件时，需要调用abort()方法。FileReader接口中常用方法如右表所示。FileReader接口的常用方法在HTML5提供的FileReader接口中，包含了很多常用的事件和一套完整的事件处理机制。通过触发这些事件可以清晰地侦听FileReader对象读取文件的详细过程，以便更加精确地定位每次读取文件时的事件先后顺序，为编写事件代码提供有力的支持。接口FileReader中的常用事件如下：onabort：中断时触发。onerror：出错时触发。onload：文件成功读取完毕时触发。onloadend：文件读取完毕时触发，无论是否失败。onloadstart：文件开始读取时触发。onprogress：当文件读取时，周期性地触发。在现实应用中，网页文件通过接口FileReader中的方法进行正常读取工作时，触发事件的先后顺序如下：onloadstartonprogressonloadonloadend在调用接口FileReader中的方法正常读取文件时，大部分的文件读取过程都集中在onprogress事件中，该事件耗时最长。如果文件在读取过程中出现异常或中止，那么将结束onprogress事件，直接触发onerror或onabort事件，而不会触发onload事件。另外，onload事件是文件读取成功时触发，而onloadend虽然也是文件操作成功时触发，但该事件不论文件读取是否成功，都将触发。由此可见，要想要正确获取文件数据，必须在onload事件中编写代码。具体实现流程如下：（1）新建一个HTML5页面，在里面创建一个“file”类型的input元素。（2）单击input元素的“选择文件”按钮后可以选择一个图片文件。（3）单击“打开”按钮或双击该文件后，在“选择文件”按钮的右侧将显示该图片文件的名称。文件9-1.html的具体实现代码如下：!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title选择单个文件上传/titlelinkhref=Css/css.cssrel=stylesheettype=text/css/headbodyformid=frmTmpfieldsetlegend上传单个文件：/legendinputtype=filename=fleUploadid=fleUpload//fieldset/form/body/html执行后的效果如下图所示。执行效果由上述执行效果可以看出，当单击“选择文件”按钮并选中上传文件后，在没有编写任何JavaScript代码的情况下，就可以在页面中显示出所选文件的名称。在HTML5网页应用中，通过File对象可以获取每个上传文件的名称、类型、大小。基于这个原理，可以过滤上传文件的类型，具体流程如下：（1）选择上传文件后遍历每一个File对象，然后获取该对象的类型，并将该类型与设置的过滤类型进行匹配。（2）如果不符合，则提示上传文件类型出错或拒绝上传，从而实现在选择文件时过滤掉不需要上传的文件。在接下来的内容中，将通过一个演示实例来讲解使用类型过滤上传文件的方法。具体实现流程如下：（1）新建一个HTML5页面，然后在页面表单中创建一个“file”类型的input元素，并设置“multiple”属性为“true”，用于选择多个文件。（2）当单击“选择文件”按钮，并选取了需要上传的文件后，开始调用JS文件js2.js进行处理。（3）如果选取的文件中存在不符合“图片”类型的文件，则在页面中显示总数量与文件名称。实例文件9-2.html的具体实现代码如下：!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title通过类型过滤上传文件/titlelinkhref=css.cssrel=stylesheettype=text/cssscripttype=text/JavaScriptlanguage=jscriptsrc=js2.js//script/headbodyformid=frmTmpfieldsetlegend上传过滤类型后的文件：/legendinputtype=filename=fleUploadid=fleUploadonChange=fileUpload_CheckType(this.files);multiple=true/pid=pTip//fieldset/form/body/html再看JavaScript文件js2.js，功能是调用fileUpload_CheckType()函数按设置的类型格式过滤需要上传的文件，具体实现的代码如下：function$$(id){returndocument.getElementById(id);}//选择上传文件时调用的函数functionfileUpload_CheckType(f){varstrP=,strN=,intJ=0;varstrFileType=/image.*/;for(varintI=0;intIf.length;intI++){vartmpFile=f[intI];if(!tmpFile.type.match(strFileType)){intJ=intJ+1;strN=strN+tmpFile.name+br;}}strP=检测到(+intJ+)个非图片格式文件｡;if(intJ0){strP=strP+文件名如下:p+strN+/p;}$$(pTip).innerHTML=strP;}在上述代码中，如果上传的文件是图片类型，则File对象返回的类型均以“image/”开头，后面添加“*”以表示所有的图片类型，或添加“gif”表示某种类型图片。如果是一个图片文件，则该文件返回的类型必定以“image/”字样开头。正因为上述设置，当在本实例中遍历传回的文件集合时，通过match()方法检测每个文件返回的类型中是否含有“image/*”。如果没有，说明是非图片类型文件，分别将总量与文件名称以叠加的形式保存在变量中；然后将变量的内容赋值给ID号为“pTip”的元素；最后，通过该元素显示全部过滤文件的总量与名称表。本实例执行后的效果如下图所示。执行效果在HTML5网页应用中，可以设置“file”类型input元素的“accept”属性为文件的过滤类型。设置完“accept”属性值后，在打开窗口选择文件时，默认的文件类型就是所设置的过滤类型。下面将通过一个演示实例来学习通过通过accept属性过滤选择文件类型的方法。具体实现流程如下：（1）新建一个HTML5页面，在页面表单中创建一个“file”类型的input元素。（2）在input元素中添加一个“accept”属性，将属性值设置为“image/gif”。（3）当用户单击“选择文件”按钮时，在打开的文件选择窗口中，将显示设置的文件类型为“GifImage”。实例文件9-3.html的具体实现代码如下：title通过accept属性过滤某类型上传文件/titlelinkhref=css.cssrel=stylesheettype=text/css/headbodyformid=frmTmpfieldsetlegend选择某类型上传文件：/legendinputtype=filename=fleUploadid=fleUploadaccept=image/gif//fieldset/form/body执行后的效果如下图所示。执行效果下面通过一个演示实例来讲解通过readAsDataURL()方法预览图片的方法。具体实现流程如下：（1）新建一个HTML5页面，然后在页面表单中添加一个“file”类型的input元素，用于选择上传文件。（2）设置属性“multiple”的值为“true”，表示允许选择多个文件。（3）单击“选择文件”按钮后，如果选择的是一个图片格式的文件，则调用JS文件js4.js在页面中显示这个图片。实例文件9-4.html的具体实现代码如下：title使用readAsDataURL()方法预览图片/titlescripttype=text/JavaScriptlanguage=jscriptsrc=js4.js//script/headbodyformid=frmTmpfieldsetlegend预览图片文件：/legendinputtype=filename=fleUploadid=fleUploadonChange=fileUpload_PrevImageFile(this.files);multiple=true/ulid=ulUpload/ul/fieldset/form/bodyjs4.js文件的功能是调用fileUpload_PrevImageFile()方法访问fileReader接口，将选择的文件以数据URL的方式返回并显示在页面中。具体实现流程如下：（1）遍历传回的上传文件集合，获取每个File对象。（2）因为每个文件返回的数据块都不同，所以在每次读取文件前需要先重构一个新的FileReader对象，然后将每个文件以数据URL的方式读入页面