js之input[type=file]选择重复的文件,无法触发change事件问题
作者：草字
这篇文章主要介绍了js之input[type=file]选择重复的文件,无法触发change事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
input[type=file]选择重复的文件,无法触发change事件
选择文件的时候，浏览器会判断是否跟之前一致，如果一致他就不会重新加载这个文件，避免无谓的加载消耗。
所以我们在不一样的需求的时候，比如裁剪图片，无论他是不是相同图片，都必须让他触发change事件，这样才能进行下一步处理。
解决方法
给input添加原生事件onblur进行清空，ο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);
}
});
});但是结果一次改变，却触发多次监听：
由于file input出于安全角度，是不允许赋值的，即使是置空，虽然通过给outerHtml赋值可以清空，但仅在ie下起使用。
因为缺少置空的方法，用户异步上传完毕文件后选择相同文件时，不会触发change，因为在这种情况下，我们没有办法使value（也就是文件路径）发生变化。
解决方法是
每次选完文件，就重建此元素，这样值自然是空的，因为clone不带值，这样就是一个全新的file input，每一次选择，自然各种正常。
/**
* 点击上传文件，触发input type="file"
*/
$("#uploadFile").click(function () {
const myFile = $("#myFile")
// 触发
myFile.click()
// 监听change事件
myFile.unbind().change(function (e) {
console.log(e)
})
});这样每上传一次不同的文件就可以监听到一次改变，符合监听的效果：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。