前言

在如今的項目開發過程中，上傳圖片或者上傳頭像已經變成了非常常見的操作。一般的，都需要在向後台上傳圖片之前，在頁面中預覽一下用戶選擇的圖片。上傳頭像只需要預覽一張圖片，如果是上傳圖片至相冊功能，則需要預覽用戶選擇的多張圖片。這樣的操作在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開發大力的進行普及。同時也願意與大家進行深入的技術研討和商業合作。

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/255396.html