版权声明:需要转载的话,请先联系我哦! https://blog.youkuaiyun.com/wwt20180911/article/details/83089302
HTML:
<img id="photo" name="photo" src="${img }/personmgr/avatar_url.jpg" width="130px" height="140px" onclick="$('#updateFileInput').click();"/>
在img里放个src是在,当这个人没有头像的时候,放一张提示用户上传的图片。
JS
//上传头像
$("body").append('<form id="uploadFileHiddenForm"><input type="file" name="file" id="updateFileInput" style="display:none;"/></form>');
$("#uploadFileHiddenForm").change(function(){
var formData = new FormData($('#uploadFileHiddenForm')[0]);
$.ajax({ //发请求给接口
cache:false,
contentType: false,
processData: false,
url:U('upload/avatarUpload'), //接口地址
type:'POST',
enctype:'multipart/form-data',
data:formData,
dataType:'JSON',
success:function (data) {
if (data.data.imgs.length > 0) {
//上存成功
var url = data.data.imgs[0]["thumbnail_url"];
$("#photo").attr("src", url);
updateHeadImg(url);
}
}
});
});
上传成功后的request payload长下面这个样子
上传完了之后可能会对其更新,也就是所谓的修改头像咯,
//更新当前用户头像
var reqData = "avatar_url=" + url;
function updateHeadImg(url) {
$.ajax({
url:U('personal/modifyPersonalInfo'),
type:'post',
dataType:'json',
data:reqData,
success:function(data) {
}
});
}
作者:涛兄
来源:优快云
原文:https://blog.youkuaiyun.com/wwt20180911/article/details/83089302
版权声明:本文为博主原创文章,转载请附上博文链接!