Загрузка файлов с помощью javascript

.

     Сейчас разберем пример как с помощью javascript перехватывать событие на теге <input>, когда  например на стороне клиента происходит загрузка файла, то скрипт получает уведомление и выполняет определенный сценарий, начнем немного с теории и легенького примера для понимания.




     В javascript тип File является абстрактным представлением файла. Экземпляр обладает некоторыми свойствами:

  •  name — имя файла 
  •  size — размер файла в байтах 
  •  type — MIME тип файла 

     Тип File являясь ссылкой на файл предоставляет информацию о файле но не дает прямого доступа к манипуляции с файлом.  Построим первый пример получая свойства объекта типа File. Для начала создадим кнопочку загрузки файла с помощью тега input которому зададим тип = file присвоив ей id = my-files, таким образом javajscript будет реагировать на событие каких либо изменений в кнопке:

Обратите внимание, когда мы задали тегу input тип: файл, указав это в html разметке input type=file, мы тем самым  дали разрешение веб странице на доступ к файлу.

     Применим для обработки этого тега следующий javascript код:

Тут все просто переменной loadfile мы присваиваем Id тега <input> через который мы загружаем файл, и вешаем на него обработчик события addEventListener, который реагирует на любое изменение в теге <input>.

     Запускаем и в браузере открываем консоль и видим примерно такой вот код:

Заметьте также что вы не сможете загрузить несколько изображений, только по одному. Это дело можно исправить, добавив в тег <input> дополнительный атрибут multiple. Тег multiple —  позволяет указать одновременно несколько файлов в поле для загрузки файлов, если добавить этот атрибут:

Теперь вы без проблем сможете загрузить одновременно несколько фалов, выглядеть в console браузера это будет примерно так: