注册时头像预览功能的实现

注册时头像预览功能的实现

Django  Python 

用户注册上传头像图片预览

效果展示

 

avatar

 

核心代码实现

隐藏文件上传元素

<div class="form-group">
    <label class="col-sm-2 control-label">头像</label>
    <div class="col-sm-8">
        <label for="id_avatar"><img id="avatar-img" src="/static/img/default.png" alt=""></label>
        <input accept="image/*" type="file" name="avatar" id="id_avatar" style="display: none">
        <span class="help-block"></span>
    </div>
</div>

注意：

1. 真正的上传头像文件的 input 标签设置了 style="display: none" 来隐藏上传框。
2. input 标签中设置了 accept="image/*" ，表示只能上传图片类型的文件。
3. input 标签前面的 label 标签中设置了 or="id_avatar" 意在点击该 label 标签时上传文件的 input 标签同样获得触发。
4. input 标签前面的 label 标签嵌入了 img 标签，设置了一个默认的头像图片，该 img 标签才是真正显示图片的。

绑定并显示预览

// 找到头像的input标签绑定change事件
$("#id_avatar").change(function () {
    // 1. 创建一个读取文件的对象
    var fileReader = new FileReader();
    //读取所选文件,需要一定时间
    fileReader.readAsDataURL(this.files[0]);
    fileReader.onload = function () {
        // 2. 读完文件后再讲图片加载到img标签中
        $("#avatar-img").attr("src", fileReader.result);
    };
});

注意：

1. FileReader 是可以读取文件的类，由它来存储读取的头像图片文件。
2. 读取文件需要一定的时间，所以对 FileReader 对象设置 onload 方法，意在读取文件完毕后再设置 img 的 src 属性

GitHub 地址：https://github.com/protea-ban/oldboy/tree/master/s9day76/bbs