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

Показать превью (предпросмотр) загруженного изображения 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);
 });