20 апреля 2021, 21:52
 1156

Показать превью (предпросмотр) загруженного изображения HTML, JS + jQuery

Как показать, отобразить превью загруженного изображения в input type="file" для предпросмотра.

<label for="preview">
    <img id="preview-img" src="" alt="" style="width: 150px"/>
    <input id="preview" type="file" name="image" multiple="multiple" value="" placeholder="Файлы (jpg, jpeg, png)" />
</label>
//Показать превью загруженного изображения
function readURL(input) {
   if (input.files && input.files[0]) {
     var reader = new FileReader();

     reader.onload = function(e) {
       $('#preview-img').attr('src', e.target.result);
     }

     reader.readAsDataURL(input.files[0]);
   }
 }

 $("#preview").change(function() {
   readURL(this);
 });
Работаем с TimeWeb
Все наши проекты на хостинге TimeWeb - проверено временем.
  • Виртуальный хостинг - от 196 ₽ в месяц
  • Аренда VDS и VPS - от 169 ₽ в месяц
  • Выделенные серверы - от 4 941 ₽ в месяц
  • Конструктор сайтов - 159 ₽ в месяц
  • Быстрый хостинг
  • Облачные серверы
  • Цена + качество
  • Поддержка 24/7
  • Надежные дата-центры
  • Своя панель управления
  • Бесперебойная работа

20 апреля 2021, 21:52    Сергей Глазунов Блог 0    1157 0

Комментарии ()