<div class="mb-3">
<div class="mt-5">
<input type="file" name="images[]" id="gallery_image_files" maxlength="9" class="mb-3 form-control w-25" multiple="multiple" accept="image/jpeg, image/png, image/jpg">
<div id="output" class="d-flex p-3 ">
</div>
</div>
</div>
let fileInput = document.querySelector("#gallery_image_files");
fileInput.addEventListener("change", (e) => {
if (window.File && window.FileReader && window.FileList && window.Blob) {
const files = e.target.files;
const limit = 9;
if (files.length > limit) {
alert("you can select max " + limit + " images");
fileInput.value = null;
} else {
const output = document.querySelector("#output");
output.innerHTML = "";
for (let i = 0; i < files.length; i++) {
if (!files[i].type.match("image")) continue;
const imgReader = new FileReader();
imgReader.addEventListener("load", function (event) {
const imgFile = event.target;
const div = document.createElement("div");
div.className = "img-div";
const img = document.createElement("img");
img.className = "thumbnail";
img.src = imgFile.result;
div.appendChild(img);
output.appendChild(div);
});
imgReader.readAsDataURL(files[i]);
}
}
} else {
alert("Your browser does not support File API");
}
});
#output{
.img-div{
margin:5px;
}
.thumbnail{
width:100px;
height:100px;
transition: all .6s;
box-shadow: 1px 1px 6px gray;
&:hover{
transform:scale(1.1);
}
}
}