Preview image before upload jQuery | Profile image upload

When developing a website or any user form where image is required, it is a good practice to preview the image before it’s get actually uploaded. This will help user to cross-verify what he has chosen and how it is going to look. Also, the user can change the image easily before upload without doing repetitive uploads.

In this tutorial we’ll learn step by step how we can easily implement image preview before upload using jQuery. Follow this tutorial step by step to learn how it works –

STEP 1

The very first step is to include the jQuery library to your HTML page. You can add this file in head section or before </body> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Here we are using google cdn to include jQuery, you can also download jQuery and include from local url.

STEP 2

Once we’ve included the jQuery, we can now code in jQuery. We will declare a function and name it as filePreview. In this function we’re going to use build-in jQuery function FileReader(). Once the file is chosen by user, we’ll then render the chosen image and preview it under our form.

function filePreview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#uploadForm + img').remove();
            $('#uploadForm').after('<img src="'+e.target.result+'" width="450" height="300"/>');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

We’ll call this filePreview method onchange event of our HTML input.

STEP 3

Now as we’ve created our function to handle file upload, we’ll now create a HTML form, from where user will going to select the image for uploading. Copy the following code within the body of your HTML page.

<form method="post" action="upload.php" enctype="multipart/form-data" id="uploadForm">
    <input type="file" name="file" id="file" onchange="filePreview(this)" />
    <input type="submit" name="submit" value="Upload"/>
</form>

Now as the user will select any image, it is going to get preview after our form as we’ve used .after method in jQuery on our form element #uploadForm

You can now simply use your backend code to store the uploaded image to your server.

You can also copy this complete code in your file to get started –

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Upload Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        function filePreview(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#uploadForm + img').remove();
                    $('#uploadForm').after('<img src="' + e.target.result + '" width="450" height="300"/>');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</head>
<body>
    <form method="post" action="upload.php" enctype="multipart/form-data" id="uploadForm">
        <input type="file" name="file" id="file" onchange="filePreview(this)" />
        <input type="submit" name="submit" value="Upload" />
    </form>
</body>

One thought on “Preview image before upload jQuery | Profile image upload

Leave a Reply

Your email address will not be published. Required fields are marked *

Releated