How to Preview an Image Before Upload using JavaScript

hello everyone and welcome back to my channel so today i will show you how to preview an image before upload using javascript so let's get started so i have created this view i have one input type file here so i'll be selecting some file and preview will be displaying after that so let me show you code i have given title and after that there is form input type file with name upload file then a submit button and i have included jquery so what i'll be doing is on change of my input i'll be getting the value of my input type and i'll be creating a url out of that and i'll be displaying that as an image so now let me show you how to do it so firstly give id to input type file let's say upload file and write on change get image preview in brackets let's say pass an event in script write a script tag before body tag write function define the function get image preview inside the function let me just also define one day before that for my image preview so write given id in preview and let's just console.log event dot target dot files at index 0 let's go and check in browser so refresh now select a file let's select one image and in console you can see file is coming so there is name size its detail is coming so now let's create a url from this so write url dot create object url so what basically does it like create a url that points to file on disk like we use this for like to display like basically an image from the user system on a web page so server needs to know like about the file so there is no need to upload it so you just want to load the file into your web page so now let's get the div in which we want to display our preview so write image div equals to document dot get element by id that is preview so now let's create our image so write new image equals to document dot create element write image in that so now write new image dot src equals to image so i'm just defining the src of my image to the url of my image then append this child to my image div so now let's go and refresh select one image and you can see preview is there so now let's just give some width to it so write new image dot width equals to 300 again refresh browser then select again one file and you can see it's with it's taking select another one so you can see now previous image is also coming so we don't want that so inspect element in div id preview you can see there are two images so it appended both the child to the step so what we need to do on change of our input type file we need to blank this uh preview div so write like image div dot in our html equals to blank so now let's go and again check in browser so refresh the browser again choose one file so it's displaying the preview after that again choose one file and so now it's replacing the previous one again choose one file so you can see now it's just showing one preview it's not showing the preview of my previous file so that's what we wanted so that's the only js code you need to write to display an image preview in your browser or web page so i hope you like this video please like share and subscribe to my channel thank you so much for watching

Channel: Knowledge Thrusters

Views: 17,112

Keywords: Overview, HTML5, 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, image javascript, upload image in php mysql, javascript url, javascript create element, createobjecturl javascript, event in javascript, event target in javascript, javascript tutorial

Id: _u_GiyTcsjA

Length: 4min 54sec (294 seconds)

Published: Sat Apr 24 2021