js实现上传图片并显示的两种实现方式(无需上传到服务器再显示)

最新推荐文章于 2024-04-11 14:42:15 发布

Tempta36

最新推荐文章于 2024-04-11 14:42:15 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Tempta36/article/details/79863968

版权

本文介绍了两种JavaScript实现图片上传并立即在页面上显示的方法，无需将图片先上传到服务器。这两种方法对于创建具有实时预览功能的图片上传组件非常实用。

摘要由CSDN通过智能技术生成

方法一：

<input type='file' id='chooseFile'>
<img src='' id='picToCheck'/>
document
        .querySelector('#chooseFile')
        .addEventListener('change', function(){
   
            //当没选中图片时，清除预览
            if(this.files.length === 0){
                document.querySelector('#picToCheck').src = '';