Для вывода одного превью при загрузке изображения в JavaScript вы можете использовать функцию FileReader и элемент HTML Image.
Сначала добавьте на страницу элемент input типа file, который позволит пользователю выбрать изображение для загрузки:
<input type="file" id="imageUpload" accept="image/*"> <div id="previewContainer"></div>
Затем добавьте скрипт, который будет обрабатывать выбранное изображение:
// Получаем элементы HTML const imageUpload = document.getElementById('imageUpload'); const previewContainer = document.getElementById('previewContainer'); // Обработка загрузки изображения imageUpload.addEventListener('change', (event) => { // Проверяем, было ли выбрано изображение if (event.target.files && event.target.files[0]) { // Создаем объект FileReader const reader = new FileReader(); // Читаем содержимое выбранного файла reader.onload = (event) => { // Создаем элемент img для отображения превью изображения const img = document.createElement('img'); img.src = event.target.result; // Очищаем контейнер превью перед добавлением нового изображения previewContainer.innerHTML = ''; // Добавляем превью изображения в контейнер previewContainer.appendChild(img); }; // Чтение файла в формате Data URL reader.readAsDataURL(event.target.files[0]); } });
При выборе изображения пользователем, используя обработчик событий 'change', мы проверяем, было ли выбрано изображение. Если выбрано, мы создаем объект FileReader, чтобы прочитать содержимое файла. После загрузки файла в объект FileReader, мы создаем элемент img и устанавливаем значение src равным результату чтения файла в формате Data URL. Затем мы очищаем контейнер превью и добавляем созданное изображение в контейнер.
В результате, при выборе изображения пользователем, оно будет загружено и отображено в контейнере превью на странице.
Обратите внимание, что данная реализация использует FileReader API, который поддерживается в современных браузерах. Если вы предпочитаете использовать альтернативные подходы или работать с более старыми браузерами, вам может потребоваться использовать другие методы загрузки и отображения изображений.