How to preview an uploaded image before it is uploaded by a user
Some of the requirements for this lesson include the following
- Introduction to html
- Knowledge of html.
- Little knowledge of css
With that let us get started
First thing we have to create a folder and in it, we will create two files one named index.html and the other named image.js
Also it consist of two file input fields one for multiple file and the order for choosing only a single image.
Now let’s open our image.js.
The image.js file is where we are going to be doing the major work and you have to practice rather than just copying if you really want to understand it fast.
Each line is perfectly layed out with a perfect comment that will eneable you to easily understand it and it is advisable that you type it using your favorite editor and by so doing you will understand.
const is usded in the variable assignment to variables that we wont change again throught out the apploication.
let is used for variables that we will manipulate later.
I also created two functions that are being called by the eventListeners. These eventListeners listen to change event on the input field and execute the associated function.
In the css file I just did simple style to give the content dive some good margin and I laso give the image a sityle to give it a good width amd height so that it dosent occupy the while of the screen.
The whole code for this tutorial are hosted on git hu and if you want to download it vist the repo and download. If you have any issues you can use the issue tracker by github or ciomment here and I will attrend to you speedily.
Thank you for reading if you enjoy the lesson you can go ahead and subscribe to our mailing list so that you will be the first to receive our contents of this type when published.
To receive weekly newsletter from us signup below, we dont spam, and your information is secure with us