打破单调：探索防止input type="file"onChange事件重复触发的方法
2024-02-09 09:49:47
剖析input type="file" onChange事件重复触发的困境与应对之策
理解问题根源
input type="file" 元素是 web 开发中不可或缺的组件，它允许用户选择并上传文件。通常，当用户选择新文件时，会触发 onChange 事件，便于开发者采取相应的处理措施。然而，在某些浏览器中，当用户上传同一文件时，onChange 事件并不会触发，这给开发过程带来了困扰。
究其原因，当用户使用 input type="file" 选择文件时，浏览器会创建一个 FileList 对象来存储所选文件。onChange 事件在 FileList 对象发生变化时触发。当用户上传新文件时，FileList 对象被更新，从而触发事件。但当用户上传同一文件时，FileList 对象保持不变，自然也不会触发事件。
化解难题的方法
克服 input type="file" onChange 事件重复触发问题的关键在于找到一种方法来强制更新 FileList 对象。以下列举了一些可行的解决之道：
1. 善用隐藏输入
此方法涉及创建两个 input type="file" 元素：一个可见，一个隐藏。当用户选择文件时，将触发可见输入的 onChange 事件。随后，通过 JavaScript 将所选文件复制到隐藏输入中。隐藏输入的 onChange 事件将始终触发，即使上传同一文件也是如此。
<input type="file" id="visible-input" />
<input type="file" id="hidden-input" style="display: none;" />
<script>
const visibleInput = document.getElementById('visible-input');
const hiddenInput = document.getElementById('hidden-input');
visibleInput.addEventListener('change', () => {
hiddenInput.files = visibleInput.files;
});
</script>
2. 借助自定义事件
此方法利用自定义事件来解决问题。当用户选择文件时，将触发一个自定义事件，该事件可用于更新 FileList 对象并触发事件处理程序。
<input type="file" id="file-input" />
<script>
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', () => {
const customEvent = new CustomEvent('file-selected', {
detail: {
files: fileInput.files,
},
});
document.dispatchEvent(customEvent);
});
document.addEventListener('file-selected', (event) => {
// 处理更新的FileList对象和触发事件
});
</script>
3. 借助 jQuery 插件
对于熟悉 jQuery 的开发者来说，可以使用 jQuery 插件来简化此过程。例如，jQuery File Upload 插件提供了用于处理文件上传的全面解决方案，包括解决 onChange 事件重复触发问题。
<input type="file" id="file-input" />
<script>
$('#file-input').fileupload({
// 配置插件选项
});
</script>
浏览器兼容性
值得注意的是，这些解决方法的浏览器兼容性各不相同。隐藏输入方法在大多数现代浏览器中都受支持，而自定义事件方法在所有主要浏览器中都受支持。jQuery File Upload 插件还提供了广泛的浏览器兼容性。
结语
通过理解 input type="file" onChange 事件重复触发问题的根源并探索可行的解决方法，开发者可以有效地克服这一限制。通过利用隐藏输入、自定义事件或 jQuery 插件，他们可以确保在上传同一文件时始终触发事件，从而简化文件上传过程并提高用户体验。
常见问题解答
1. 为什么当上传同一文件时，onChange 事件不会触发？
因为当用户上传同一文件时，浏览器中存储选定文件的 FileList 对象保持不变，因此不会触发 onChange 事件。
2. 使用隐藏输入方法时，如何将选定文件复制到隐藏输入中？
通过 JavaScript，将可见输入的 files 属性值赋给隐藏输入的 files 属性。
3. 自定义事件方法中，如何触发自定义事件？
使用 new CustomEvent() 构造函数创建自定义事件，然后使用 dispatchEvent() 方法触发该事件。
4. jQuery File Upload 插件如何解决onChange 事件重复触发问题？
该插件通过内部机制强制更新 FileList 对象，从而始终触发 onChange 事件。
5. 除了上述方法之外，还有其他解决此问题的方法吗？
还有一种方法是修改浏览器的默认行为，但这需要深入的技术知识和潜在的安全风险。
