codemediaweb.com

Code Media

Preview Image Before Upload in JavaScript (Free Code)

Preview Image Before Upload is a common web element. preview uploaded image is used to preview an image before uploading it to the server. 

This image upload with preview also plays an important role in various image uploading and editing websites.

Preview Image Before Upload in JavaScript

In this article, you will learn how to create this type of JavaScript Preview Image Before Upload project. You will find many such tutorials on the internet, but this article will be the best for you. 

Here you will find step by step explanation of the source code. I have already shared another tutorial that will show a preview of multiple images before uploading.

Preview Image before Upload JavaScript

This preview uploaded image in the HTML project has been made very easy. There is an image select button and image viewing display. The button will help to select the image from the device. The display here will help to preview the selected image.

Type = “file” is used to select the image. You can select any file using type = “file”. In order to select only the image, you need to use the condition accept = “. Png, .jpg, .jpeg” in the input.

HTML contains many types of inputs. Each input has a different function. Type = “file” is used to select the file.

See the Pen
Untitled
by Shantanu Jana (@shantanu-jana)
on CodePen.

Hopefully, the above demo has helped you to know how this design (Preview Image Before Upload Using JavaScript) works.

How to Preview an Image Before Upload using JavaScript

Now if you want to create this preview uploaded image project then follow the tutorial below. Here I have tried to give an explanation of the complete code. I used HTML, CSS, and javascript to build this image upload system.

Step 1: 

HTML of image upload with preview

We have added all the information of this image select and upload system using the HTML below. Input buttons, image preview boxes, and basic text are all added by the following HTML.

<div class=”upload_field”>
  <form runat=”server”>
    <img id=”prev_img” src=””>
    <input id=”upFile” ondrop=”return false” onChange=”validateFileType()” type=”file” name=”” accept=”.png, .jpg, .jpeg”>
    <p>Only jpg/jpeg and png file upload</p>
    <span id=”fileName”>Upload</span>
  </form>
</div>

Step 2: 

Design the image preview project

This image upload with the preview project has been designed by CSS below. First, the basic design of this project has been done. 

Then I designed the image preview box. Lastly, I have converted the input box to the image select button.

*,*:after,*:before{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}
body{
 font-family: arial;
 font-size: 16px;
 margin: 0;
 background: #047378;
 color: #000;
 display: flex;
 min-height: 100vh;
 align-items: center;
 justify-content: center;
}
.upload_field{
 border: 5px solid #fff;
 border-radius: 15px;
 text-align: center;
 display: inline-block;
 position: relative;
 padding: 20px;
}
.upload_field #prev_img{
 min-width: 300px;
 min-height: 200px;
 border-radius: 15px;
 background: #e6fbe4;
 margin-bottom: 10px;
}
.upload_field img{
  max-width: 300px;
}
.upload_field input{
 position: absolute;
 margin: 0;
 opacity: 0;
 z-index: 1;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
.upload_field span{
 display: block;
 color: #047378;
 font-weight: 700;
 font-size: 18px;
 text-transform: uppercase;
 padding: 15px;
 background:#fff;
 border-radius: 15px;
 text-align: center;
.upload_field p{
 margin-top: 0;
 margin-bottom: 20px;
 color: #fff;
 font-size: 22px;
}

Step 3: 

Activate image upload and preview

Now it is time to activate this Preview Image Before Upload by JavaScript. The image can be selected by the input of HTML but it cannot be displayed on the webpage. So you need to use the JavaScript below to display the selected image on the webpage.

function validateFileType(){
var upFile = document.getElementById(“upFile”).value;
var fileName = document.getElementById(“fileName”);
alert(“You selected ” + upFile.split(“\\”).pop())
fileName.innerHTML=”Uploaded”;
prev_img.src = URL.createObjectURL(event.target.files[0]);
}

Hopefully, you have learned from this tutorial how to Preview an Image Before Upload using JavaScript.

Be sure to comment on how you like this JavaScript tutorial. Using this project you can preview an image before uploading it to the server. If there is any problem, use the comment box.

Leave a comment