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);
});
}
})