File API

Загрузка файлов

Последнее обновление: 13.11.2023

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

И после выбора код JavaScript получит выбранные файлы и выведет полученную информацию на веб-страницу:

Получение информации о выбранном файле в JavaScript с помощью File API

Получение файлов с помощью Drag and Drop API

Применение 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.

Таким образом, мы можем перетащить на серую область нужные нам файлы, и ниже будет выведена информация об этих файлах:

Получение информации о файле через Drag and Drop в JavaScript с помощью File API

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм