Превью в input file фотографии заходят на контент рядом. HTML JS

Question

Доброй ночи.

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

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

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.">

БЛОГ НА HUSL

Превью в input file фотографии заходят на контент рядом. HTML JS

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