HTML<input type='file'> 文件选择事件
[英]HTML <input type='file'> File Selection Event
问题描述
假设我们有这个代码：
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>
这导致：
当用户单击“浏览...”按钮时，将打开一个文件搜索对话框：
用户将通过双击文件或单击“打开”按钮来选择文件。
在选择文件后，是否有一个 Javascript 事件可以用来通知我？
6 个解决方案
解决方案1
204 已采纳 2010-08-20 05:21:41
监听更改事件。
input.onchange = function(e) {
..
};
解决方案2
54 2015-02-02 09:24:32
当您必须重新加载文件时，您可以删除输入的值。 下次添加文件时，将触发 'on change' 事件。
document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
解决方案3
18 2016-02-13 19:03:49
jQuery方式：
$('input[name=myInputName]').change(function(ev) {
// your code
});
解决方案4
7 2018-01-02 12:51:53
这就是我用纯 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>
解决方案5
6 2017-01-26 15:34:44
即使您单击取消，也会调用 Change 事件。
解决方案6
1 2021-01-25 14:22:24
虽然这是一个老问题，但它仍然是一个有效的问题。
预期行为：
- 上传后显示选定的文件名。
- 如果用户单击
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事件。
在KnockoutJS和HTML中选择相同文件时，输入文件选择事件未触发
[英]Input file selection event not firing when selecting the same file in KnockoutJS and HTML
是否可以在输入类型文件html（上传文件）上检测到“取消”或“关闭”点击事件？
[英]Is it possible to detect “cancel” or “close” click event on input type file html (upload file)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.