尝试使用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浏览器中都可以看到。
它看起来像浏览器缓存文件和变化不反映。还是我犯了一个根本性的错误?
1条答案
按热度按时间30byixjq1#
该问题是由于浏览器缓存引起的。因此,即使您更新了服务器上的文件,浏览器仍然使用旧版本。
根据你 AJAX 代码,你已经禁用了缓存,但你可以尝试添加时间戳参数到请求URI。
试试下面的代码
如果添加timestamp参数没有解决问题,可以尝试以下操作:
1.将
autocomplete="off"
属性添加到文件输入元素中。1.检查处理文件上载的服务器端代码是否正确覆盖现有文件。可能是服务器端代码问题。
1.如果上述解决方案都不起作用,则需要考虑使用不同的文件上传库。