如何通过JQuery追加或AJAX返回结果显示上传的头像？

要完成上传成功后替换原有用户图标的需求，只需要对后端Controller和前端jQuery代码做两处关键修改即可，具体步骤如下：

1. 修改后端Controller，返回新头像的完整URL #

当前你的Controller只返回了状态和提示信息，我们需要把新上传头像的可访问URL也返回给前端，这样前端才能直接使用这个地址替换图片。

修改后的Controller代码：

if (Input::get('ajax') == 2) {
    $file = Input::file('image');
    $destination = base_path('public/pmc_assets/teacher/');
    $file_name = upload_file($file, $destination);
    
    TeacherRequests::where(['user_id' => Auth::id(), 'active' => 1, 'approved' => 1])
        ->update(['pics' => $file_name]);
    
    // 新增返回头像的完整访问路径
    return [
        "status" => 1,
        "message" => "Details Changed",
        "pic_url" => asset("pmc_assets/teacher/{$file_name}")
    ];
}

这里用asset()函数生成完整的可访问URL，确保前端能直接加载图片，避免手动拼接路径可能出现的错误。

2. 修改前端jQuery，在成功回调中替换头像 #

在AJAX的success回调里，当判断data.status == 1时，找到页面上的头像图片元素（带有.pic-uploader类的img标签），修改它的src属性为后端返回的新头像URL即可。

修改后的jQuery代码：

$.ajax({
    type: "POST",
    data: form,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) {
        if (data.status == 1) {
            $('.alert_text').append('<div class="col-md-12 alert alert-success alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> Pic Updated Succesfully. </div>');
            
            // 核心：替换头像图片的src属性
            $('.pic-uploader').attr('src', data.pic_url);
        } else {
            $('.alert_text').append('<div class="col-md-12 alert alert-danger alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> Unknown Error </div>');
        }
    }
});

补充说明 #

• 你的HTML结构已经很清晰，所有头像图片都统一使用了.pic-uploader类，所以直接通过这个类选择器就能准确找到需要替换的元素，不管原来显示的是占位图还是已有头像，都能无缝替换。
• 如果出于某些原因不想在后端返回完整URL，也可以只返回file_name，然后在前端手动拼接路径：

  $('.pic-uploader').attr('src', "{{ asset('pmc_assets/teacher') }}/" + data.file_name);
  

  但更推荐后端返回完整URL的方式，尤其是在项目部署路径可能变化的场景下，能减少前端的维护成本。

内容的提问来源于stack exchange，提问作者Rob