实时展示用户上传的头像
总体思路
"""
1.首先需要给对应的上传头像input框绑定一个文本域变化事件
(当检测到用户对该文件框上传了头像就会触发一系列操作)
2.再生成一个文件阅读器对象
3.再获取用户上传的文件头像
4.把用户上传的文件头像交给文件阅读器对象FileReader读取
5.利用文件阅读器把读取的文件头像结果展示到前端页面
(修改img的src属性,属性结果为文件阅读器的结果)
"""
# 注意:第4步的操作是异步和IO操作,异步就是不等待结果返回进行往下执行,
IO操作就是需要进行读写;所有第5步直接执行不会得到任何结果!!!
正确的操作是给第4步加上预加载(等待第4步加载完毕再执行第5步!!)
代码实现
<div class="form-group">
<label for="myfile" style="color: white">
头像:  <img src="/static/img/default.png" alt="" width="80" id="myimg">
</label>
<input type="file" id="myfile" style="display: none" id="myfile">
</div>
<script>
$('#myfile').change(function (){
let fileReaderObj = new FileReader();
let fileObj = $(this)[0].files[0];
fileReaderObj.readAsDataURL(fileObj);
fileReaderObj.onload = function (){
$('#myimg').attr('src',fileReaderObj.result);
}
})
</script>
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:实时展示用户上传的头像 - Python技术站