使用Ajax上传文件后页面自动刷新问题求助

看起来你遇到的麻烦是文件上传成功后页面莫名刷新，明明用了e.preventDefault()却没生效对吧？我帮你分析下原因，再给你具体的解决办法：

问题根源 #

你的文件输入框被包裹在一个空action的<form>标签里——这个表单很容易被意外触发默认提交行为（比如某些浏览器的隐性逻辑、或者代码里的无意操作），一旦提交，浏览器就会向当前页面发请求，直接导致刷新。另外如果你的上传支持拖放功能，没处理好拖拽事件的默认行为，也可能让浏览器直接打开拖入的文件，造成页面跳转。

具体修复步骤 #

1. 彻底阻止表单的默认提交 #

给那个包裹文件输入框的表单加个提交事件监听器，把它的默认行为掐掉：

// 获取页面里的上传表单
const uploadForm = document.querySelector('section.upload-container form');
// 阻止表单提交的默认行为
uploadForm.addEventListener('submit', function(e) {
    e.preventDefault();
});

2. 处理拖放事件的默认行为（如果支持拖放的话） #

如果你的页面允许拖放文件上传，一定要给dragenter、dragover、drop这几个事件都加上阻止默认的逻辑，不然浏览器会直接打开你拖进去的文件：

const dropZone = document.querySelector('.drop-zone');
// 批量绑定拖拽事件的阻止默认逻辑
['dragenter', 'dragover', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, function(e) {
        e.preventDefault();
    });
});

3. 检查事件绑定是否正确 #

确认你的uploadFile函数是通过正确的事件触发的：比如绑定到文件输入框的change事件是没问题的，这个事件本身不会导致页面刷新；但如果不小心绑定到了表单的submit事件，一定要在事件处理函数里调用e.preventDefault()：

// 正确的文件选择事件绑定示例
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
    uploadFile();
});

最后再检查一遍 #

看看你的onFileUploadSuccess函数里有没有不小心写了window.location.reload()或者修改window.location的代码——从你贴的代码来看是没有的，但如果有其他关联逻辑，也排查下。

按照上面的步骤改完，页面就不会再上传成功后自动刷新啦！

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