原理：使用input的 type="file" 屬性 input的 this.files[0] 值， 首先判斷是否為img類型，並且獲取到img的路徑， innerHtml 到所要展示圖片的 divbox中。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>html5camera</title> </head> <body> <div id="main"> <div class="demo"> <p> <label>請選擇一個圖像文件(請使用高級瀏覽器瀏覽：如Chrome，Firefox)：</label><br> <input type="file" id="file_input" /> </p> <div id="result"> <!-- 這里用來顯示讀取結果 --> </div> </div> <br/> <br/> </div> <script type="text/javascript"> 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); } 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){ //alert(3333) //alert(this.result); result.innerHTML = '<img src="'+this.result+'" alt=""/>' } } </script> </body> </html>