jQuery Ajax文件上传无法获取更新后文件的问题求助

问题现象 #

• 首次上传CSV文件一切正常
• 修改文件（如使用MS Excel编辑保存）后再次上传，服务器收到的仍是旧文件
• 仅将文件重命名后上传，修改内容才会生效
• 页面刷新、表单重置均无效，问题在Chrome和Edge浏览器中均出现

现有代码 #

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>

JavaScript代码 #

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

问题原因及解决方法 #

原因 #

浏览器会通过文件名识别文件，当文件名未改变时，即使文件内容已修改，浏览器仍会复用之前缓存的文件数据进行上传。cache: false配置对文件上传的POST请求无效，表单重置也无法清除浏览器对文件的缓存关联。

解决方法 #

方法1：彻底重置文件输入元素

在表单重置后，手动清空文件输入框的value，切断浏览器与旧文件的缓存关联：
修改AJAX的success回调：

success: function (response) {  
  $("#upload_status").html(response)      
  $('#csvform').get(0).reset();
  // 额外清空文件输入框，清除缓存关联
  $('#csvfile').val('');
}

方法2：给上传请求添加随机参数

在请求URL后追加时间戳参数，确保每次请求都是唯一标识，避免服务器端可能存在的缓存：
修改AJAX的url配置：

url: '/uploadcsv/?t=' + new Date().getTime(),

方法3：手动读取文件并构建FormData

监听文件选择事件，直接获取最新的文件对象，手动构建FormData，确保每次上传的都是最新文件内容：
替换原有的JS代码：

$(document).ready(function() {  
    let selectedFile = null;
    // 监听文件选择事件，保存最新文件对象
    $('#csvfile').on('change', function(e) {
        selectedFile = e.target.files[0];
    });

    $("#csvform").on('submit', function(e) {
        e.preventDefault();
        if (!selectedFile) return;
        
        const fd = new FormData();
        fd.append('csvfile', selectedFile);
        // 手动添加其他表单字段
        fd.append('update_existing', $('#update_existing').is(':checked'));
        
        $.ajax({
            type: 'POST',
            url: '/uploadcsv/',
            data: fd,
            cache: false,
            processData: false,
            contentType: false,           
            success: function (response) {  
                $("#upload_status").html(response)      
                $('#csvform').get(0).reset()
                selectedFile = null;
            },
            error: function (jqXhr, textStatus, errorMessage) {               
                console.log(jqXhr.responseText)
                console.log(errorMessage)
            }
        })
    });
});

推荐方案 #

优先使用方法1+方法2的组合，改动最小且能同时解决客户端缓存关联和服务器端潜在缓存问题。

内容的提问来源于stack exchange，提问作者maverick