实现图片预览在于修改图片的src，而且写成图片的本地路径是没有用的。
实现效果：
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 ;
}
//图片预览
$("#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中存放了选中的文件的二进制数据
$('#avatar_img')[0].src = this.result
}
});
