序

在如今的项目开发过程中，上传图片或者头像已经成为一种非常常见的操作。一般需要先预览用户在页面中选择的图片，再上传到后台。上传头像只需要预览一张图片。如果是上传图片到相册的功能，需要预览用户选择的多张图片。如何在H5页面实现这个操作？本文系统地教你认识H5提供的文件类和文件类，它们在现代项目开发中起着重要的作用。

首先，HTML5向文件域添加属性。

HTML5向文件字段添加了以下两个属性:

multiple，设置文件域是否可以同时选择多个要上传的文件。这是一个没有取值的放置性属性，书写在文件域的代码中就可以使用。accept，用于在文件域对本地文件进行选择时对文件类型进行筛选。该属性取值为MIME类型，以确定弹出的资源管理器只显示accept指定类型的文件。

同时，HTML还规定在项目中使用时，必须为文件域设置name属性。另外，如果表单有文件传递功能，表单的enctype属性必须设置为multipart/form-data。

例如，如果您希望用户通过文件字段从本地浏览器中选择多张图片，HTML代码如下所示。

<form method="get" action="uploadAvatar" enctype="multipart/form-data"> <input type="file" class="tx" name="file" multiple accept="i***ge/jpeg" /></form>123

我们还需要知道，无论是JavaScript的DOM操作，还是jQuery的相关方法，都不能使用form元素的value属性来获取用户选择的文件地址。Value属性只能获取包含文件全名的虚拟地址:

C:\fakepath\文件全名

我们可以从本地c盘查一下，fakepath路径根本不存在。那么如何才能在页面中显示用户选择的图片呢？这将使用Files类和File类。

第二，了解文件类

1.如何创建Files类的实例？

要使用Files类，必须首先创建Files类的一个实例。创建格式如下。

Var实例名称= files do***in.files

var files=document.querySelector(".tx").files; //变量files就是Files类的实例名alert(files); //[object FileList]

2.文件类的属性

length，返回Files类所包含的文件个数。

3.文件类的方法

item(index)，返回Files类中所包含文件中索引值为index的文件。

item()方法也可以使用Files类实例名的下标来表示：files.item(0) 也可以写成 files[0]

第三，了解文件类

1.如何创建File类的实例？

要使用File类，必须首先以下列格式创建File类的实例。

Var name = instance。files类的项目(索引)；

var file=document.querySelector(".tx").files.item(0); //变量file就是File类的实例名alert(file); //[object File]

2.文件类的属性

name，返回文件的文件名。size，以字节（B）为单位返回文件的大小。type，返回文件的MIME类型名。lastModified，返回文件上一次修改的日期距离1970年1月1日的毫秒数。lastModifiedDate，返回文件上一次修改的日期。

4.知道单页文件的有效地址。

1.blob地址和base***地址

(1)这两类地址可以作为本页文档的有效地址，但不能用于其他页面。
(2)前端技术生成的这两类地址都不能在后台使用。

2.如何获得blob地址

varblobaddress = window . URL . createobjecturl(文件实例| Blob实例)

3.使用blob地址显示图片预览。

示例:该页面有一个文件字段和一个预览图片的容器。HTML代码如下所示。

<input type="file" name="file" /> <div class="imgContainer"></div>12

本机JavaScript代码如下所示。

var fileNode=document.querySelector("input[type=file]");var imgContainer=document.querySelector(".imgContainer");fileNode.onchange=function(){var file=this.files.item(0);var img=new I***ge();img.src=URL.createObjectURL(file);img.width=60;img.height=60;imgContainer.appendChild(img);}

动词 （verb的缩写）FileReader类

1.FileReader类的函数

FileReader类可以读取File类实例引用的文件内容。要获取用户选择的文件的base***地址，必须使用FileReader类。

2.创建FileReader类的实例

var fr = new FileReader()；

3.FileReader类的方法

readAsArrayBuffer(file)：读取file文件的内容，并作为ArrayBuffer格式得到结果。readAsText(file,charset)：按照指定的charset字符集以文本文件的形式读取file文件的内容。readAsBinaryString(file)：以二进制字符串的形式读取文件。readAsDataURL(file)：读取file文件并返回file文件的base***地址。

4.FileReader类的属性

result，在文件读取结束时返回指定方式读取文件的结果。

5.FileReader类的事件

loadStart：开始读取文件时触发该事件。progress：读取文件过程中触发该事件。load：当文件读取结束时触发该事件。

示例:读取文件(图片)并获取文件的base***地址。

$(".file").addEventListener("input",function(){var file=this.files.item(0);var fr=new FileReader();fr.readAsDataURL(file);fr.onload=function(){$(".tp").src=this.result;}})

示例:设置读取文件的进度条。

<progress ***x="进度条的最大值" value="当前的读取进度"></progress>1$(".file").addEventListener("input",function(){var file=this.files.item(0);var fr=new FileReader();fr.readAsBinaryString(file);fr.onloadstart=function(){ //当开始读取文件时$(".pro").style.display="block";}fr.onprogress=function(){ //读取文件过程中var temp=(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类的实例

Var = newblob (array，{type: "mime type"})

参数:array，Array，用于指定创建文件的内容。

3.斑点案例

示例:创建一个文本文件，并将其保存为指定的本地路径。

$(".btn").addEventListener("click",function(){var txt=$(".txt").value;var array=new Array();array.push(txt);var blob=new Blob(array,{type:"text/plain"});var url=URL.createObjectURL(blob);var aNode=document.createElement("a");aNode.href=url;aNode.download="";aNode.click();})

例2:实现在线HTML代码执行功能。

$(".btn").addEventListener("click",function(){var codeContent=$(".code").textContent;var array=new Array(codeContent.replace(/\s+\</g,'\<').replace(/\>\s+/g,'\>'));var blob=new Blob(array,{type:"text/html"});var fr=new FileReader();fr.readAsText(blob,'gb2312');fr.onload=function(){console.log(this.result);}var url=URL.createObjectURL(blob);$(".iframe").src=url;})

摘要

在HTML5页面操作过程中，Files、File和Bolb可以在很多地方使用。H5提供的这些类可以简化我们对文件的操作，并结合后台函数开发各种文件功能。

关于作者

小海前端拥有18年的Web项目开发和前后台培训经验，拥有系统的前端领域培训教材，在Vue.js、微信小程序开发、uniApp、React等全栈开发领域造诣颇深。今日头条，希望能结识更多Web开发领域的同仁，大力普及Web开发。同时，我们愿意与您进行深入的技术探讨和业务合作。