Ozzy Pro

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

Показать превью (предпросмотр) загруженного изображения 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
  • Надежные дата-центры
  • Своя панель управления
  • Бесперебойная работа
← Как перенести записи с WordPress на MODX Revolution↑ БлогОбъединить несколько полей input в одно JS jQuery →
20 апреля 2021, 21:52    Сергей Глазунов Блог 0    1200 0

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