用户头像实时展示

用户头像实时展示

<div class="form-group">
    <label for="myfile">头像
        <img src="/static/img/123.png" alt="" style="width: 100px" id="myimg">
    </label>
    <input type="file" id="myfile" style="display: none">
</div>

$('#myfile').change(function(){
    // 1.产生一个文件阅读器
	let myFileReadObj = new FileReader()
	// 2.获取用户上传的头像文件
	let fileObj = this[0].files[0]
	// 3.将文件对象交给阅读器对象读取
	myFileReadObj.readAsDataUrl(fileObj)
	// 4.修改img标签的src属性展示图片
	myFileReadObj.onload = function(){
		$('#myimg').attr('src',myFileReadObj.result)
	}
})