Menu Close

How to show preview image of input field


Now,  we’re going to show you how to show a preview image of a file that you upload using the HTML input type file. Let’s image you have the following HTML markup:

<img id="preview" alt="Your Image Preview" /> 

We’re going to add a bit of CSS styling to hide the image initially and only display the image once the file has been uploaded.

img {
  max-width: 180px;
  display: none;

input[type=file] {
  padding: 10px;
  background: #2d2d2d;
  color: #FFF;
  display: block;
  margin-bottom: 20px;

Here, we just need the jQuery function to show the preview and add the uploaded file to replace the image, you can do this as follows:

function readURL(input) {
  if (input.files &amp;&amp; input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {


If you take a look at this blog post, you will see how you can take this one step further to make it even more visually appealing .

This is a pretty cool feature to add to file uploads to make them a bit more visually impressive to the user.

Posted in HTML, jQuery, Web Technologies

You can also read...