event after selecting file using html input file multiple

Question

I would like to start uploading the files that I have just selected using the input type="file" multiple="multiple" html element.

Which event can I hook into to run code right after the file dialog has closed and I have completed my files selection.

My html code looks like this:

<form enctype="multipart/form-data" action="/photo" method="post">
  <input type="hidden" name="section_id" value="234" />
  <input type="file" multiple="multiple" id="section_photos" name="section_photos[]" accept=".jpg, .png, .gif" />
</form>

onchange

Kaiido
– Kaiido

2018-04-26 01:28:05 +00:00
Commented Apr 26, 2018 at 1:28 — Kaiido
– Kaiido, Commented Apr 26, 2018 at 1:28

MagnetPlant · Accepted Answer · 2018-04-26 03:57:08Z

4

$('input[type=file]').change(function (e) {
    console.log(e);
    console.log(e.target.files); //a list of the files
});

for file array, you can select it by type with specific class as well.

    <input type="file" class="fileclassputhere" multiple="multiple" id="section_photos" name="section_photos[]" accept=".jpg, .png, .gif" />

<script>
    $('input[type=file].fileclassputhere').change(function (e) {
      console.log(e);
      console.log(e.target.files); //a list of the files
    });
</script>

edited Apr 26, 2018 at 3:57

MagnetPlant

1961 silver badge7 bronze badges

answered Apr 26, 2018 at 1:58

Wils

1,2319 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MagnetPlant · Accepted Answer · 2018-04-26 01:56:00Z

2

Add a change eventListener to the input:

var input = document.getElementById('input')
input.addEventListener('change', function(e){
  console.log(e);
  console.log(e.target.files); // a list of the files
});

edited Apr 26, 2018 at 1:56

MagnetPlant

1961 silver badge7 bronze badges

answered Apr 26, 2018 at 1:31

Fecosos

9747 silver badges17 bronze badges

Collectives™ on Stack Overflow

event after selecting file using html input file multiple

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related