實現(xiàn)圖片預覽在于修改圖片的src，而且寫成圖片的本地路徑是沒有用的。

實現(xiàn)效果：

image.png

<label for="avatar" class="col-sm-3 control-label">頭像：</label>
<div class="col-sm-9" id="avatar">
    <img src="/static/img/guojia.jpg" alt="" id="avatar_img">
    <input type="file" class="form-control" id="avatar_file">
</div>

css部分：
通過絕對定位將默認圖片和文件按鈕重疊，并將文件按鈕隱藏

#avatar{
    position: relative;
    width: 60px;
    height: 60px;
}

#avatar_img,#avatar_file{
    position: absolute;
    top: 0;
    left: 15px;
    width: 60px;
    height: 60px;
    border: 1px solid gray;
    border-radius: 5px;
}

#avatar_file{
    opacity: 0; 
}

jquery部分：
方式一：

//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

//圖片預覽
$("#avatar_file").on("change",function(){
    var objUrl = getObjectURL(this.files[0]) ; //獲取圖片的路徑，該路徑不是圖片在本地的路徑
    if (objUrl) {
        $("#avatar_img").attr("src", objUrl) ; //將圖片路徑存入src中，顯示出圖片
    }
});

方式二：

//頭像預覽
$('#avatar_file').change(function () {
    var file = $(this)[0].files[0];
    //通過FileReader讀取選中圖片
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        //result中存放了選中的文件的二進制數(shù)據(jù)
        $('#avatar_img')[0].src = this.result
    }
});