本地图片在上传服务器前，如何预览效果？

 

一个方法就可以了，主要是如何从事件中读取文件数据，放到<img>展示

幸运的是，事件中的图片数据已经被转换成<img>可直接识别的内容，直接赋值给<img>即可展示

<div><input type="file" accept=".png,.jpg,.jpeg,.ico,.gif,.bpm" onchange="getFile(event)"><img id="preview" src="" alt="">
</div><script>function getFile(event) {if (!event) return;let fileList= event.target.files;if (fileList.length <= 0) return;const fileReader = new FileReader();fileReader.readAsDataURL(fileList[0]);fileReader.onload = (event) => {document.getElementById("preview").src =event.target.result;};}
</script>