1

Доброй ночи.

Скрипт позволяет выводить превью фотографий перед загрузкой, проблема в том, что когда выбираешь картинки их превью налазит на контент снизу, помогите как это убрать?

Дизайн кнопки "загрузить" делали свой.

function previewImages() {

  var preview = document.querySelector('#preview');

  if (this.files) {
    [].forEach.call(this.files, readAndPreview);
  }

  function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria
    if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
      return alert(file.name + " is not an image");
    } // else...

    var reader = new FileReader();

    reader.addEventListener("load", function() {
      var image = new Image();
      image.height = 100;
      image.title  = file.name;
      image.src    = this.result;
      preview.appendChild(image);
    });

    reader.readAsDataURL(file);
  }
}

document.querySelector('#file-input').addEventListener("change", previewImages);
input[type="file"] {
  display: none;
}
.thumbnail{ float:left; height: 100px; margin: 10px; }
<div class="upload_form">       
  <label>
    <input id="file-input" type="file" name="file[]" multiple>
    <div id="preview">Upload</div>
  </label>
  
</div>  

<input type="submit" name="submit" value="Upload file.">

5
  • Что куда "налазит"? Добавьте пример с проблемой в вопрос
    – InDevX
    7 дек 2020 в 23:22
  • Посмотрите последний код из моего ответа тут. Может быть полезен будет.
    – DiD
    7 дек 2020 в 23:31
  • @InDevX Превью фотографий налазят на контент вокруг и поверх него показываются.
    – Liza
    7 дек 2020 в 23:35
  • @DiD Спасибо, уже смотрю.
    – Liza
    7 дек 2020 в 23:35
  • В данном примере проблема не воспроизводится, ну и проблема тут уж точно не в скрипте, а в разметке, которой здесь нет)
    – kost1k
    8 дек 2020 в 14:09

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.