使用FileReader接口的readAsDataURL方法實現圖片的預覽。
在FileReader出現之前，前端的圖片預覽是這樣實現的：把本地圖片上傳到服務器，服務器把圖片地址返回，並把它替換到圖片元素的src屬性。
這種方法的缺點是：必須要先把圖片上傳到服務器。那么問題來了，如果上傳的圖片很大，而網速又很慢，這就需要等待很久預覽圖片才會顯示出來了，而且，如果用戶預覽圖片后發現不太滿意，想重新選擇一張圖片，這時候還要把已經上傳到服務器上的圖片給刪除掉。
自從有了HTML5的FileReader對象以后，預覽圖片變得簡單多了，不再需要后台的配合，並且JS操作本地文件已經成為了可能。這種方法的思路是：通過FileReader.prototype.readAsDataURL()方法把圖片文件轉成base64編碼，然后把base64編碼替換到預覽圖片的src屬性即可。如果想要了解更多關於FileReader對象的，可以看一下這里：FileReader https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
下面是使用FileReader進行圖片預覽的簡單demo：
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no,adress=no">
<title>通過filereader接口讀取文件</title>
<script type="text/javascript">
var inputElement = document.querySelector('.head-portrait');
inputElement.addEventListener('change', readAsDataURL);
function readAsDataURL() {
//判斷瀏覽器是否支持filereader
if(typeof FileReader=='undifined') {
result.innerHTML="<p>抱歉，你的瀏覽器不支持 FileReader</p>";
return false;
}
var file= inputElement.files[0];
//判斷獲取的是否為圖片文件
if(!/image\/\w+/.test(file.type)) {
alert("請確保文件為圖像文件");
return false;
}
var reader=new FileReader();
//readAsDataURL讀取文件並將文件數據以URL形式保存到result屬性中
reader.readAsDataURL(file);
reader.onload=function(e) {
//result為base64數據
var imgData = this.result;
imgShow.setAttribute('src', imgData);
}
}
</script>
</head>
<div>
<img class="imgshow" />
<input type="file" class="head-portrait" accept="image/*" />
</div>
<body>
</body>
</html>