How to Preview an Image Before Upload using JavaScript

Publicado el: 24 abril 2021
en el canal de: 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

En esta página del sitio puede ver el video en línea How to Preview an Image Before Upload using JavaScript de Duración hora minuto segunda en buena calidad , que subió el usuario Knowledge Thrusters 24 abril 2021, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 18,638 veces y le gustó 335 a los espectadores. Disfruta viendo!