在注册的时候如何让用户选定头像的时候有预览的功能
Posted wuyiyuan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在注册的时候如何让用户选定头像的时候有预览的功能相关的知识,希望对你有一定的参考价值。
<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>
以上是关于在注册的时候如何让用户选定头像的时候有预览的功能的主要内容,如果未能解决你的问题,请参考以下文章