событие после выбора файла с использованием входного файла HTML несколько

Question

Я хотел бы начать загрузку файлов, которые я только что выбрал, с помощью html-элемента input type = "file" множественный = "множественный".

К какому событию я могу подключиться для запуска кода сразу после закрытия диалогового окна файла и завершения выбора файлов.

Мой HTML-код выглядит следующим образом:

<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>

Answer 1

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

для массива файлов, вы также можете выбрать его по типу с определенным классом.

    <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>

Answer 2

Вот хорошая ссылка для загрузки нескольких выбранных изображений

Answer 3

Добавить событие changeListener в input:

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