Django之处理选择预览图片

代码实现：

 .user_avatar_file {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            margin-left: 15px;

        }

        .user_avatar_thumbnail {
            position: relative;
        }

<div class="form-group">
                <label for="user_avatar" class="col-md-3 control-label">头像</label>
                <div class="col-sm-offset-3 col-md-9">
                    <img src="/static/images/beauty.jpg" alt="" id="user_avatar_thumbnail"
                         style="width:100px;height:60px" class="user_avatar_thumbnail">
                    <input type="file" class="user_avatar_file" id="user_avatar_file" style="height: 60px;width: 100px">
                </div>
            </div>

//处理缩略图保存
        $('#user_avatar_file').change(function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                $('#user_avatar_thumbnail')[0].src = this.result
            }
        });