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

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

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

Демо:

<label for="preview">
    <img id="preview-img" src="" alt=""/>
  <input id="preview" type="file" name="image" multiple="multiple" value="" placeholder="Файлы (jpg, jpeg, png)" />
</label>
<script>
    //Показать превью загруженного изображения
    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);
     });
</script>

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

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