How to Preview image before uploading in JavaScript

February 13, 2023

Learn How to Preview image before uploading in JavaScript

today I'm going to teach you how to Preview an Image Before Uploading Using JavaScript. Follow Steps.

Step 1) Add HTML:

Example

Convert Fahrenheit to Celsius

<!-- choose image -->
<input type="file" name="" id="Img"/>
<!-- Preview Image -->
<div id="ShowImg"></div>
<!-- Image Details if Needed -->
<div id="ImgDetails"></div>

Step 2) Add CSS:

Example

Convert Fahrenheit to Celsius

body {
  font-size: 36px;
}

#ShowImg {
  width: 100%;
  max-width: 500px;
}

img {
  width: 100%;
}

Step 3) Add Javascript:

Example

document.getElementById("Img").addEventListener("change", function () {
   var file = this.files[0];
   var Link = URL.createObjectURL(file);

   var details = "";
   details += file.name + "<br/>";
   details += file.type + "<br/>";
   details += Math.floor(file.size / 1024) + "kb";

   var createImg = `<img src="${Link}" alt = "" />`;
   //preview image
   document.getElementById("ShowImg").innerHTML = createImg;
   //display image details
   document.getElementById("ImgDetails").innerHTML = details;

});

Try this code