實現(xiàn)圖片預(yù)覽在于修改圖片的src瘫寝，而且寫成圖片的本地路徑是沒有用的及塘。
實現(xiàn)效果：
image.png
html部分：
<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 ;
}
//圖片預(yù)覽
$("#avatar_file").on("change",function(){
var objUrl = getObjectURL(this.files[0]) ; //獲取圖片的路徑拂共，該路徑不是圖片在本地的路徑
if (objUrl) {
$("#avatar_img").attr("src", objUrl) ; //將圖片路徑存入src中硬贯，顯示出圖片
}
});
方式二：
//頭像預(yù)覽
$('#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
}
});
