时间戳

首页 > 解决方案 > 如何在ajax调用后重新加载img attr“src”而不知道图像标签中的文件名？

javascript - 如何在ajax调用后重新加载img attr“src”而不知道图像标签中的文件名？

问题描述

我有这个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());但是selectorfrom the var imgEditandimgEditATTR不起作用：

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

标签： javascriptjqueryajaximage

解决方案

您可以返回文件名以响应您的 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);
      }
  });

推荐阅读