File API позволяет с помощью JavaScript считывать локальные файлы, в частности, для этого применяются следующие интерфейсы:
File: представляет один файл и содержит информацию о файле, как например, имя файла или дату последнего изменения
FileList: представляет список объектов File
Blob: представляет бинарные данные
FileReader: предоставляет методы для считывания объектов типа File
и Blob
Чтобы получить доступ к содержимому файла, нам надо его выбрать. Есть два варианта выбора файлов: через диалоговое окно файла и с помощью перетаскивания файлов в определенную область веб-страницы. Рассмотрим оба варианта.
Чтобы получить доступ к локальным файлам через File API, пользователь должен сначала выбрать соответствующие файлы.
Это гарантирует, что произвольные файлы не могут быть прочитаны незаметно с помощью JavaScript. Один из вариантов предоставления пользователям выбора
файла — через элемент <input type="file">
. Например:
<input type="file" id="files" name="files[]" multiple />
Если пользователь выбирал один или несколько файлов, то у элемента <input>
генерируется событие change.
Используя обработчик этого события, мы можем получить выбранные файлы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <input type="file" id="files" name="files[]" multiple /> <div id="list"></div> <script> function printFiles(e) { const files = e.target.files; // получаем все выбранные файлы let output = ""; for (let i = 0; i < files.length; i++) { // Перебираем все выбранные файлы const file = files[i]; // Получаем файл console.log(file); output += "<li><p><strong>" + file.name + "</strong></p>"; output += "<p>Type: " + file.type || "n/a</p>"; output += "<p>Size: " + file.size + " bytes</p>"; output += "<p>Changed on: " + file.lastModifiedDate.toLocaleDateString() + "</p></li>"; } document.getElementById("list").innerHTML = "<ul>" + output + "</ul>"; } document.getElementById("files").addEventListener("change", printFiles); </script> </body> </html>
Здесь на странице расположен элемент для выбора файлов, а также элемент <div>
для вывода информации о выбранных файлах.
В коде JavaScript вешаем на событие "change" элемента выбора файлов функцию-обработчик printFiles. В этой функции через параметр получаем выбранные файлы:
const files = e.target.files;
Значение e.target.files
представляет объект FileList - своего рода массив файлов, где каждый файл представлен объектом File.
Тип File
хранит информацию о файле в своих свойствах:
name: имя файла
type: тип файла
size: размер файла в байтах
lastModifiedDate: дата и время последнего изменения
И далее в цикле мы перебираем все файлы и значения всех свойств файла добавляем в переменную output, которая затем выводится на веб-страницу:
for (let i = 0; i < files.length; i++) { // Перебираем все выбранные файлы const file = files[i]; // Получаем файл console.log(file); output += "<li><p><strong>" + file.name + "</strong></p>"; output += "<p>Type: " + file.type || "n/a</p>"; output += "<p>Size: " + file.size + " bytes</p>"; output += "<p>Changed on: " + file.lastModifiedDate.toLocaleDateString() + "</p></li>"; }
Например, с помощью элемента <input type="file" />
я выбираю в файловой системе 2 файла
И после выбора код JavaScript получит выбранные файлы и выведет полученную информацию на веб-страницу:
Применение Drag and Drop API представляет второй способ получения файлов. Для применения этого API необходимо сначала
определить элемент на веб-странице, на который пользователь будет перетаскивать файл(ы). В качестве такого элемента может служить элемент <div>
.
Затем для этого элемента регистрируются обработчики двух событий: для события перетаскивания dragover и
для события завершения перетаскивания drop. Событие перетаскивания dragover выполняется, когда файл перетаскивается на элемент
(но еще не опускается). Событие завершения перетаскивания drop выполняется, когда пользователь отпустил файл на элемент, и
перетаскивание завершено.
Определим следующую веб-страницу
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <div id="target" style="width:300px;padding: 15px; background-color: gray;">Перетащите файлы сюда</div> <div id="fileList"></div> <script> function printFiles(e) { e.preventDefault(); const files = e.dataTransfer.files; // получаем все выбранные файлы let output = ""; for (let i = 0; i < files.length; i++) { // Перебираем все выбранные файлы const file = files[i]; // Получаем файл console.log(file); output += "<li><p><strong>" + file.name + "</strong></p>"; output += "<p>Type: " + file.type || "n/a</p>"; output += "<p>Size: " + file.size + " bytes</p>"; output += "<p>Changed on: " + file.lastModifiedDate.toLocaleDateString() + "</p></li>"; } document.getElementById("fileList").innerHTML = "<ul>" + output + "</ul>"; } function handleDragOver(e) { e.preventDefault(); e.dataTransfer.dropEffect = "copy"; } const target = document.getElementById("target"); target.addEventListener("dragover", handleDragOver); target.addEventListener("drop", printFiles); </script> </body> </html>
Здесь на странице у нас также элемент <div>
для отображения информации по выбранным файлам. И также определен отдельный элемент
<div>
, на который пользователь будет перетаскивать файлы. Чтобы область для перетаскивания была заметной, она окрашена в серый цвет.
Для области перетаскивания (<div id="target">
) устанавливаются два обработчика. Обработчик события dragover устанавливает значение
"copy" в качестве эффекта перетаскивания:
function handleDragOver(e) { e.preventDefault(); e.dataTransfer.dropEffect = "copy"; }
Обработчик события drop - функция printFiles выводит данные файлов на веб-страницу. Для получения выбранных файлов примяется свойство
e.dataTransfer.files
:
const files = e.dataTransfer.files
Это свойство также представляет объект-список FileList
, где каждый элемент представляет объект File
.
Таким образом, мы можем перетащить на серую область нужные нам файлы, и ниже будет выведена информация об этих файлах: