Use HTML and CSS to create an advanced file upload button and create a JQuery image live preview.
Last Update: May 07, 2021
Hello friend, today we are going to create a simple advanced file upload button with HTML and CSS. We will also create a live image preview with JQuery, by live image preview, we are simply saying that, whenever you select the image you want to upload, you will able to see it first before saving changes, just like uploading a profile picture on social media. If this whole statement is confusing you, then worry no more, we will dive into the practical section. So in this tutorial we are just going to use one file only, meaning we will just have an "index.html" and this will have "CSS, JQuery, and HTML" contents. Well lets dive into it.
Author: Mr Parallel
Tutorial: Advanced File Upload Button
margin: 100px 200px;
var filePath = URL.createObjectURL(event.target.files);
document.getElementById("avatar-image").src = filePath;
<title>Advanced file uploader button</title>
<input type="file" name="avatar" id="avatar" accept=".png, .jpg,.jpeg,"/>
<input type="hidden" name="avatar_value" id="avatar_value"/>
<img id="avatar-image" onclick='changeAvatar()' src="myimage.png" alt='The image' />
And the output will be like the first image on this tutorial. You will notice that whenever you click on the image, the file selector dialog is triggered whereby you will be able to choose an image. This is just for image files, but you can choose others according to your own preference. By the way, if you choose an image, the default image changes to the image you have just selected.
And well that's it, an advanced file upload button with image live preview.
Source Code: Download Source Code
Hope this tutorial benefits you.