如何通过HTML表单完成input type file文件上传验证，避免重复上传问题

问题根因 #

原生<input type="file">受浏览器安全策略限制为只读属性，不允许脚本主动赋值。一旦表单同步提交刷新页面、表单重置、或者input节点被销毁重渲染，之前选中的文件就会被清空。

解决方法 #

• 提交前完成所有前端可执行的校验逻辑
  将文件大小、格式、数量这类无需后端参与的校验逻辑全部放在表单提交前触发，校验不通过直接拦截提交，页面不会刷新，已选文件不会丢失。
  示例代码：

const fileInput = document.querySelector('input[type="file"]')
const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
  const selectFile = fileInput.files[0]
  // 示例：校验文件格式为图片，大小不超过10M
  const allowTypes = ['image/jpeg', 'image/png', 'image/gif']
  if (selectFile) {
    if (!allowTypes.includes(selectFile.type)) {
      alert('仅支持上传jpg、png、gif格式的图片')
      e.preventDefault()
      return
    }
    if (selectFile.size > 10 * 1024 * 1024) {
      alert('图片大小不能超过10M')
      e.preventDefault()
      return
    }
  }
})

• 改用异步无刷新方式提交表单
  放弃原生表单默认的同步提交逻辑，使用AJAX或Fetch异步提交FormData，哪怕后端返回校验失败，页面也不会刷新，input中已选的文件不会被清空，用户修改其他不符合要求的表单项后可直接重新提交，无需重新选择文件。
  示例代码：

form.addEventListener('submit', (e) => {
  e.preventDefault()
  const submitData = new FormData(form)
  fetch('/api/form/submit', {
    method: 'POST',
    body: submitData
  })
  .then(res => res.json())
  .then(res => {
    if (res.code !== 0) {
      alert(res.msg) // 后端校验失败仅提示，页面无刷新
      return
    }
    // 提交成功后的跳转/提示逻辑
  })
})

• 选中文件后预上传暂存
  如果需要后端校验文件内容（比如是否损坏、内容是否合规），可以在用户选中文件后立刻异步上传到后端暂存，后端返回临时文件ID，将ID存入隐藏表单域或本地存储，后续表单提交仅需传递临时ID即可，哪怕页面刷新也无需用户重新上传文件。
• 框架场景避免input节点重渲染
  使用Vue、React等前端框架时，不要用v-if/条件渲染控制file input的显隐（会触发节点销毁重建），改用v-show/display控制显隐，同时固定input的key值，避免节点重渲染导致文件丢失。

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