Question

下面有一个脚本可以将图像上传到服务器。完成后，它会通过html更新img源代码。我遇到的问题是我写了我的php代码，在上传文件时将文件重命名为预定义名称（ext-pix0.png，ext-pix1.png，ext-pix3.png等）。因此，即使在上传完成后新图像替换旧图像，屏幕上的图片也不会刷新。我也没有关闭缓存，但它不起作用。我该如何解决这个问题？

SCRIPT

<script>
  $('input[name="ext_pix[]"]').on('change',function(){
    var account_list = $('#account_list').val();
    var order_list = $('#order_list').val();
    var id_list = $('#id_list').val();
    var formData = new FormData($(this).parents('form')[0]);
    $.ajax({
      url: 'sql/ext-pix-upload.php',
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success:function(data){
        $('#ext-pix0').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png" height="103.5%" width="100%"/>').fadeIn(500);
        $('#ext-pix1').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png" height="103.5%" width="100%"/>').fadeIn(500);
        $('#ext-pix2').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png" height="103.5%" width="100%"/>').fadeIn(500);
        $('#ext-pix3').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png" height="103.5%" width="100%"/>').fadeIn(500);
      },
      error: function(data){
      }
    });
  });
</script>

HTML

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>

      <form>
        <div class="card-wrapper">
          <div class="card mt-3">
            <h5 class="card-header pb-2">Exterior Pictures</h5>
            <div class="card-block" style="height:322px">
              <div style="height:50%">
                <div id="ext-pix0" class="ext-pix">
                  <img src="images/profile/property-pix.png" height="103.5%" width="100%"/>
                </div>
                <div id="ext-pix1" class="ext-pix">
                  <img src="images/profile/property-pix.png" height="103.5%" width="100%"/>
                </div>
              </div>
              <div class="lower-row">
                <div id="ext-pix2" class="ext-pix">
                  <img src="images/profile/property-pix.png" height="103%" width="100%"/>
                </div>
                <div id="ext-pix3" class="ext-pix">
                  <img src="images/profile/property-pix.png" height="103%" width="100%"/>
                </div>
              </div>
              <div class="ext-btn">
                <input id="ext_pix" class="hidden" name="ext_pix[]" type="file" accept="image/*" multiple/>
                <label class="gi gi-camera mb-0 text-white" for="ext_pix" title="Change Picture"></label>
              </div>
            </div>
          </div>
        </div>
      </form>

Answer 1

为什么不尝试在aj的onSuccess（）内部使用id更新html文件中的img元素。

   <img id="img_id" src="#"/>

Ajax的OnSuccess功能，

success: function (data) {  

          $("#img_id").attr("src", data.pictureUrl);    

     }

Answer 2

首先清除图像？

    success:function(data){
    $('#ext-pix0').html('');
    $('#ext-pix1').html('');
    $('#ext-pix2').html('');
    $('#ext-pix3').html('');
    $('#ext-pix0').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png" height="103.5%" width="100%"/>').fadeIn(500);
    $('#ext-pix1').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png" height="103.5%" width="100%"/>').fadeIn(500);
    $('#ext-pix2').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png" height="103.5%" width="100%"/>').fadeIn(500);
    $('#ext-pix3').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png" height="103.5%" width="100%"/>').fadeIn(500);
  },

Answer 3

试试这样：

success:function(data){

    $('#ext-pix0').fadeOut('500', function(){
         $(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png");
         $(this).fadeIn(500);
    });

    $('#ext-pix1').fadeOut('500', function(){
         $(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png");
         $(this).fadeIn(500);
    });

    $('#ext-pix2').fadeOut('500', function(){
         $(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png");
         $(this).fadeIn(500);
    });

    $('#ext-pix3').fadeOut('500', function(){
         $(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png");
         $(this).fadeIn(500);
    });

},

Answer 4

fadeOut＆＃34; $（＆＃39; #ext-pix ...＆＃39;）＆＃34;在调用AJAX之前

 success:function(data){
        for(i=0;i<=3;i++){
            $('#ext-pix'+i).html('');
            let Image = $('<img/>',{src:'accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix'+i+'.png' , style:'height:103.5%;width:100%';});
            $('#ext-pix'+i).html(Image).fadeIn(500);         
         }
    },

Answer 5

请更新您在成功函数中获得的数据响应，并仅在ajax成功时更新src元素。或者将一些类或ID分配给img标记并仅更新src元素。

<img class="ext-pix0" id="ext-pix0" src="images/profile/property-pix.png" height="103.5%" width="100%"/>

更新的脚本

success:function(data)
{
    for(vari=0;i<data.length.i++)
    {
      $('#ext-pix'+i).attr(src,'data[i].url').fadeIn(500);
    } 

  },

如何在ajax调用后刷新图像而不重新加载页面？

5 个答案: