HTML <input type='file'> File Selection Event
Let's say we have this code:
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile开发者_Python百科'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>
which results in this:
When the user clicks the 'Browse...' button, a file search dialog box is opened:
The user will select the file either by double-clicking the file or by clicking the 'Open' button .
Is there a Javascript Event that I can use to be notified after the file is selected?
Listen to the change event.
input.onchange = function(e) {
..
};
When you have to reload the file, you can erase the value of input. Next time you add a file, 'on change' event will trigger.
document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
jQuery way:
$('input[name=myInputName]').change(function(ev) {
// your code
});
That's the way I did it with pure 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>The Change event gets called even if you click on cancel..
Though it is an old question, it is still a valid one.
Expected behavior:
- Show selected file name after upload.
- Do not do anything if the user clicks
Cancel. - Show the file name even when the user selects the same file.
Code with a demonstration:
<!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>Explanation:
- The
onchangeevent handler is used to handle any change in file selection event. - The
onchangeevent is triggered only when the value of an element is changed. So, when we select the same file using theinputfield the event will not be triggered. To overcome this, I setthis.value = null;at the end of theonchangeevent function. It sets the file path of the selected file tonull. Thus, theonchangeevent is triggered even at the time of the same file selection.
加载中,请稍侯......
精彩评论