How to Preview an Image Before Upload using JavaScript

Опубликовано: 24 Апрель 2021
на канале: Knowledge Thrusters

18,638

335

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

На этой странице сайта вы можете посмотреть видео онлайн How to Preview an Image Before Upload using JavaScript длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Knowledge Thrusters 24 Апрель 2021, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 18,638 раз и оно понравилось 335 зрителям. Приятного просмотра!

142