Как сделать предпросмотр загружаемых изображений html?

Question

Пытался что-то сделать на js, как видите не вышло:( пишет src = (unknown) Необходимо подгружать изображения в таблицу рядом с окном загрузки. Изображения загружаются по отдельности, и каждое загруженное изображение оказывается в теге таблицы в которой так же находится окно загрузки. Что-то похожее есть при загрузке превью к видео на youtube. Подскажите что не так? Спасибо.

var limagegalery = document.getElementById('upload_window');
function galery_load(){
    $('#preview_galery_upload').append('<td><img class="upload_galery" src="'+limagegalery.value+'"/></td>');    
}

.upload_galery {
    height: 210px;
    width: 340px;
    border: solid #dadada 1px;
    border-radius: 10px;
    background-color: #f1efef;
    color: #acacac;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}
.add_photo_icon{
    margin-top:-150px;
    padding:10px;
}

    <table>
        <tr id="preview_galery_upload">
            <td>
                <div class="upload_galery">
                    <input onload="galery_load()" id="upload_window" type="file" class="upload_galery" style="opacity:0;" />
                    <div class="upload_help"><p>Кликните, или перетащите в это окно изображение.</p></div>
                </div>
            </td>
        </tr>
    </table>

Answer 1

Допустим так - при помощи new FileReader();

let load = document.querySelector('#load');

document.querySelector('#file').addEventListener('change', function(e) {
  let tgt = e.target || window.event.srcElement,
        files = tgt.files;

  load.innerHTML = '';

  if(files && files.length) {
    for(let i = 0; i < files.length; i++) {
        let $self = files[i],
                fr = new FileReader();
        fr.onload = function(e) {
        load.insertAdjacentHTML('beforeEnd', `<div class="load-img"><img src="${e.srcElement.result}"/><p>${$self.name}</p></div>`);
        }
        fr.readAsDataURL(files[i]);
    };
  }
});

#load {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
}

#load .load-img {
  display: block;
  max-width: 150px;
  max-height: 200px;
  margin: 0 5px 5px 0;
}

#load img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 0 5px;
  background: #ccc;
}

#load p {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
  word-break: break-all;
}

<input id="file" type="file" multiple>

<div id="load"></div>

БЛОГ НА HUSL

Как сделать предпросмотр загружаемых изображений html?

Ответы (1 шт):