JavaScript URL.createObjectURL() — тимчасове посилання на файл

Статичний метод URL.createObjectURL() створює тимчасову адресу для Blob чи File — таку, яку можна підставити в src чи href.

правити

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

Це те, завдяки чому прев'ю вибраного зображення з'являється миттєво, ще до жодного звертання до сервера: файл уже в браузері, і йому просто дають адресу.

Адреса виглядає як blob:https://css.in.ua/550e8400-... і живе, доки жива сторінка.

І ось у цьому — пастка. Кожен виклик тримає файл у пам'яті. Створив адресу для сотні зображень і не прибрав — сотня файлів висить у пам'яті до перезавантаження сторінки.

правити

Нотатка

Завжди клич URL.revokeObjectURL(), коли адреса більше не потрібна. Без цього браузер тримає файл у пам'яті до кінця життя сторінки — на великих файлах це помітний витік.

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

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

Переглядачі

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

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

Переглядач
createObjectURL	8+	4+	6+	15+	12+	10+

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

Переглядач
createObjectURL	4.4+	yes	yes	6+

Приклади

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

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

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

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

    if (!file) {
        return;
    }

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

    // прибираємо, щойно зображення показалось
    preview.onload = () => URL.revokeObjectURL(preview.src);
});