表单提交后页面重载问题：e.preventDefault()与隐藏iframe无效

兄弟我太懂你这种被页面刷新搞心态的感觉——好不容易折腾出来的动态HTML，上传个文件直接原地消失，简直让人抓狂！你的问题核心其实就是表单默认提交行为在搞鬼，虽然文件能成功传到后端，但浏览器还是会乖乖执行刷新页面的默认操作。咱直接上靠谱的解决方案，分两种常见场景给你说：

如果你的前端是用<form>标签实现上传的，那第一步就是把浏览器的默认刷新给按住！

<!-- 你的表单结构 -->
<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">上传文件</button>
</form>

对应的JS代码这么写：

const form = document.getElementById('uploadForm');
form.addEventListener('submit', async (e) => {
  // 关键中的关键！阻止表单默认提交行为
  e.preventDefault();
  
  // 用FormData打包文件，适配后端接收格式
  const formData = new FormData(form);
  
  try {
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      console.log('文件上传成功！');
      // 这里放心写你生成动态HTML的逻辑，完全不会被刷新打断
    } else {
      console.error('上传失败，请检查后端接口');
    }
  } catch (err) {
    console.error('请求出错:', err);
  }
});

要是你没用到<form>，只是用普通按钮触发上传，那更简单，直接绕开表单的默认行为：

<input type="file" id="fileInput">
<button id="uploadBtn">上传文件</button>

JS代码示例：

const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');

uploadBtn.addEventListener('click', async () => {
  const file = fileInput.files[0];
  if (!file) {
    alert('请先选择要上传的文件！');
    return;
  }
  
  const formData = new FormData();
  // 这里的'file'要和后端接口接收的字段名一致（比如multer设置的single('file')）
  formData.append('file', file);
  
  try {
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      console.log('上传成功！');
      // 你的动态HTML生成逻辑随便造~
    } else {
      console.error('上传失败');
    }
  } catch (err) {
    console.error('请求出错:', err);
  }
});

• 后端Express要确保用了multer这类中间件处理文件上传（你说上传功能正常，应该已经配置了，但还是确认下字段名和前端一致）
• 别用传统的form.submit()方法，那会直接触发默认刷新，一定要用异步请求（Fetch/Ajax）
• 测试的时候可以在控制台看看有没有报错，要是出现跨域问题，记得在后端加CORS配置

我之前也踩过这个坑，一开始以为是后端接口的问题，折腾半天发现就是忘了阻止表单默认提交！按上面的方法改完，页面绝对不会再刷新，你的动态HTML想怎么生成就怎么生成~

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