inputFile上传图片并显示

最新推荐文章于 2023-06-28 17:41:35 发布

原创最新推荐文章于 2023-06-28 17:41:35 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#file

web前端专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了一种在前端实现图片上传并立即预览的方法。通过HTML与JavaScript结合，利用FileReader API读取用户选择的图片文件，并将其显示在页面上，实现了即时反馈的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input 上传图片并将上传的图片加载显示

闲话不多说直接撸代码

HTML部分

<img id="gzzImg" src="images/common/add.png" />
<input id="gzzIpt" class="fileIpt" type="file" onchange="loadImg()"/>

js部分

function loadImg(){
    //获取文件
    var file =document.getElementById("gzzIpt").files[0];

    //创建读取文件的对象
    var reader = new FileReader();

    //创建文件读取相关的变量
    var imgFile;

    //为文件读取成功设置事件
    reader.onload=function(e) {
//      alert('文件读取完成');
        imgFile = e.target.result;
        console.log(imgFile);
        $("#gzzImg").attr('src', imgFile);
    };

    //正式读取文件
    reader.readAsDataURL(file);
}