大致效果如下:
结构:
<button id="btn">+上传文件</button>
<input type="file" id="fileinput" accept=".jpg,.png,.gif,.jpeg">
<img alt="" id="img"/><br/>
<span id="span"></span>
这里没有使用默认的input上传,把它display:none了,目的是不使用它的默认显示文件名的样式。
let input = document.getElementById("fileinput");
let img = document.getElementById("img");
let btn = document.getElementById("btn");
let span = document.getElementById("span");
btn.onclick = () => {
input.click()
}
input.addEventListener("change", (e) => {
console.log(e,"此处的e是Event构造函数实例对象,target属性是元素类型");
let reader = new FileReader();
if(!/image/.test(e.target.files[0].type)){
return alert('不是图片类型');
}
reader.readAsDataURL(e.target.files[0]);
reader.onload = (event) =>{
console.log(event,"此处的event是Event的实例ProgressEvent的实例,target是FileReader实例,可获取result属性");
img.src = reader.result
span.innerHTML = e.target.files[0].name
}
})
readAsDataURL()读取文件并将内容的数据 URI 保存在 result 属性中,也即base64,图片src就可以直接使用。
注意输出可以更好理解