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]);
			}
		});
Tags : javasciprt