【JavaScript】ajax头像上传

本文介绍了一种使用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
版权声明:本文为博主原创文章,转载请附上博文链接!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值