上传图片本地预览

孙泽辉

编程

发布于：2021年6月7日

字数：279字

时长：1分钟

次浏览

今天群里一哥们写的本地图片预览，竟然是用路径拼出来的src，把我震惊了，说起来我也不怎么会，今天勉勉强强实现一下

建好html

<input type="file" value="上传图片">
<div class="image-container">

</div>

拿到file元素，上传后拿到上传的file对象，创建blob对象，将blob赋给新img的src，加到container里

const file = document.querySelector('input[type=file]')
file.onchange = function (e){
    const blob = URL.createObjectURL(e.target.files[0])
    const img = document.createElement('img')
    img.src = blob
    document.querySelector('.image-container').appendChild(img)
}

在线预览：

图片上传本地预览 demo源码预览下载- JSRUN

总结一下

一气呵成，没有拖泥带水，没想到这么简单，这哥们说上一个人是要在前端打开一个文件夹，把文件夹里面的图片都加载出来，上一个人留下了路径，他就对这个路径操作了。

细思极恐，前端怎么打开文件夹，打开文件夹怎么扫描里面的文件？

莫非那个人掌握了浏览器的漏洞？还是另有方法？