March 7, 2014 3:29 pm

How to show image thumbnail before upload with jQuery

Today I am going to show you how to show image thumbnail before uploading image with jQuery, we wrote many tutorials on image upload on PHPGang.com. If you want to give your users an option that they can see image preview before uploading that image to server then you must use this script. We used jQuery to show you preview of thumbnail not complete procedure to upload image using PHP you can read our previous tutorial for upload image to server.

How to show image thumbnail before upload with jQuery

[wpdm_file id=88]DEMO

Read More about Image Upload:

How to Upload multiple images jQuery Ajax using PHP

How to Upload Image using jQuery with progress in PHP

File uploading with PHP

jQuery:

<script type="text/javascript">
$(function() {
    $("#uploadFile").on("change", function()
    {
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

        if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file

            reader.onloadend = function(){ // set image data as background of div
                $("#imagePreview").css("background-image", "url("+this.result+")");
            }
        }
    });
});
</script>

Above jQuery work on onChange event of your file upload field and add image in background of give div.

HTML:

<div id="imagePreview"></div>
<input id="uploadFile" type="file" name="image" class="img" />

CSS used for image div in which we preview thumbnail:

<style>
#imagePreview {
    width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}
</style>

That’s all:

[wpdm_file id=88]DEMO

So that’s how you can show image thumbnail before uploading image,I hope you like this tutorial please don’t forget to give us your feedback in comments, you can also download code for free and test it on our demo page.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

37 responses to “How to show image thumbnail before upload with jQuery”

  1. toreno says:

    before uploading photo – can you hide the block ?

  2. Paul Maher says:

    Would be handy to have a clear file field/remove thumnail link as well

  3. lanner says:

    Hello
    How to image is show as crop how to show the full image (with possibility to resize) ?
    Thanks

  4. Manoz Kumar says:

    thank you , this coding working……

  5. meor says:

    the coding works but you must include the jquery library

  6. Reshovski says:

    That’s great article, but how then upload the image file into the folder?

  7. ItsMe says:

    didn’t work. image cannot display but the name appear

  8. Sage says:

    I did try everything, loading all kind of jquery but this thing isnt showing thumbnail. Help me

  9. Kalyan P says:

    not working in Safari. Screenshot Attached

  10. Tejas says:

    thnx for the code

  11. Jack says:

    $(‘#photoUploadImagePreview’).remove();
    $(‘#photoUploadFileLabel’).append($(”))

    Instead of bg image you can also append an img tag, than you have the right relative dimensions too. You only need to set the width in css and no need for an extra div.

  12. mili says:

    thnakyou but how to work in same manner for multiple files

  13. j vinay says:

    Hey Thanks But not working So I need to any Onchange function in Here please help me..

  14. tony says:

    Hello Huzoor,
    In chrome the uploaded image is not scaled to the div’s size and hence only a part of the image can be seen where as in mozilla firefox the uploaded image completely fit’s inside the div.
    Also i found that the thumbnail preview is not visible in IE and safari.
    Humble request you to post a solution for the same.

    Thanks

  15. tony says:

    Hello Huzoor,
    In chrome the uploaded image is not scaled to the div’s size and hence only a part of the image can be seen where as in mozilla firefox the uploaded image completely fit’s inside the div.
    Also i found that the thumbnail preview is not visible in IE and safari.
    Humble request you to post a solution for the same.

    Thanks

  16. Siddhu Siddhartha Roy says:

    What should i do if i upload big image. In css You have fixed height and width values. but i want to auto.
    When i use auto it’s not working. help Me.

    Thank you adavance !

    • huzoorbux says:

      What is auto?

      try to fix it in CSS which is the best way.

      • Siddhu Siddhartha Roy says:

        Yes i tried but i failed.

        If I took big image its cropping the image height and width. because you fix the sizes in css like
        width: 180px;
        height: 180px;

        instead of i use

        width: auto;
        height: auto;
        but no result. Please help me.
        Thank You

  17. ashok64554 says:

    image upload and show thum is fine but how to remove image if i dont want to upload that image?? plz suggest me

  18. ram says:

    thanaks for your tutorial. good one.. now say after this I have a thumbnail of a particular size.. now is it possible to save the thumbnail WITHOUT uploading the image.

    what I want is like when i select a file or set of files.. it should show me a thumbnail. and then with a save button I should be able to save those thumbnail. Insted of uploading the actual file and then re-sizing it. This will help me to fast the upload process of files as only It will be viewed in mobile or in low resolution and save data space with data transfer.

    please give suggestion how I can just create Thumbnali (or a file of small size then actual size) and then save the file to my server without uploading the actual file.

    thanks in advance.. plz. my job is in stake.. guys help me..

  19. How to use two file inputs in a same page using filereader?
    I am using filereader js make encoded url of uploaded image, It is working fine when there is a single file input, but when I am using second file input, filereader throws an error.
    Can you please give solution of this issue?
    Thanks

  20. Best.Guide.Ever.

    Now I am a fan of your site. I landed here while I was searching for my latest post related to Preview image before upload it, and find it nice. Also catched some nice post too. Good work sir ji. Bookmarking this Site!

    Thanks Huzoor Bux

  21. Ay says:

    Tried to upload the previewed image into a file but it gave an “index undefined” error

  22. manasa says:

    Hi sir..
    I copied same code as it is,But image is not displaying Please help me out from this

  23. Ajay Kumar says:

    hello sir,

    Your code is very nice and working in my case but I want to see preview for multiple images. So please help me in this regards

  24. Muddasir Abbas says:

    I need your help regarding this code. It is working but i need to upload and display multiple files all type of files. such as .txt, pdf,jpg extra. please help me. Thanks

  25. great!! your code is working ok. thanks man..

  26. sakshi says:

    not able to display on google chrome

Leave a Reply

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