input标簽上傳圖檔到後端前用H5的FileReader 方法實作圖檔的顯示

要想在頁面上顯示上傳的本地圖檔，以前我們的做法是将選擇的圖檔檔案上傳至後端伺服器，後端對其進行存儲，再将圖檔的URL傳回到前端，前端通過接口主要是将檔案讀入記憶體，并提供相應的方法，來讀取檔案中的資料,将讀取的資料放到result中，通多讀取到資料就能實作本地圖檔不需上傳就可以顯示。目前進階浏覽器實作了FileReader接口。

這個URL來顯示圖檔。而H5的FileReader接口支援本地預覽，FileReader

例如：（html）

<form action=""><!--action屬性值資料傳到後端的路徑-->
			<label style="color:red;" for="up_img">上傳圖檔</label>
			<input accept="image/*" type="file" id="up_img" οnchange="fileUpLoad(this);"/>
			<div id="showImg">
			</div>
		</form>      

js)

<script type="text/javascript">
		var imgCont = document.getElementById("showImg"); 
		var ipt = document.getElementById("up_img"); 
		function fileUpLoad(_this){
			var file = _this.files[0];
			if(!/image\/\w+/.test(file.type)){ //html中已經用accept='image/*'限制上傳的是圖檔了，此處判斷可省略
		        alert("檔案必須為圖檔！"); 
		        return false; 
		    } 
			if(!FileReader){
				alert("你的浏覽器不支援H5的FileReader");
				ipt.setAttribute("disabled","disabled");//浏覽器不支援禁用input type='file'檔案上傳标簽
				return;
			}
			var fileReader = new FileReader();
			fileReader.readAsDataURL(file);//将檔案讀取為Data URL 讀取結果放在result中
			fileReader.onload = function(e){
				var img = '<img src="'+this.result+'"/>';
				imgCont.innerHTML = img;
				console.log(this.result);
			}
		}
	</script>
           

通過上面的方法：就實作了圖檔不需要上傳就可以顯示本地圖檔

FileReader的事件方法參數清單：

事件，方法，參數	描述
方法
1）abort	中斷讀取
2）readAsText(file,[enconding:string])	将檔案讀取為文本，該方法有兩個參數，第二個參數是檔案編碼格式，預設的是UTF-8,方法很容易了解，将檔案以文本方式讀取， 讀取結果就是這個文本檔案得内容。
3）readAsBinaryString(file)	将檔案讀取為二進制字元串，通常将它傳給後端，後端将通過該字段存儲檔案
4）readAsDataURL(file)	程式中用到的方法，該方法将檔案讀取為data:開頭的字元串，這段字元串的實質就是Data URL, Data URL是一種将小檔案直接嵌入到文檔的方案，這裡的小檔案通常是指html和圖像等檔案
事件：	描述：
1》onabort/abort	中斷時觸發
2》onerror/error	出錯時觸發
3》onloadstart/loadstart	讀取開始時觸發
4》onload/load	檔案讀取成功完成時觸發
5》onloadend/loadend	檔案讀取成功完成時觸發，無論成功Or失敗
6》onprogress/progress	檔案讀取中

具體的HTML5FileReader方法事件講解可以閱覽：點選打開連結http://www.javascripture.com/FileReader

謝謝