admin管理员组

文章数量:1134239

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 the file is selected?

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 the file is selected?

  • javascript
  • html
  • dom-events
Share Improve this question edited Aug 28, 2022 at 14:54 Riza Khan 3,1485 gold badges28 silver badges61 bronze badges asked Aug 20, 2010 at 5:15 MoonMoon 20k56 gold badges141 silver badges203 bronze badges 2
  • 39 What a funky old windows UI ! – Louis Brahmi Commented Nov 26, 2019 at 14:45
  • 11 @El-Burritos this was posted in 2010; of course, it's an old Windows UI:D – Binary Commented Jul 9, 2020 at 22:51
Add a comment  | 

6 Answers 6

Reset to default 249

Listen to the change event.

 document.getElementById('input').addEventListener('change', function(e) {
  if (e.target.files[0]) {
    document.body.append('You selected ' + e.target.files[0].name);
  }
});
<input type="file" id="input">

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>

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 onchange event handler is used to handle any change in file selection event.
  • The 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.

The Change event gets called even if you click on cancel..

本文标签： javascriptHTML ltinput type39file39gt File Selection EventStack Overflow

版权声明：本文标题：javascript - HTML &lt;input type=&#39;file&#39;&gt; File Selection Event - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736773372a1952206.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。