Let's say we have this code:
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><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 after the file is selected?
This question is related to
javascript
html
dom-events
jQuery way:
$('input[name=myInputName]').change(function(ev) {
// your code
});
Though it is an old question, it is still a valid one.
Expected behavior:
Cancel
.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>
_x000D_
Explanation:
onchange
event handler is used to handle any change in file selection event.onchange
event is triggered only when the value of an element is changed. So, when we select the same file using the input
field the event will not be triggered. To overcome this, I set this.value = null;
at the end of the onchange
event function. It sets the file path of the selected file to null
. Thus, the onchange
event is triggered even at the time of the same file selection.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
That's the way I did it with pure JS:
var files = document.getElementById('filePoster');_x000D_
var submit = document.getElementById('submitFiles');_x000D_
var warning = document.getElementById('warning');_x000D_
files.addEventListener("change", function () {_x000D_
if (files.files.length > 10) {_x000D_
submit.disabled = true;_x000D_
warning.classList += "warn"_x000D_
return;_x000D_
}_x000D_
submit.disabled = false;_x000D_
});
_x000D_
#warning {_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
#warning.warn {_x000D_
color: red;_x000D_
transform: scale(1.5);_x000D_
transition: 1s all;_x000D_
}
_x000D_
<section id="shortcode-5" class="shortcode-5 pb-50">_x000D_
<p id="warning">Please do not upload more than 10 images at once.</p>_x000D_
<form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">_x000D_
<div class="input-group">_x000D_
<input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />_x000D_
<button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>_x000D_
</div>_x000D_
</form>_x000D_
</section>
_x000D_
The Change event gets called even if you click on cancel..
Source: Stackoverflow.com