要想在頁面上顯示上傳的本地圖片，以前我們的做法是將選擇的圖片檔案上傳至後端伺服器，後端對其進行儲存，再將圖片的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" onchange="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的事件方法引數列表：

謝謝