【备忘】展示图片等文件,window.URL.createObjectURL方法使用

我们需要实现一个图片上传后预览的效果: html部分: 这部分很简单,不多赘述

1
2
3
4
<input type="file" multiple="multiple" accept="image/jpg,image/jpeg,image/png" />
<div>
<img src="" alt="">
</div>

js部分: 我们通过onchange触发文件选择后的方法,然后通过浏览器提供给我们的window.URL.createObjectURL()方法构建一个本地的blob对象路径(blob:二进制数据),再将这个路径绑定给img的src属性之中

1
2
3
4
5
6
7
8
function test(e) {
console.log(e)
console.log(e.target.files)
document.querySelector("img").src = window.URL.createObjectURL(e.target.files[0])
document.querySelector("img").style.width = "300px";
document.querySelector("img").style.height = "300px";
}
document.querySelector("input").addEventListener("change", test)