如何在不知道圖像標簽中的文件名的情況下在ajax調用后重新加載img attr“src”？

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());
          }
      });
    });
});

我試圖強制瀏覽器在成功調用 ajax 時重新加載 img $(imgEdit).attr('src', imgEditATTR + '?' + new Date().getTime()); 但是來自var imgEdit和imgEditATTR的selector不起作用：

console.log(imgEdit); 結果： w.fn.init [prevObject: w.fn.init(0)] console.log(imgEdit); 結果： undefined ；

為什么會發生，以及如何解決？

我知道有很多關於重新加載 img 的問題，但是在這些問題上，沒有一種方法可以在不知道文件名的情況下重新加載圖像。 我查了很多問題，這就是 answears 所說的：

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 請求並在成功塊中使用它來更新 img 標簽的 src 屬性

所以你的 profileForm.php 看起來像

 $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 代碼看起來像

$.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);
}