CODEWITHSUNDEEP
javascriptjqueryhtmldom-events
Dan
Dan

Reputation: 2489

event after selecting file using html input file multiple

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>

Upvotes: 1

Views: 3112

Answers (2)

Wils
Wils

Reputation: 1231

$('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>

Upvotes: 4

Fecosos
Fecosos

Reputation: 974

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

Upvotes: 2

Related Questions