JavaScript FileReader — читання файлу в браузері

FileReader читає вміст файлу асинхронно: як текст, як Data URL (для прев'ю) або як сирі байти.

правити

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

Читання файлу — операція повільна, тож FileReader побудований на подіях: викликаєш readAsText(), а результат забираєш в обробнику onload із reader.result.

Є три способи читання: readAsText() для текстових файлів, readAsDataURL() — щоб одразу підставити в src зображення, і readAsArrayBuffer() — коли потрібні сирі байти.

Окремий козир — подія progress: для великих файлів можна чесно показати смугу поступу.

правити

Порада

Якщо поступ не потрібен, FileReader уже застарілий: await file.text() і await file.arrayBuffer() роблять те саме одним рядком, без обробників.

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

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

Синтаксис

const reader = new FileReader();\nreader.readAsText(file);

властивості

методи

Переглядачі

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

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

Переглядач
	6	3.6	6	11	12	10

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

Переглядач
	3	18	32	6

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

Переглядач
	1.0

Приклади

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

<input type="file" id="file">

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

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

    reader.onload = () => console.log(reader.result);
    reader.onerror = () => console.error('Не вдалося прочитати');

    // поступ для великих файлів
    reader.onprogress = event => {
        if (event.lengthComputable) {
            console.log(Math.round(event.loaded / event.total * 100) + '%');
        }
    };

    reader.readAsText(file);
});

// те саме сучасно, якщо поступ не потрібен:
// const text = await input.files[0].text();