Jquery文件上传-代码实现

最新推荐文章于 2025-05-14 15:50:03 发布

原创最新推荐文章于 2025-05-14 15:50:03 发布 · 953 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#文件上传

javascript基础专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在前端实现用户上传图片并实时预览的方法。通过HTML与JavaScript结合使用，实现了文件输入控件选择图片文件后，在页面上即时显示所选图片的功能。此方案利用了FileReader API读取文件内容并更新图片源。

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

//前台预览代码
html代码部分

 <label>头像:</label>
 <img src="images/timg.jpg" alt="" id="headerImg">
 <input type="file" id="fileResource" class="file">
.file{
    margin-top: 8px;
    margin-left: 80px;
}
#headerImg{
    width: 200px;
    height: 200px;
}

js代码部分

    let $fileResource = $('#fileResource');
    let $headerImg = $('#headerImg');
    $fileResource.bind('change',function (e) {
        let file = this.files[0];
        let fileReader = new FileReader();
        fileReader.onload = function(){
            console.log(this.result);
            $headerImg.attr('src',this.result);
        }
        fileReader.readAsDataURL(file);
    });