HTML <input type='file'>文件选择事件
回答 6
浏览 28万
2010-08-20
比方说，我有这样的代码。
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>
其结果是这样的：
当用户点击 "Browse... "按钮时，一个文件搜索对话框就会打开：
用户将通过双击文件或点击'打开'按钮来选择文件。
是否有一个Javascript事件，我可以用它来在文件被选中后得到通知？
多么时髦的老式WINDOWS用户界面啊！！！"。
- Louis Brahmi 2019-11-26
@El-Burritos 这是在2010年发布的；当然，这是一个老的Windows用户界面：D
- Binary 2020-07-09
6 个回答
#1楼
已采纳
得票数 221
侦听change事件。
input.onchange = function(e) {
..
};
是在脚本标签中，或者你可以把它作为一个属性（
<input type="file" onchange="..." />）来添加，尽管这并不推荐。
- Anurag 2010-08-20
请注意，在IE7和8中，'change'事件不会冒出到表单事件中。你需要把你的监听器放在<输入>标签上。
- xer0x 2011-07-20
如果用户需要"重新加载"一个文件怎么办？ onchange不会触发，但它仍然应该重新加载，就像第一次加载它一样。
- bryc 2015-01-09
注意，如果用户连续多次选择同一个文件，这将不起作用，因为文件并没有改变。
- bob0the0mighty 2016-10-26
确保在处理完onchange事件后清空该值，否则，如果用户在初次选择后决定选择不同的文件，onchange不会在下一次被触发。
- webjockey 2017-01-18
#2楼
得票数 59
当你必须重新加载文件时，你可以擦除输入的值。下次你添加文件时，'on change'事件将被触发。
document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
这样做很好，但要注意IE <11的奇怪行为。它不允许你改变输入的值，所以很可能你需要一个解决方法。stackoverflow.com/questions/9011644/…
- Oleksandr Tkalenko 2016-03-13
#3楼
得票数 19
jQuery的方式。
$('input[name=myInputName]').change(function(ev) {
// your code
});
#4楼
得票数 12
这就是我用纯粹的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楼
得票数 6
即使你点击 "取消"，"改变 "事件也会被调用。
如果你能提供一些代码来解释你的答案会有帮助，因为在问题的代码片段中没有提到变化事件。
- DevDig 2017-01-26
我认为@anthony指的是以下情况。选择一个文件。现在再次打开文件选择器，但这次是点击取消。由于第二次没有选择任何文件，文件输入控件被重置，从而改变了它的初始选择，改变事件被触发。
- dvlsc 2019-09-16
我在Chrome 83上试了一下，当我点击取消按钮时，事件没有被触发。这个答案已经很老了，我想它肯定已经被修复了，至少在Chrome上是这样。
- Saeed Ahadian 2020-07-11
#6楼
得票数 5
虽然这是一个古老的问题，但它仍然是一个有效的问题。
预期的行为：
- 上传后显示所选的文件名。
- 如果用户点击
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事件。