HTML <input type ='file'>文件选择事件
Moo*_*oon 131 html javascript javascript-events
假设我们有这个代码:
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>
结果如下:
当用户单击"浏览..."按钮时,将打开文件搜索对话框:
用户将通过双击文件或单击"打开"按钮来选择文件.
是否有一个Javascript事件,我可以用来在选择文件后收到通知？
Anu*_*rag 164
听取改变事件.
input.onchange = function(e) {
..
};
- 如果用户需要"重新加载"文件怎么办？onchange不会触发,但它仍然应该重新加载,好像它是第一次加载它一样. (27认同)
- 请注意,在IE7和8中,"更改"事件不会冒泡到表单事件.您需要将侦听器放在<input>标记上. (7认同)
- 请注意,如果用户连续多次选择同一文件,则此操作无效,因为文件未更改. (7认同)
- 在脚本标签中是,或者您可以将其添加为属性(`<input type ="file"onchange ="..."/>`),但不建议这样做. (4认同)
- 确保在处理 onchange 事件后清空该值，否则如果用户在初始选择后决定选择不同的文件，则下次不会触发 onchange (4认同)
- 我们要把它写在javascript脚本标签中 (3认同)
Cle*_*lem 42
必须重新加载文件时,可以删除输入值.下次添加文件时,将触发"on change"事件.
document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
- 这工作正常,但要注意奇怪的IE <11行为.它不允许您更改输入值,因此您很可能需要一种解决方法.http://stackoverflow.com/questions/9011644/how-to-reset-clear-file-input (5认同)
Zan*_*non 12
jQuery方式:
$('input[name=myInputName]').change(function(ev) {
// your code
});
这就是我用纯 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;
}
submit.disabled = false;
});#warning {
text-align: center;
}
#warning.warn {
color: red;
transform: scale(1.5);
transition: 1s all;
}<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>尽管这是一个老问题，但它仍然是一个有效的问题。
预期行为：
- 上传后显示所选文件名。
- 如果用户单击 ，则不执行任何操作
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不会触发该事件。为了克服这个问题，我this.value = null;在事件函数的末尾设置了onchange。它将所选文件的文件路径设置为null. 因此，onchange即使在选择同一文件时也会触发该事件。