Как перезагрузить img attr "src" после вызова ajax, не зная имени файла из тега изображения?

Question

У меня есть этот HTML:

<div class="d-inline-flex">
    <img id="reloadIMG" class="p-3 mt-5 imgP" onDragStart="return false" <?php echo htmlentities($avatar, \ENT_QUOTES, 'UTF-8', false); ?>> 
    <input type="file" id="uploadAvatar" name="uploadedAvatar"> 
</div>

значение $avatar:

$pathFolderAvatar = 'user/'.$folder.'/avatar/*';
$imgUserPastaAvatar = glob($pathFolderAvatar)[0] ?? NULL;
if(file_exists($imgUserPastaAvatar)){
    $avatar = 'src='.$siteURL.'/'.$imgUserPastaAvatar;
}else{
    $avatar = 'src='.$siteURL.'/img/avatar/'.$imgPF.'.jpg';
}

и скрипт для отправки ajax-вызова в мой файл, который обрабатывает запрос на загрузку файла:

$(function () {
    var form;
    $('#uploadAvatar').change(function (event) {
        form = new FormData();
        form.append('uploadedAvatar', event.target.files[0]);
    });
    $("#uploadAvatar").change(function() { 
      $("#loadingIMG").show();
      var imgEditATTR = $("div.imgP").next().attr("src");
      var imgEdit = $("div.imgP").next();
      $.ajax({
          url: 'http://example/test/profileForm.php',
          data: form,
          processData: false,
          contentType: false,
          type: 'POST',
          success: function (data) {
            $("#loadingIMG").hide();
            $(imgEdit).attr('src', imgEditATTR + '?' + new Date().getTime());
          }
      });
    });
});

Я пытался заставить браузер перезагрузить img при успешном вызове ajax $(imgEdit).attr('src', imgEditATTR + '?' + new Date().getTime());, но selector из var imgEdit и imgEditATTR не работает:

console.log(imgEdit); результат: w.fn.init [prevObject: w.fn.init(0)] console.log(imgEdit); результат: undefined;

Почему это происходит и как это исправить?

Я знаю, что есть множество вопросов о перезагрузке img, но по этим вопросам нет способа перезагрузить изображение, не зная имени файла. Я проверил так много вопросов, и вот что ответили:

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());

В моем случае я не знаю имени файла, потому что он генерируется случайным образом на profileForm.php с mt_rand():

$ext = explode('.',$_FILES['uploadedIMG']['name']);
$extension = $ext[1];
$newname = mt_rand(10000, 10000000);
$folderPFFetchFILE = $folderPFFetch.'avatar/'.$newname.'_'.time().'.'.$extension;
//example of the result: 9081341_1546973622.jpg

move_uploaded_file($_FILES['uploadedAvatar']['tmp_name'], $folderPFFetchFILE);

Answer 1

Вы можете вернуть имя файла в ответ на ваш запрос AJAX и использовать его в блоке успеха для обновления атрибута src тега img

Так что ваш profileForm.php будет выглядеть примерно так:

<pre><code> $ext = explode('.',$_FILES['uploadedIMG']['name']);
    $extension = $ext[1];
    $newname = mt_rand(10000, 10000000).'_'.time();
    $folderPFFetchFILE = $folderPFFetch.'avatar/'.$newname.'.'.$extension;
    //example of the result: 9081341_1546973622.jpg
    move_uploaded_file($_FILES['uploadedAvatar']['tmp_name'], $folderPFFetchFILE);
    echo $newname // you can also send a JSON object here
    // this can be either echo or return depending on how you call the function

и ваш код AJAX будет выглядеть как

<pre><code>$.ajax({
      url: 'http://example/test/profileForm.php',
      data: form,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function (data) {
        $("#loadingIMG").hide();
        $(imgEdit).attr('src', data);
      }
  });

Answer 2

Пусть profileForm.php возвращает сгенерированное имя файла:

$ext = explode('.',$_FILES['uploadedIMG']['name']);
$extension = $ext[1];
$newname = mt_rand(10000, 10000000);
$folderPFFetchFILE = $folderPFFetch.'avatar/'.$newname.'_'.time().'.'.$extension;

move_uploaded_file($_FILES['uploadedAvatar']['tmp_name'], $folderPFFetchFILE);

echo json_encode(['filename' => $folderPFFetchFILE]);

Затем в ответе на ваш POST запрос:

success: function (data) {
  $("#loadingIMG").hide();
  $(imgEdit).attr('src', data.filename);
}