HTML <input type='file'> 文件选择事件
Posted
技术标签:
【中文标题】HTML <input type=\'file\'> 文件选择事件【英文标题】：HTML <input type='file'> File Selection EventHTML <input type='file'> 文件选择事件 【发布时间】：2011-04-01 11:57:19 【问题描述】：假设我们有这段代码：
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>
结果如下：
当用户点击“浏览...”按钮时，会打开一个文件搜索对话框：
用户将通过双击文件或单击“打开”按钮来选择文件。
在选择文件后，我可以使用 javascript 事件来收到通知吗？
【问题讨论】：
多么时髦的旧 Windows UI！ @El-Burritos 这是 2010 年发布的；当然，这是一个旧的 Windows UI：D 【参考方案1】：收听更改事件。
input.onchange = function(e)
..
;
【讨论】：
是在脚本标签中，或者您可以将其添加为属性 (<input type="file" onchange="..." />)，尽管不建议这样做。
请注意，在 IE7 和 8 中，“更改”事件不会冒泡到表单事件。你需要把你的监听器放在 标签上。
如果用户需要“重新加载”文件怎么办？ onchange 不会触发，但仍应像第一次加载一样重新加载。
注意，如果用户连续多次选择同一个文件，这将不起作用，因为文件没有改变。
在处理完onchange事件后请务必清空该值，否则如果用户在初始选择后决定选择不同的文件，下次将不会触发onchange【参考方案2】：
当你必须重新加载文件时，你可以删除输入的值。下次添加文件时，会触发“on change”事件。
document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
【讨论】：
这很好，但要注意奇怪的 IE ***.com/questions/9011644/…【参考方案3】：jQuery方式：
$('input[name=myInputName]').change(function(ev)
// your code
);
【讨论】：
【参考方案4】：这就是我用纯 JS 做的方式：
var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = 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
text-align: center;
transition: 1s all;
#warning.warn
color: red;
transform: scale(1.5);
<section id="shortcode-5" class="shortcode-5 pb-50">
<p id="warning">Please do not upload more than 10 images at once.</p>
<form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
<div class="input-group">
<input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
<button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
</div>
</form>
</section>【讨论】：
【参考方案5】：即使您单击取消，也会调用 Change 事件。
【讨论】：
如果您提供一些代码来解释您的答案会有所帮助，因为问题代码 sn-p 中没有提到更改事件 我认为@anthony 指的是以下场景：选择一个文件。现在再次打开文件选择器，但这次单击取消。由于第二次没有选择文件，文件输入控件重置，从而改变了它的初始选择，并触发了 change 事件。 我在 Chrome 83 上试过了，当我点击取消按钮时，事件没有被触发。这个答案很老了，我想它一定已经修复了，至少在 Chrome 上。【参考方案6】：虽然这是一个老问题，但它仍然是一个有效的问题。
预期行为：
上传后显示选定的文件名。 如果用户点击Cancel，请不要做任何事情。
即使用户选择了同一个文件，也显示文件名。
带有演示的代码：
<!DOCTYPE html>
<html>
<head>
<title>File upload event</title>
</head>
<body>
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="userFile" id="userFile"><br>
<input type="submit" name="upload_btn" value="upload">
</form>
<script type="text/javascript">
document.getElementById("userFile").onchange = function(e)
alert(this.value);
this.value = null;
</script>
</body>
</html>说明：
onchange 事件处理程序用于处理文件选择事件中的任何更改。
onchange 事件仅在元素的值发生更改时触发。因此，当我们使用input 字段选择同一个文件时，不会触发该事件。为了克服这个问题，我在onchange 事件函数的末尾设置了this.value = null;。它将所选文件的文件路径设置为null。因此，即使在同一文件选择时也会触发onchange 事件。
【讨论】：
以上是关于HTML <input type='file'> 文件选择事件的主要内容，如果未能解决你的问题，请参考以下文章
<input type="file" /> 的 HTML 助手
自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)