本文针对HTML5中input[type=file]组件在重复选择相同文件时无法触发change事件的问题，提供了两种实用的解决方案。第一种是通过onblur事件清空input值，利用其优先级高于change的特性强制触发；第二种是在每次选择文件后重建input元素，确保每次操作都是全新的实例，从而保证change事件正常监听。
在使用input[type=file]时，如果用户尝试选择与之前完全相同的文件，浏览器通常不会触发change事件。
这是浏览器的内置机制，旨在判断新选文件是否与当前值一致。若一致，则跳过重新加载流程，以避免不必要的性能消耗。
然而，在某些特定业务场景下（例如图片裁剪功能），无论文件是否重复，都需要强制触发change事件以执行后续处理逻辑。
解决方法
可以通过给input元素添加原生onblur事件来清空其value属性，即设置οnblur="this.value=''"。由于blur事件的触发优先级通常高于change事件，这能有效解决重复选择时不触发的问题。
具体实现代码如下：
<input type="file" accept="image/*" οnblur="this.value=''" @change="uploadPhoto" class="uploadImg"/>解决input file change监听文件(图片)上传事件多次触发
对应的HTML结构代码如下：
<a name="uploadFile" id="uploadFile" href="javascript:;" rel="external nofollow" >[上传文件]</a>
<input id="myFile" name="myFile" value="上传图片" type="file" accept="application/vnd.ms-excel" style="display: none"/>在开发文件上传功能时，通常需要监听用户的文件选择行为：
/**
* 点击上传文件，触发input type="file"
*/
$("#uploadFile").click(function () {
const myFile = $("#myFile")
// 触发
myFile.click()
// 监听change事件
myFile[0].addEventListener('change', function (e) {
var filesList = document.querySelector('#myFile').files;
if(filesList.length==0){ //如果取消上传，则上传文件的长度为0
console.log("没有上传任何文件");
return;
}else{
//如果有文件上传，这在这里面进行
console.log(filesList);
}
});
});但在实际测试中可能会发现，一次文件变更操作却导致了监听函数被多次触发：
![在使用input[type=file]时，如果用户尝试选择与之前完全相同的文件，浏览器通常不会触发change事件。](/uploads/20261030/d96550fee69795a8bdc8d884a505c2b528b2de1aac1842f0d2ac53f99cf43f76.png)
出于安全考虑，浏览器禁止直接对file input的value属性进行赋值，即使尝试将其置空也不被允许。虽然可以通过修改outerHTML的方式清空，但该方案仅在IE浏览器中有效。
由于缺乏标准的置空方法，当用户异步上传完文件后再次选择相同的文件时，因为file input的value（即文件路径）没有发生变化，导致change事件无法被触发。
解决方法是
在每次用户选择完文件后，动态重建该input元素。由于clone节点默认不带值，这相当于创建了一个全新的file input实例，从而确保每一次文件选择都能正常触发change事件。
/**
* 点击上传文件，触发input type="file"
*/
$("#uploadFile").click(function () {
const myFile = $("#myFile")
// 触发
myFile.click()
// 监听change事件
myFile.unbind().change(function (e) {
console.log(e)
})
});通过这种方式，每次上传不同的文件时都能准确监听到一次改变，符合预期的监听效果：
![在使用input[type=file]时，如果用户尝试选择与之前完全相同的文件，浏览器通常不会触发change事件。](/uploads/20261030/93a803fa8df2b40ca3780f3187a76455a7100cc1d47a4a8871f0c886a742cfc2.png)
总结
以上为个人经验总结，希望能给大家一个参考，也希望大家多多支持本站。