Create An Advanced File Upload Button With HTML & CSS.

Use HTML and CSS to create an advanced file upload button and create a JQuery image live preview.

Last Update: May 07, 2021

Create An Advanced File Upload Button With HTML & CSS.

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.


index.html

<!--
    Author: Mr Parallel
    Tutorial: Advanced File Upload Button
    Contact: stetcha@panthera-clan.co.za
-->

<style>

    .uploader-div{
        overflow: hidden;
        margin: 100px 200px;
        display: block;
        text-align: center;
    }
    
    #avatar-upload{
        text-align: center;
    }
    #avatar-upload img{
        height: 225px;
        width: 225px;
        border-radius: 100%;
        margin-top: 10px;
        cursor: pointer;
    }
    #avatar-upload input[type='file']{
        display: none;
    }  
</style>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" type="text/javascript"></script>
<script>
    function changeAvatar(){
        $('#avatar').on('change',function (){
            $('#removeImage').css({"display":""});
            document.getElementById("avatar_value").setAttribute('value','Image Changed');
            var filePath = URL.createObjectURL(event.target.files[0]);
            document.getElementById("avatar-image").src = filePath;
        });
    }
</script>


<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Advanced file uploader button</title>
    </head>
    
    <body>
        
        <div class="uploader-div">
        
            <h2>Upload Image</h2>
            <label id="avatar-upload">
                <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' />
            </label>
            
        </div>
        
    </body>

</html>


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.


Regards

Mr Parallel