前端开发中的文件处理功能：Files类和File类的认识
时间：2023-04-05 18:45:44
HTML5
前言在如今的项目开发过程中，上传图片或者上传头像已经成为了一个很常见的操作。一般在上传图片到后台之前，需要先在页面预览用户选中的图片。上传头像只需要预览一张图片。如果上传图片到相册，需要预览用户选择的多张图片。如何在H5页面实现这样的操作？本文系统的教你理解H5提供的Files类和File类。这两个类在现代项目开发中起着举足轻重的作用。1、HTML5在文件字段中添加如下两个属性HTML5在文件字段中添加如下两个属性：multiple，设置文件字段是否可以同时选择多个文件上传。这是一个没有值的placement属性，在file字段的代码中写入即可使用。accept，用于在文件字段选择本地文件时过滤文件类型。该属性的值为MIME类型，决定弹出资源管理器只显示accept指定类型的文件。同时，HTML还规定在项目中使用文件域时，必须为文件域设置name属性。另外，如果表单有文件传输功能，表单的enctype属性必须设置为multipart/form-data。例如：让用户通过文件字段从本地资源管理器中选择多张图片，HTML代码如下。我们还需要知道，无论是使用JavaScript的DOM操作，还是jQuery的相关方法，都不能通过form元素的value属性来获取用户选择的文件地址。value属性只能得到一个包含文件全名的虚拟地址：C:fakepath文件全名，我们可以从本地C盘搜索，fakepath路径根本不存在。那么我们如何才能在页面上显示用户选择的图片呢？这将使用Files类和File类。二、认识Files类1.如何创建Files类的实例要使用Files类，首先要创建Files类的实例。创建格式如下。var实例名=文件域.files;varfiles=document.querySelector(".tx").files;//变量files是Files类的实例名alert(files);//[objectFileList]2、Files类的属性length返回Files类中包含的文件数。3、Files类的item(index)方法返回Files类包含的文件中索引值为index的文件。item()方法也可以用Files类实例名的下标表示：files.item(0)也可以写成files[0]3.认识File类1.如何创建实例File类要使用File类，必须先创建一个File类的实例，按以下格式创建。varinstancename=Files类的实例.item(index);varfile=document.querySelector(".tx").files.item(0);//变量file是File类的实例名alert(file);//[objectFile]2.File类的属性name返回文件的文件名。大小，以字节(B)为单位返回文件的大小。type，返回文件的MIME类型名称。lastModified，返回文件最后一次修改的日期，从1970年1月1日起以毫秒为单位。lastModifiedDate，返回文件最后一次修改的日期。四、知道单页文件的有效地址1、blob地址和base64地址(1)这两类地址可以作为本页文件的有效地址，不能用于其他页。(2)前端技术生成的两种地址都不能在后台使用。2.如何获取blob地址varblobAddress=window.URL.createObjectURL(Fileinstance|Blobinstance)3.使用blob地址显示图片预览示例：页面中有一个文件字段，还有一个预览图片的容器，HTML代码如下所示。
原生JavaScript代码如下。varfileNode=document.querySelector("input[type=file]");varimgContainer=document.querySelector(".imgContainer");fileNode.onchange=function(){varfile=this.files.item(0);varimg=新图像（）；img.src=URL.createObjectURL(文件);img.width=60;img.height=60;imgContainer.appendChild(img);}五、FileReader类1、FileReader类函数FileReader类可以读取File类实例引用的文件内容。要获取用户选择的文件的base64地址，必须使用FileReader类。2.创建FileReader类的实例varfr=newFileReader();3、FileReader类的方法readAsArrayBuffer(file)：读取file文件的内容，得到ArrayBuffer格式的结果。readAsText(file,charset)：按照指定的charset字符集读取文本文件形式的文件file的内容。readAsBinaryString(file)：将文件读取为二进制字符串。readAsDataURL(file)：读取文件file，返回文件file的base64地址。4、FileReader类的属性result，当文件读取结束时，返回以指定方式读取文件的结果。5、FileReader类的事件loadStart：开始读取文件时触发该事件。progress：该事件在读取文件的过程中被触发。load：文件读取结束时触发该事件。示例1：读取一个文件（图片），获取文件的base64地址。$(".file").addEventListener("input",function(){varfile=this.files.item(0);varfr=newFileReader();fr.readAsDataURL(file);fr.onload=function(){$(".tp").src=this.result;}})例2：设置读取文件的进度条。
$(".file").addEventListener("input",function(){varfile=this.files.item(0);varfr=newFileReader();fr.readAsBinaryString(file);fr.onloadstart=function(){//开始读取文件时$(".pro").style.display="block";}fr.onprogress=function(){//读取文件过程中vartemp=(event.loaded/file.size)*100;$("progress").value=temp;$("progress+span").textContent=parseInt(temp*10)/10+"%";}fr.onload=function(){//读取结束时window.setTimeout(function(){$(".pro").style.display="none";},2000);}})六、Blob类1、Blob类的功能实现了新建文件，它是File类的父类。2、创建Blob类实例varblob=newBlob(Array,{type:"MIMEtype"})参数：Array，数组，用于指定创建文件的内容。3.Blob类案例例1：创建一个文本文件，并保存到指定的本地路径。$(".btn").addEventListener("click",function(){vartxt=$(".txt").value;vararray=newArray();array.push(txt);varblob=newBlob(array,{type:"text/plain"});varurl=URL.createObjectURL(blob);varaNode=document.createElement("a");aNode.href=url;aNode.download="";aNode.click();})例2：实现在线HTML代码执行功能。$(".btn").addEventListener("click",function(){varcodeContent=$(".code").textContent;vararray=newArray(codeContent.replace(/s+s+/g,'>'));varblob=newBlob(array,{type:"text/html"});varfr=newFileReader();fr.readAsText(blob,'gb2312');fr.onload=function(){console.log(this.result);}varurl=URL.createObjectURL(blob);$(".iframe").src=url;})在HTML5中总结在页面操作的过程中，很多地方都可以用到Files类、File类、Bolb类。H5提供的这些类可以简化我们对文件的操作，结合后台功能，我们可以开发出各种文件功能。作者简介小海前端，拥有18年Web项目开发和前后端培训经验。编写过前端领域比较系统的培训教材，对Vue.js、微信小程序开发、uniApp、React等全栈开发领域造诣颇深。留在Segmentfault，希望结识更多Web开发领域的同仁，大力普及Web开发。同时，我们也愿意与您进行深入的技术探讨和业务合作。
