Base64图片上传

1、图片上传样式写法

    <div class="form-group">
                <label class="col-sm-3 control-label">头像：</label>
                <div class="col-sm-8">
                    <div>
                        <div class="img-preview" style="margin-bottom: 5px; width: 160px; height: 160px; border: 1px solid #e5e6e7">
                            <img src="" width="100%">
                        </div>
                        <input type="hidden" id="userPhoto"  name="userPhoto">
                        <input class="form-control file-upload" name="file" type="file">
                    </div>
                </div>
            </div>

2、Js写法

 $(".file-upload").change(function(fileInput){
            var file = fileInput.target.files[0];
            var ready = new FileReader();
            ready.readAsDataURL(file);
            ready.onload=function(){
                $.widget.compressToBase64(this.result, {width: 320, quality: 1, type: "image/png"}).then(data=>{
                    $(fileInput.target).parent().find("img").prop("src", data);
                    $(fileInput.target).parent().find("input[type=hidden]").val(data);
                });
            }
        })