js上传图片代码实现

在这里插入图片描述


 <div class="edit-avatar">
                        <img src="${ (user.userAvatar) !}" alt="..." class="img-avatar">
                        <div class="avatar-divider"></div>
                        <div class="edit-avatar-content">


                              <button class="btn btn-default"  id="change_avatar">修改头像
                                 </button>

                            <input type="file" id="_avatar_file" name="file" class="hidden" />

                            <p class="m-0">选择一张你喜欢的图片,裁剪后会自动生成264x264大小,上传图片大小不能超过2M。</p>
                        </div>
                    </div>



$('#change_avatar').click(function (e) {
    console.log('点击了')
    $('#_avatar_file').click()
})
const imgAvatar = $('.img-avatar');
$('#_avatar_file').change(function () {
    //input 隐藏域 收到后 自动触发上传
    const data = new FormData();
    data.append('file',_val('#_avatar_file'))
    _$_ajax_formData({
        url:'/api/file',
        data: data,
        success: function (res) {
            if (res.code==200) {
                console.log(res)
                _successInfo()
                imgAvatar.attr('src',res.data.url+'?@64h_64w_1e')
                _set_name_val('userAvatar',res.data.url)
            }else{
                _errorInfo()
            }
        },
        error: function (res) {
            _errorInfo()
        }
    })
})

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页