版权声明:所有原创文章版权归作者所有,如有转载请联系作者获得授权 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()
})