第一步建立html

<p> 
   <label>請選擇一個影象檔案：</label> 
   <input type="file" id="file_input" /> 
</p>  
<div id="result"></div> 

通過getElementById獲取節點，判斷瀏覽器的相容性.

var result = document.getElementById("result"); 
var input = document.getElementById("file_input"); 
 
if(typeof
 
 FileReader==='undefined'){ 
    result.innerHTML = "抱歉，你的瀏覽器不支援 FileReader"; 
    input.setAttribute('disabled','disabled'); 
}else{ 
    input.addEventListener('change',readFile,false); 
} 

然後，當file_input的change事件觸發時，呼叫函式readFile()。在readFile中，我們首先獲取file物件，然後通過file的type屬性來檢測檔案型別，我們當然只允許選擇影象型別的檔案，然後我們new一個FileReader例項，並呼叫readAsDataURL方法來讀取選中的影象檔案，最後在onload事件中，獲取到成功讀取的檔案內容，並以插入一個img節點的方式顯示選中的圖片。

function readFile(){ 
    var file = this.files[0]; 
    if(!/image\/\w+/.test(file.type)){ 
        alert("檔案必須為圖片！"); 
        return false; 
    } 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function(e){ 
        result.innerHTML = '<img src="'+this.result+'" alt=""/>'
 
 
    } 
}