HTML < input type = ‘ File’> File Select Event

假设我们有这个密码:

<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>

结果是:

image showing browse and upload button

当用户单击“ Browse...”按钮时，会打开一个文件搜索对话框:

image showing a file search dialog box with a file selected

用户可以通过双击文件或单击“打开”按钮来选择文件。

有没有一个 Javascript 事件，我可以用来通知后，文件被选中？

277105 次浏览
小开
最佳答案

收听更改事件。

input.onchange = function(e) {
..
};
小开

当您必须重新加载文件时，您可以删除输入的值。下次添加文件时，‘ on change’事件将触发。

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
});
小开

即使单击“取消”，也会调用 Change 事件。

小开

我用纯 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>

小开

虽然这是一个老问题，但它仍然是一个有效的问题。

预期行为:

  • 上传后显示选定的文件名。
  • 如果用户单击 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事件。

提交答案