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
How To Generate PDF and Send Email In Laravel 8
How To Generate PDF and Send E...

In this tutorial we will see how to generate pdf and send email in laravel 8. For generating PDF file we will use l...

Read More

Dec-20-2021

How to Upload File on the FTP Server Using PHP
How to Upload File on the FTP...

In this small post i will show you how to upload file on the ftp server using php. As we know there are many ftp functio...

Read More

May-20-2021

How To Login With Magic Link In Laravel 9
How To Login With Magic Link I...

In this article, we will see how to login with magic link in laravel 9. Here, we will learn passwordless login with...

Read More

Feb-01-2023

Laravel 10 Form Validation Example
Laravel 10 Form Validation Exa...

In this article, we will see the laravel 10 form validation example. Here, we will learn about basic form input with lar...

Read More

Mar-22-2023