Image Preview Before Upload With Simple Javascript

---

This post describes how to preview an image before uploading it to the server by using javascript step by step. using FileReader and jquery.

There are many methods to do this task. Some of them are through Jquery and some through pure JavaScript.

So let’s start. Here is the result of the code

Here is the HTML form code

 <form action="" method="post">
        <input type="file" accept="image/*" onchange="imagePreview(event)"> 
        
        <button type="submit" class="btn btn-primary">Submit</button>
        <br>
        <img id="imageID" style="width: 30%;" />
        
    </form>

Here is the simple Javascript code

   <script>
    var imagePreview = function(event) {
        var imageID = document.getElementById('imageID');
        imageID.src = URL.createObjectURL(event.target.files[0]);
        imageID.onload = function() {
        URL.revokeObjectURL(imageID.src) 
        }
    };
    </script>