代码实现:
.user_avatar_file {
position: absolute;
top: 0;
left: 0;
opacity: 0;
margin-left: 15px;
}
.user_avatar_thumbnail {
position: relative;
}
<div class="form-group">
<label for="user_avatar" class="col-md-3 control-label">头像</label>
<div class="col-sm-offset-3 col-md-9">
<img src="/static/images/beauty.jpg" alt="" id="user_avatar_thumbnail"
style="width:100px;height:60px" class="user_avatar_thumbnail">
<input type="file" class="user_avatar_file" id="user_avatar_file" style="height: 60px;width: 100px">
</div>
</div>
$('#user_avatar_file').change(function () {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
$('#user_avatar_thumbnail')[0].src = this.result
}
});