Breaking News: Grepper is joining You.com. Read the official announcement!

Multiple images preview in browser javascript

Saad Rehman answered on September 7, 2022 Popularity 6/10 Helpfulness 4/10

answer Multiple images preview in browser javascript

related multiple preview image with javascript

Multiple images preview in browser javascript

Comment

function imagesPreview(imgInp, placeToInsertImagePreview) {

if (imgInp.files) {
var filesAmount = imgInp.files.length;
for (i = 0; i < filesAmount; i++) {

  var reader = new FileReader();

  reader.onload = function(event) {
      $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
  }

	reader.readAsDataURL(imgInp.files[i]);
}
}

};


//html
 <input accept="image/*" type='file' id="imgInp" multiple="multiple"/>
 <div class="gallery" id="gallery"></div>

Popularity 6/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: browser javascript preview

Link to this answer
Share Copy Link

Contributed on Sep 07 2022

Saad Rehman

0 Answers Avg Quality 2/10

Closely Related Answers

multiple preview image with javascript

Comment

//html
<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>


//javascript
// preview images
let fileInput = document.querySelector("#gallery_image_files");
fileInput.addEventListener("change", (e) => {
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    // CODE TO PREVIEW IMAGE
    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");
  }
});

//scss
#output{
  // background-color:lightblue;
  .img-div{
  margin:5px;
}
.thumbnail{
  width:100px;
  height:100px;
  transition: all .6s;
  box-shadow: 1px 1px 6px gray;
  &:hover{
    transform:scale(1.1);
  }
}
}

Popularity 4/10 Helpfulness 5/10 Language whatever

Source: Grepper

Tags: whatever javascript preview image

Link to this answer
Share Copy Link

Contributed on Mar 09 2023

WinMaw

0 Answers Avg Quality 2/10

Multiple images preview in browser javascript

Contents

More Related Answers

Multiple images preview in browser javascript

Closely Related Answers

multiple preview image with javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.