How to Preview an Image Before Upload using JavaScript
17.1 هزار بار بازدید -
3 سال پیش
-
In this video, you will
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);
}
#javascript #knowledgethrusters
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);
}
#javascript #knowledgethrusters
3 سال پیش
در تاریخ 1400/02/04 منتشر شده
است.
17,112
بـار بازدید شده