Как показать загруженное, добавив в Jquery или вернувшись из AJAX?

Question

Я загружаю фотографию профиля. Я использую изображение с иконкой пользователя. Но когда я загружаю его с помощью AJAX, я возвращаю 1, что означает, что он успешно загружен. Затем я хочу добавить изображение вместо иконки пользователя или вернуть значение из контроллера, чтобы отобразить изображение там.

Для HTML

<div class="col-md-12 pr-0">

 @if(!empty($profile->pics))

 <img src="{!! asset('pmc_assets/teacher') !!}/{{$profile->pics}}" class="img-fluid rounded-circle normal centered mb-3 pic-uploader" width="200">

 @else

  <img src="{!! asset('pmc_assets/img/add-profile.png') !!}" class="img-fluid rounded-circle normal centered mb-3 pic-uploader" width="200">

 @endif
 <input type="file" name="file_up" id="FileUpload1" class="d-none">
  <p class="text-dark-grey text-center f-ur f-18">Profile Picture</p>

 </div>

Для контроллера

 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"];
 }

Для 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>')
        } 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>')
        }
    }
});

Как это сделать?

Answer 1

для контроллера убедитесь, что вы возвращаете путь к изображению следующим образом:

return ["status" => 1, "message" => "Details Changed", "image" => $file_name];

для 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>')
            // change the image src attribute using jquery
            $('.pic-uploader').attr("src", data.image);
        } 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>')
        }
    }
});