<div class="form-group">
<label class="col-sm-2 control-label" for="id_avatar">
头像
</label>
<div class="col-sm-8">
<label for="id_avatar" id="id_avatar_lab">
<img id="id_avatar-img" src="{% static 'images/default.jpg' %}" alt="">
</label>
<input type="file" name="avatar" id="id_avatar" style="display: none">
<span class="help-block"></span>
</div>
</div>
<script>
$('#id_avatar').on('change',function () {
//1. 创建一个读取文件的对象
var fileReader = new FileReader();
//2. 去到当前选中得到文件头像
fileReader.readAsDataURL(this.files[0]);
//3. 读取你选中的那个文件,先等待文件加载完成
fileReader.onload = function(){
$("#id_avatar-img").attr("src",fileReader.result);
}
})
</script>