Как предварительно просмотреть изображение перед его загрузкой (с помощью JavaScript)
Добавить в избранное
Предварительный просмотр изображения перед его загрузкой — полезная функция, позволяющая пользователям проверить выбранное изображение перед его отправкой на сервер. Этого можно добиться с помощью JavaScript и файлового API HTML5.
Во-первых, вам нужно будет создать HTML-форму, включающую поле ввода файла и область предварительного просмотра изображения. Вот пример:
<input type="file" id="fileInput" onchange="previewImage()" />
<div id="preview"></div>
</form>
Событие onchange используется для вызова previewImage() функции при выборе файла. Атрибут id используется для ссылки на поле ввода и область предварительного просмотра в JavaScript.
Далее вам нужно будет создать previewImage() функцию. Эта функция получит выбранный файл, создаст URL-адрес объекта для файла и установит атрибут src элемента img в URL-адрес объекта. Вот пример:
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var objectUrl = URL.createObjectURL(file);
var preview = document.getElementById('preview');
preview.innerHTML = '<img src="' + objectUrl + '" />';
}
В этом примере fileInput переменная используется для ссылки на поле ввода файла, переменная file используется для ссылки на выбранный файл, objectUrl переменная используется для создания URL-адреса объекта для файла, а переменная preview используется для ссылки на область предварительного просмотра.
Наконец, вы можете стилизовать область предварительного просмотра, чтобы она выглядела более привлекательно.
width: 300px;
height: 300px;
overflow: hidden;
}
#preview img {
width: 100%;
}
Обратите внимание, что когда вам больше не нужен URL-адрес объекта, вы должны отозвать его, вызвав URL.revokeObjectURL(objectUrl) для освобождения памяти. Вы также можете добавить некоторую проверку в свой код, чтобы проверить, является ли выбранный файл файлом изображения или нет, используя свойство file.type. Это можно сделать внутри previewImage() функции перед созданием URL-адреса объекта.