[Javascript] 筆記一下用法，input file 選取檔案後預覽圖片
2016-08-26
選取一個圖片檔案後，直接進行預覽，以前我都是傳到server 按下上傳後再做預覽，現在可以透過javascript 做到，這樣對使用者來說會更加的直覺看到選取圖片是否正確
function InputLoadImageToBindImageElement(inputEl, imgEl) { if (inputEl.files && inputEl.files[0]) {var reader = new FileReader();
reader.onload = function (e) { $(imgEl).attr('src', e.target.result);}
reader.readAsDataURL(inputEl.files[0]);
}
}
使用方式:
HTML:
<img src="" id="image1" />
<input type="file" name="name" id="iptImage1" value="" />
呼叫:
$("#iptImage1").change(function () {
InputLoadImageToBindImageElement(this, $('#image1'));
});
sample: