FileReader 物件

存檔 方便以後拿來即用 可以整合 canvas圖片裁剪進行實現

<input type="file" value="提交" id="file">
<button id="btn">上傳圖片並預覽</button>

input{
	display: none;
}
button{
	outline: none;
	border: none;
	border: 1px solid #000;
	border-radius: 10px;
	padding: 13px 15px;
	cursor: pointer;
}
button:hover
 
{
	box-shadow: 0 0 10px #333;
}

let input = document.getElementById('file');
input.addEventListener('change', function(e){
	let target = e.target;
	let file = target.files[0];
	// 使用FileReader物件
	let reader = new FileReader();
	reader.readAsDataURL(file);
	reader.addEventListener('load', ()=>{
		let
 
 img = new Image();
		img.style.cssText = "width: 400px;height: 400px;display: block";
		// 生成圖片此處處理圖片資訊
		img.src = reader.result;
		img.onload = function() {
			document.body.appendChild(img);
		}
	})
})

// 模擬點選
document.getElementById('btn').addEventListener('click',function(){
	input.click()
})