Jquery文件上传-代码实现

韩嘉祯
2023-12-01

//前台预览代码
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);
    });
 类似资料: