關於H5里的API，上傳圖片預覽功能

FileReader：讀取本地圖片文件並顯示

寫在開頭

之前公司要求做一個H5頁面，功能是照相和選擇相冊相片，並且能在屏幕上預覽。然后我就傻里吧唧的各種找插件，因為有些插件不適配手機的型號，安卓機基本死掉，蘋果有時候也會出點小bug（會閃退）。那是最后的解決方案是不顯示圖片了，把選擇的鏈接上傳就好了。知道今天我才發現Html5里面有個能上傳圖片的API，怎么不上天！？
接下來就講講這個怎么實現
也不多說廢話，先放代碼再講解

HTML：

<p> 
   <label>請選擇一個圖像文件：</label> 
   <input type="file" id="file_input" /> 選擇圖片的input按鈕
</p>  
<div id="rrr"></div>//拿來放圖片用的

js:

var aaa = document.getElementById("rrr"); //獲取顯示圖片的div元素
var input = document.getElementById("file_input"); //獲取選擇圖片的input元素
      
      //這邊是判斷本瀏覽器是否支持這個API。
if(typeof FileReader==='undefined'){ 
    aaa.innerHTML = "抱歉，你的瀏覽器不支持 FileReader"; 
    input.setAttribute('disabled','disabled'); 
}else{ 
    input.addEventListener('change',readFile,false); //如果支持就監聽改變事件，一旦改變了就運行readFile函數。
} 

      
function readFile(){ 
    var file = this.files[0]; //獲取file對象
    //判斷file的類型是不是圖片類型。
    if(!/image\/\w+/.test(file.type)){ 
        alert("文件必須為圖片！"); 
        return false; 
    } 
    
    var reader = new FileReader(); //聲明一個FileReader實例
    reader.readAsDataURL(file); //調用readAsDataURL方法來讀取選中的圖像文件
    //最后在onload事件中，獲取到成功讀取的文件內容，並以插入一個img節點的方式顯示選中的圖片
    reader.onload = function(e){ 
        aaa.innerHTML = '<img src="'+this.result+'" alt=""/>' 
    } 
}