Html file Attachment Preview Image

Here I will show How we Can see a preview when we attach a file  to file input using JavaScript.

What we need

  • HTML-5 file input field.
  • An element(container) where we will see the preview of the image. If the attach file is not image we will show the file name inside the preview container.This container name will be passed as an attribute(data-preview-container) of file input.
  • We will use jQuery.(I am using jquery-2.1.1.js)
  • A JavaScript file(myscript.js) where we will write JavaScript code for file input.

Now our html code will be like this

<body>
    <script src="jquery-2.1.1.js"></script>
    <input type="file" data-preview-container="#preview" name="myfile">
    <div id="preview">
    </div>
    <script type="text/javascript" src="myscript.js"></script>
 </body>

Now Our myscript.js will be like this

$(document).on("change", ":file", function(event)
{
    if(this.files && this.files[0])
    {
        var file=this.files[0];
        var file_type=file.type;
        var container=$(this).attr('data-preview-container');
        if(file_type && file_type.substr(0,5)=="image")//if the attach file type is image
        {
            var path=URL.createObjectURL(file);
            if(container)
            {
                var img_tag='<img  src="'+path+'" >';
                $(container).html(img_tag);
            }
        }
        else if(container)//if not image check if preview container is set adn show the file name
        {
            $(container).html(file.name);
        }
        else
        {
            //nothing to do
        }
    }
    else
    {
        //nothing to do no file attached
    }
});

Now if we attach any image it will show that image inside preview div and if the file is not image it will show the file name.
Actually it shows the full image.
we can set image height or width property to show the image as we want to see.

Lets Improve our code more dynamically

  • we can set another attribute(data-preview-height) to our file input which will be our preview height.
  • If preview height is not set  we will use default height 200

Now our myscript.js will be look like this

$(document).on("change", ":file", function(event)
{
    if(this.files && this.files[0])
    {
        var file=this.files[0];
        var file_type=file.type;
        var container=$(this).attr('data-preview-container');
        if(file_type && file_type.substr(0,5)=="image")//if the attach file type is image
        {
            var preview_height=200;
            if($(this).attr('data-preview-height'))
            {
                preview_height=$(this).attr('data-preview-height');
            }
            var path=URL.createObjectURL(file);
            if(container)
            {
                var img_tag='<img height="'+preview_height+'" src="'+path+'" >';
                $(container).html(img_tag);
            }
        }
        else if(container)//if not image check if preview container is set adn show the file name
        {
            $(container).html(file.name);
        }
        else
        {
            //nothing to do
        }
    }
    else
    {
        //nothing to do no file attached
    }
});

Note

  • This tutorial only for single file attachment. For multiple file attachment We can use for loop for each item of this.files and show all image as preview.
  • This does not resize the image.It only show the image.We will learn latter how to resize image using JavaScript and send to server.
  • Image preview container can be any element and value of data-preview-height should be jQuery selector.
  • We can Improve our code without using jQuery.
Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *