【JavaScript】ajax头像上传

头像上传与更新实现

最新推荐文章于 2022-08-03 10:54:15 发布

原创最新推荐文章于 2022-08-03 10:54:15 发布 · 674 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ajax #上传图片 #html

javscript 同时被 2 个专栏收录

2 篇文章

订阅专栏

ajax

2 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现头像上传与更新的方法，包括如何在用户没有头像时显示默认提示图片，以及上传和更新头像的具体代码实现。

版权声明：需要转载的话，请先联系我哦！ 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
版权声明：本文为博主原创文章，转载请附上博文链接！