Файловый объект

Узнайте, что такое объект File и как его использовать

Браузеры предоставляют намFileобъект.

Объект File - этоBlobобъект, и он предоставляет 3 свойства поверх него:

что в сумме даетBlobсвойства объекта:

  • size(размер в байтах)
  • type(тип MIME)

Вы получитеFileобъект при взаимодействии сFileListобъект, который можно получить из HTML-формы с<input type="file" />элемент, или при взаимодействии сПеретащить и отпустить.

Когда у тебя естьFileListобъект, когда вы перебираете его или выбираете элемент (например, первый элемент сmyFileList[0]) вы получитеFileобъект.

Скажите, что у вас естьinput type="file"элемент в вашей форме:

<input type="file" />

Теперь вы можете слушатьchangeдля этого элемента, поэтому при выборе файла вы получите информацию о нем.document.querySelector('input').filesвернетFileListобъект, как описано выше, и используя[0]мы загружаем первый файл и можем получить доступ ко всем нужным нам свойствам изFileобъект:

document.querySelector('input').addEventListener('change', () => {
  const file = document.querySelector('input').files[0]
  alert(`The file ${file.name} was last modified on ${new Date(file.lastModified).toDateString()}`)
})

См. ПероДемонстрация файлового объектаАвтор: Флавио Коупс (@flaviocopes) наCodePen.

Tech Wiki Online!