自定义上传控件实现

版权声明：所有原创文章版权归作者所有，如有转载请联系作者获得授权 https://blog.csdn.net/u012864465/article/details/84099660

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()
})