jQuery AJAX 文件上传不拾取更新的文件

92dk7w1h  于 2023-04-29  发布在  jQuery
关注(0)|答案(1)|浏览(115)

尝试使用HTML表单和jQuery上传CSV文件。下面是说明该问题的步骤
1.)第一次上传文件,一切顺利。2.)对文件进行更改并保存(例如在这种情况下使用MS Excel)3.)再次选择文件并上传4.)旧文件已上载,在步骤2中所做的更改未反映出来。5.)另存为具有不同名称的文件6.)上传文件,一切顺利
HTML

<form method="post" enctype="multipart/form-data" id="csvform">                                       
    <div class="mb-3">
      <label class="form-label" for="csvfile">CSV File</label>
      <input type="file" class="form-control" id="csvfile" placeholder="Select CSV file">     
    </div>
    <div class="form-check form-switch mB-20">
      <label class="form-check-label" for="update_existing">Update if the record exists</label>
      <input class="form-check-input" type="checkbox" id="update_existing" name="update_existing">                            
    </div>                             
    <button type="submit" class="btn btn-primary btn-color">Upload</button> 
</form>

JS

function csv_file_handler() {    
  
  var fd = new FormData(document.querySelector('#csvform'));
  
  $.ajax({
    type: 'POST',
    url: '/uploadcsv/',
    data: fd,
    cache: false,
    processData: false,
    contentType: false,           
    success: function (response) {  
      $("#upload_status").html(response)      
      $('#csvform').get(0).reset()      
    },
    error: function (jqXhr, textStatus, errorMessage) {               
        console.log(jqXhr.responseText)
        console.log(errorMessage)
    }
  })
  return false;

}

$(document).ready(function() {  
    $("#csvform").on('submit', csv_file_handler)
});

页面重新加载没有帮助,尝试在每次上传后重置表单等,但没有运气。唯一起作用的似乎是重命名文件并上传它。这个问题在chrome和edge浏览器中都可以看到。
它看起来像浏览器缓存文件和变化不反映。还是我犯了一个根本性的错误?

30byixjq

30byixjq1#

该问题是由于浏览器缓存引起的。因此,即使您更新了服务器上的文件,浏览器仍然使用旧版本。
根据你 AJAX 代码,你已经禁用了缓存,但你可以尝试添加时间戳参数到请求URI。

试试下面的代码

function csv_file_handler() {    
  var timestamp = new Date().getTime(); // Get the current timestamp
  var fd = new FormData(document.querySelector('#csvform'));
  
  $.ajax({
    type: 'POST',
    url: '/uploadcsv/?timestamp=' + timestamp,
    data: fd,
    cache: false,
    processData: false,
    contentType: false,           
    success: function (response) {  
      $("#upload_status").html(response)      
      $('#csvform').get(0).reset()      
    },
    error: function (jqXhr, textStatus, errorMessage) {               
        console.log(jqXhr.responseText)
        console.log(errorMessage)
    }
  })
  return false;
}

如果添加timestamp参数没有解决问题,可以尝试以下操作:

1.将autocomplete="off"属性添加到文件输入元素中。
1.检查处理文件上载的服务器端代码是否正确覆盖现有文件。可能是服务器端代码问题。
1.如果上述解决方案都不起作用,则需要考虑使用不同的文件上传库。

相关问题