Доброй ночи.
Скрипт позволяет выводить превью фотографий перед загрузкой, проблема в том, что когда выбираешь картинки их превью налазит на контент снизу, помогите как это убрать?
Дизайн кнопки "загрузить" делали свой.
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.">