在注册的时候如何让用户选定头像的时候有预览的功能

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>

以上是关于在注册的时候如何让用户选定头像的时候有预览的功能的主要内容,如果未能解决你的问题,请参考以下文章

1.3 博客系统 |注册页

JSP+SpringMVC框架使用WebUploader插件实现注册时候头像图片的异步上传功能

uni-app 更换用户头像功能-涉及图片的预览 选择

jQuery插件ImgAreaSelect 实例讲解二

第三次作业——个人作业——软件产品案例分析

jQuery插件使用cropper实现简单的头像裁剪并上传