How to Preview Image Before Upload Using Javascript

How to Preview Image Before Upload Using Javascript

Welcome folks I am back with another blog post. In this post we will be implementing How to Preview Image Before Upload using Javascript from scratch. Image Preview is one of the most important features when it comes to image uploading. In this post we will be implementing this feature in the following steps.

See also  Build a Youtube Video Thumbnail Generator in HTML5 CSS3 and Javascript Full Project For Beginners

 

Make a new index.html file and copy paste the below code. In this code we have just a file upload button.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Image Preview Example in Javascript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="preview.js"></script>
</head>
<body>
    <div id="wrapper">
        <input type="file" accept="image/*" onchange="previewImage(event)">
        <img id="outputimage"/>
    </div>
</body>
</html>

 

See also  Javascript Tutorial to Add new Array Elements at Beginning of Array Using unshift() Method

Make a new preview.css file for the stylesheet. It will style the application.

 

body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#0B3861;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#output_image
{
 max-width:300px;
}

 

Make a new preview.js file. This file will hold the logic for the preview image which will be displayed to the user before image upload.

See also  jQuery Html2Canvas.js Capture Screenshot of Div as PNG/JPEG Image File in Browser Using Bootstrap 4 & Javascript Full Project For Beginners

 

function preview_image(event) 
{
 var reader = new FileReader();
 reader.onload = function()
 {
  var output = document.getElementById('output_image');
  output.src = reader.result;
 }
 reader.readAsDataURL(event.target.files[0]);
}

 

Leave a Reply