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







Follow us
facebooklogo github instagram twitter

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock or some other adblocking software which is preventing the page from fully loading.

We need money to operate the site, and almost all of it comes from our online advertising.

Please add websolutionstuff to your ad blocking whitelist or disable your adblocking software.

×