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

Image Preview Before Upload
Image Preview Before Upload

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>
        <img id="imageID" style="width: 30%;" />

Here is the simple Javascript code

    var imagePreview = function(event) {
        var imageID = document.getElementById('imageID');
        imageID.src = URL.createObjectURL([0]);
        imageID.onload = function() {