Oh Snap!

Please turnoff your ad blocking mode for viewing your site content

Hit enter after type your search item

How to Preview Image Before Upload Using Javascript

/
/
/
76 Views

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.

READ  AJAX JQUERY AND PHP REGISTRATION FORM

 

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>

 

READ  Build a Youtube Video Search in Javascript With Pagination Using Youtube Data API V3 Full Project

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;
}

 

READ  Firebase Authentication in Twitter using Javascript

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.

 

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 Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar
Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :