如何监听file类型input的文件确认上传事件？解决同文件重复选不触发onChange问题

问题原因 #

浏览器默认规则下，<input type="file">的onChange事件仅在选中的文件路径与当前控件的value属性值不一致时才会触发。如果两次选择同一个文件，value没有发生变化，所以不会触发监听事件。

通用解决方案 #

方案1：选中文件后清空value值（最常用） #

在onChange事件的处理逻辑执行完成后，主动将input控件的value置为空字符串，后续再次选择同一文件时，value会从空变成对应文件路径，即可正常触发事件。

原生JS示例代码：

<input type="file" name="something" id="fileInput" />

const fileInput = document.getElementById('fileInput')

fileInput.addEventListener('change', (e) => {
  // 此处编写你原有的文件处理逻辑
  const selectedFile = e.target.files[0]
  console.log('选中的文件：', selectedFile)

  // 处理完成后清空value，为下一次选择做准备
  e.target.value = ''
})

方案2：点击打开选择器前清空value #

如果担心处理逻辑报错导致无法执行清空操作，可以绑定click事件，在文件选择器弹出前就清空value：

fileInput.addEventListener('click', (e) => {
  e.target.value = ''
})

方案3：克隆替换input控件（适用于需要保留原有value的特殊场景） #

如果业务需要保留上一次选中的文件值展示，可以每次选择完成后用克隆的新input替换原有控件，新控件的value默认为空，不会影响下一次触发：

fileInput.addEventListener('change', (e) => {
  // 原有文件处理逻辑
  const selectedFile = e.target.files[0]
  console.log('选中的文件：', selectedFile)

  // 克隆原控件并替换
  const newInput = e.target.cloneNode(true)
  e.target.parentNode.replaceChild(newInput, e.target)
})

注意：如果是通过addEventListener绑定的事件，克隆不会保留事件监听，需要为新控件重新绑定事件，该方案更适合使用框架声明式绑定事件的场景。

主流框架示例 #

Vue 3示例 #

<template>
  <input type="file" @change="handleFileChange" />
</template>

<script setup>
const handleFileChange = (e) => {
  // 业务处理逻辑
  console.log(e.target.files[0])
  // 清空value
  e.target.value = ''
}
</script>

React示例 #

function FileUpload() {
  const handleChange = (e) => {
    // 业务处理逻辑
    console.log(e.target.files[0])
    // 清空value
    e.target.value = ''
  }

  return <input type="file" onChange={handleChange} />
}

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