How to Preview an Image Before Upload using JavaScript

Описание: How to Preview an Image Before Upload using JavaScript


image preview
image preview before upload in php
preview image before upload
how to preview an image before upload using javascript
javascript jquery preview an image before upload using javascript
preview image before upload javascript
preview image before upload using jquery
preview image before upload html css javascript
preview image before upload html css
preview image before upload html
preview image before upload javascript
preview image before upload
how to show image before upload html css javascript
how to show image before upload html css
how to show image before upload html
how to show image before upload javascript
how to show image before upload

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)
{
var image=URL.createObjectURL(event.target.files[0]);
var imagediv= document.getElementById('preview');
var newimg=document.createElement('img');
imagediv.innerHTML='';
newimg.src=image;
newimg.width="300";
imagediv.appendChild(newimg);
}