How To Preview Image Before Upload In jQuery

Websolutionstuff | Jul-15-2022 | Categories : PHP jQuery

In this article, we will see how to preview an image before uploading it in jquery. You can use the JavaScript readAsDataURL() method of the FileReader object to read the contents of the specified file. The readAsDataURL the method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered.

So, let's see the preview image before uploading javascript, preview images using jquery.

Example:

how to read an image file using this method and preview it in the browser before it is uploaded to the server.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To Preview Image Before Upload In jQuery - Websolutionstuff</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function previewFile(input){
        var file = $("input[type=file]").get(0).files[0];
 
        if(file){
            var reader = new FileReader();
 
            reader.onload = function(){
                $("#previewImg").attr("src", reader.result);
            }
 
            reader.readAsDataURL(file);
        }
    }
</script>
</head> 
<body>
    <form action="image_upload.php" method="post">
        <p>
            <input type="file" name="image_file" onchange="previewFile(this);" required>
        </p>
        <img id="previewImg" src="/images/example.png" alt="Placeholder">
        <p>
            <input type="submit" value="Submit">
        </p>
    </form>
</body>
</html>

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Two Factor Authentication With SMS
Laravel 9 Two Factor Authentic...

In this article, we will see laravel 9 two-factor authentication with SMS. we will send an OTP SMS to the mobile nu...

Read More

Sep-26-2022

How To Auto Select Country Using IP Lookup In jQuery
How To Auto Select Country Usi...

In this article, we will see how to auto select a country using IP lookup in jquery. Here, we will learn about auto...

Read More

May-15-2023

How to Format Number with 2 Decimal in PHP
How to Format Number with 2 De...

Hey there! If you've ever needed to work with numbers in PHP, you probably know how important it is to format them p...

Read More

Feb-26-2024

Multiple ways to Validate Email Addresses in Laravel 10
Multiple ways to Validate Emai...

Hey there! Have you ever wondered how websites ensure that the email addresses you provide are valid? In this article, I...

Read More

Mar-04-2024