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

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:

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

HTML:

CSS used for image div in which we preview thumbnail:

That’s all:

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:
  • toreno

    before uploading photo – can you hide the block ?

    • madhuri

      unable to get the image

  • Paul Maher

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

  • lanner

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

  • Manoz Kumar

    thank you , this coding working……

  • meor

    the coding works but you must include the jquery library

  • Reshovski

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

  • ItsMe

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

  • Sage

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

    • huzoorbux

      what error you are getting in js. try to debug with firebug.

  • Kalyan P

    not working in Safari. Screenshot Attached

    • Hitesh

      Yes. It is not working for Safari.

  • Tejas

    thnx for the code

  • Jack

    $(‘#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.

  • mili

    thnakyou but how to work in same manner for multiple files

  • j vinay

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

    • huzoorbux

      Its working fine check our demo and please try to debug error and post error here.

  • tony

    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

  • tony

    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

  • Siddhu Siddhartha Roy

    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

      What is auto?

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

      • Siddhu Siddhartha Roy

        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

  • ashok64554

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

  • ram

    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..

  • 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

    • You can do by using ForLoop, i.e get the count of files and loop over it. or check this article Preview Multiple Image before upload it

      I know i am late to comment here, but my comment would be useful for other future readers. πŸ™‚

      • Thanks for your reply Satinder,
        I have fixed this issue by using same class name in two file input, and created filereader object using that common class name.
        It works fine for me.
        Thanks again for your reply. πŸ™‚

      • Thanks for your reply Satinder,
        I have fixed this issue by using same class name in two file input, and created filereader object using that common class name.
        It works fine for me.
        Thanks again for your reply. πŸ™‚

      • Swapnil Akolkar

        thank you Satinder singh

  • 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

  • Ay

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

  • manasa

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

  • Ajay Kumar

    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

  • Muddasir Abbas

    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

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

  • sakshi

    not able to display on google chrome