【JavaScript】ajax头像上传

版权声明：需要转载的话，请先联系我哦！ https://blog.csdn.net/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) {

            }
        });
    }

---

作者：涛兄
来源：CSDN
原文：https://blog.csdn.net/wwt20180911/article/details/83089302
版权声明：本文为博主原创文章，转载请附上博文链接！