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

August 04, 2020 836

我们需要实现一个图片上传后预览的效果： 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)