HTML <input type='file'> 文件选择事件
假设我们有以下代码：
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>
结果是：
https://i.stack.imgur.com/bT2hc.png
当用户单击“浏览...”按钮时，将打开一个文件搜索对话框：
https://i.stack.imgur.com/Y10eN.png
用户将通过双击文件或单击“打开”按钮来选择文件。
选择文件后，是否有一个 Javascript 事件可以用来通知？
监听更改事件。
input.onchange = function(e) {
..
};
当您必须重新加载文件时，您可以擦除输入的值。下次添加文件时，将触发“更改时”事件。
document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
jQuery方式：
$('input[name=myInputName]').change(function(ev) {
// your code
});
这就是我用纯 JS 做的方式：
var files = document.getElementById('filePoster'); var submit = document.getElementById('submitFiles'); var 警告 = document.getElementById('warning'); files.addEventListener("change", function () { if (files.files.length > 10) { submit.disabled = true; warning.classList += "warn" return; } warning.classList -= "warn"; submit .disabled = false; }); #warning { 文本对齐：居中；过渡：1s全部； } #warning.warn { 颜色：红色；变换：比例（1.5）； } 请不要一次上传超过10张图片。
即使您单击取消，也会调用 Change 事件。
尽管这是一个古老的问题，但它仍然是一个有效的问题。
预期行为：
上传后显示选定的文件名。
如果用户单击取消，则不执行任何操作。
即使用户选择相同的文件，也显示文件名。
带有演示的代码：
解释：
onchange 事件处理程序用于处理文件选择事件中的任何更改。
仅当元素的值发生更改时才会触发 onchange 事件。因此，当我们使用输入字段选择同一个文件时，不会触发该事件。为了克服这个问题，我设置 this.value = null;在 onchange 事件函数结束时。它将所选文件的文件路径设置为空。因此，即使在同一文件选择时也会触发 onchange 事件。
<input type="file" onchange="..." />)，但不建议这样做。