How to Preview an Image Before Upload using JavaScript

In this video, you will be able to display preview of an image before upload using JavaScript.

To display preview of an image you need to include jQuery in your code.

Firstly, create a form with input type file , that will be taking an image from your laptop/computer.
Also create a div for image preview.
Define on change function on input and define same function in script tag as well.
get the uploaded file details and create a url from the image details.

The createObjectURL() method creates a DOMString containing a URL representing the object given in the parameter of the method. The new object URL represents the specified File object or Blob object.

Note: The URL lifetime is tied to the document in which it was created.

Then get the div for image preview
create an image in JavaScript using createElement.
pass url as the value of image src
append the image to the div for image preview

you can also set the width and height of the image in JavaScript.

Code
input type="file" name="upload_file" class="form-control" placeholder="Enter Name" id="upload_file" onchange="getImagePreview(event)"

div id="preview"

function getImagePreview(event)
{
}


#javascript #knowledgethrusters

[LiamMisikonis]

Hi thank you for that amazing video, if you could update us and show how to overlay 2 images 1 on top of another including live preview that would be incredible

[toncuong]

Thanks you so much!! You’ve done a good job!!!

[hmmmza]

I'd have considered subscribing to your channel, but you use white theme

[MadhuKumar-hiqs]

please make a video on how to print pdf in chrome without preview

[khushbuthakur]

Is it possible to do it with pdf file .

[panoramanews]

thank you but if i want to delete image ?

[hashirhassan]

How to delete the image without replacing it