javascript 圖片預覽
最近調整網站功能又有需要預覽檔案上傳選擇的圖片的功能,就把他抽出來做個紀錄。
在檔案上傳選擇後使用FileReader的功能先行讀取資料到圖片元素中顯示。
方法
利用FileReader來實現圖片預覽功能,使用readAsDataURL讀取完files之後回輸出base64編碼字串,把這串編碼塞進img標籤中就可以在網頁上顯示圖片。
$('.imgfileinput').change(function(){
let _this = this;
if (_this.files && _this.files[0]) {
let reader = new FileReader();
reader.onload = function (e) {
$(_this).closest('div').find('img').first().attr('src', e.target.result);
}
reader.readAsDataURL(_this.files[0]);
}
});