前言

在如今的项目开发过程中，上传图片或者上传头像已经变成了非常常见的操作。一般的，都需要在向后台上传图片之前，在页面中预览一下用户选择的图片。上传头像只需要预览一张图片，如果是上传图片至相册功能，则需要预览用户选择的多张图片。这样的操作在H5页面中要如何实现呢？本文系统的教大家认识H5为我们提供的Files类和File类，这两个类在现代项目开发中起着举足轻重的作用。

一、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="image/jpeg" />
</form>
123

我们还要知道，无论使用JavaScript的DOM操作，还是jQuery的相关方法，都无法利用表单元素的value属性获得用户选择的文件地址。value属性只能得到一个包含文件全名的虚拟地址：

C:\fakepath\文件全名

我们可以从本地的C盘去进行查找，fakepath路径根本不存在。那么我们要怎样才能在页面中显示用户选择的图片呢？这就要用到Files类和File类了。

二、认识Files类

1、如何创建Files类的实例

使用Files类必须先创建Files类的实例，创建格式如下所示。

var 实例名 = 文件域.files;

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

2、Files类的属性

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

3、Files类的方法

• item(index)，返回Files类中所包含文件中索引值为index的文件。
  item()方法也可以使用Files类实例名的下标来表示：files.item(0) 也可以写成 files[0]

三、认识File类

1、如何创建File类的实例

使用File类必须先创建File类的实例，创建格式如下所示。

var 实例名 = Files类的实例.item(index);

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

2、File类的属性

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

四、认识单页面文件的有效地址

1、blob地址和base64地址

（1）这两类地址都可以在本页面内作为文件的有效地址，在其他页面无法使用。
（2）前端技术产生的这两类地址都无法在后台使用。

2、如何获得blob地址

var blobAddress = window.URL.createObjectURL(File实例 | 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 Image();
	img.src=URL.createObjectURL(file);
	img.width=60;
	img.height=60;
	imgContainer.appendChild(img);
}

五、FileReader类

1、FileReader类的功能

FileReader类可以读取到File类实例所指代的文件的内容。要想获得用户所选文件的base64地址必须使用FileReader类。

2、创建FileReader类的实例

var fr=new FileReader();

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(){
	var file=this.files.item(0);
	var fr=new FileReader();
	fr.readAsDataURL(file);
	fr.onload=function(){
		$(".tp").src=this.result;
	}
})

例2：为文件的读取设置一个进度条。

<progress max="进度条的最大值" 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 blob=new Blob(Array,{ type:“MIME类型” })

参数：Array，数组，该数组用来指定创建文件的内容。

3、Blob类案例

例1：创建一个文本文件并另存为指定的本地路径。

$(".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开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。