Jquery文件上傳-代碼實現

//前臺預覽代碼
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);
    });