var fileUploader = document.getElementById("fileUploader"); var imageView = document.getElementById("imageView"); //用來讀取file資料的FileReader var fileReader = new FileReader(); //監控#fileUploader的值變化 fileUploader.addEventListener("change", function(event) { if (this.files.length > 0) { //有選取file時,使用fileReader讀取file資料 //readAsDataURL可以將讀取到的file資料轉成 //data:......的URL型式 fileReader.readAsDataURL(this.files[0]); }else{ //沒有選取file時,例如選擇取消, //將<img>的src設成"" imageView.src = ""; } }, false); fileReader.addEventListener("load", function(event) { //讀取後設定<img>的src imageView.src = this.result; }, false);
<input id="fileUploader" type="file" /> <div>圖片預覽:</div> <img id="imageView" src="" style="width:200px; height200px;" />