<div class="col-sm-3"> <div class="imguploadbox"> <label for="imgUpload"> <input type="file" id="imgUpload" accept=".png,.jpg" style="display: none"> </label> <div class="addimg"> <?php if($model->thumb): ?> <img src="<?= $model->thumb ?>_120X120.png" class="img-circle" id="user_img""> <?php endif; ?> </div> </div> </div> <div class="col-sm-9"> <div class="editavatarcontrol" style="margin-left:25px;"> <p>支持格式:JPEG / PNG 512X512, < 1MB</p> <button type="button" class="btn btn-avatar" id="image-change-btn">修改图片</button> </div> </div>
$('#imgUpload').on('change',function(){ imgUpload(); }); function imgUpload(){ var formdata = new FormData(); formdata.append('UploadForm[imageFile]',$('#imgUpload')[0].files[0]); $.ajax({ url:'/site/upload', type: 'post', cache:false, data: formdata, processData:false, contentType:false, success:function(data){ if(data === 'error'){ $.confirm({ title : '提示', content : '图片大小格式不符,请选择合适图片', buttons : { confirm : { text : '确认' } } }) }else{ var tempImg = $('<img/>'); tempImg.attr('src',data+'_120X120.png'); tempImg.attr('width','120'); tempImg.attr('height','120'); $('#user_img').remove(); $('.addimg').empty().append(tempImg); window.location.reload(); } }, error:function(e){ $.confirm({ title: '提示', content: '头像上传遇到错误,请检查图片', buttons: { confirm: { text: '确认' } } }) } }) } $('#image-change-btn').click(function(){ $('#imgUpload').click(); })