JavaScript File — файл, вибраний користувачем

File — файл, вибраний користувачем через <input type="file"> або перетягнутий у вікно. Це Blob із додатковими даними: іменем і датою зміни.

правити

Загальний опис

Отримати файли можна з input.files — це FileList, схожий на масив (перетворюється спредом).

Головне, що дає File до відправки на сервер: name, size і type. Тобто можна чесно сказати «файл завеликий» чи «це не зображення», не ганяючи 20 мегабайтів у мережу даремно.

Щоб прочитати вміст, потрібен FileReader або сучасніші методи самого блоба: await file.text() і await file.arrayBuffer().

правити

Нотатка

Шляху до файлу на диску браузер не дає — і не дасть. Доступні лише ім'я й вміст: це межа пісочниці, а не недогляд.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const file = input.files[0];

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	13	7	4	11.5	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	7	3.2

Підтримка: серверні переглядачі

Переглядач
	20.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<input type="file" id="upload" accept="image/*">
<img id="preview" alt="">

const input = document.getElementById('upload');

input.addEventListener('change', () => {
    const file = input.files[0];

    if (!file) {
        return;
    }

    console.log(file.name, file.size, file.type);

    // відсікаємо до відправки, а не після 20 МБ у мережі
    if (file.size > 5 * 1024 * 1024) {
        alert('Файл більший за 5 МБ');
        return;
    }

    // миттєве прев'ю без сервера
    document.getElementById('preview').src = URL.createObjectURL(file);
});