August 4, 2012

display image preview before it upload using PHP and JavaScript


Put this code between <head>...</head> tag.

<script type="text/javascript">
   function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
        $('#test').attr('src', e.target.result);
       }
        reader.readAsDataURL(input.files[0]);
       }
    }
</script>

Put this code in main body.

<form id="form1" runat="server">
<input onchange="readURL(this);" type="file" />
      <img alt="Image Display Here" id="test" src="#" />
  </form>

Enjoy :
-

52 comments:

  1. TonyJuly 17, 2013 at 10:16 AM

    Holy crap, this is short, simple and actually works! Thanks so much for posting.

    Is there any residual data saved somewhere each time an upload takes place? Does something have to be reset, deleted, or cleared somehow?

    ReplyDelete
  2. UnknownAugust 29, 2013 at 6:41 PM

    thanks for this good one script

    ReplyDelete
  3. UnknownSeptember 9, 2013 at 5:51 PM

    its de best

    ReplyDelete
  4. RocknowSeptember 27, 2013 at 8:13 PM

    Thanks! This is a perfect solution!

    ReplyDelete
  5. UnknownOctober 2, 2013 at 1:46 PM

    you are the best !

    ReplyDelete
  6. sami ullah kaifiOctober 7, 2013 at 12:36 PM

    thanks dear ....

    ReplyDelete
  7. SuRaJ pAwArOctober 22, 2013 at 8:30 PM

    fantastic..!!! this was very usefull...!!!! thanks a ton dude..!!!

    ReplyDelete
  8. UnknownNovember 17, 2013 at 11:00 PM

    This rily cool. does anyone know how to resize the preview image?

    ReplyDelete
  9. umesh dhawanDecember 18, 2013 at 12:03 AM

    Thanks, this is really very useful....!!!

    ReplyDelete
  10. UnknownJanuary 22, 2014 at 4:07 PM

    Thanks, really a good stuff.., but its not working with IE8 any help Appreciated..!!

    ReplyDelete
  11. ShahidJanuary 30, 2014 at 12:16 PM

    Its working good in Firefox and Chrome but not in IE browser

    ReplyDelete
  12. Web DevelopmentFebruary 13, 2014 at 11:43 PM

    thnx Dear

    ReplyDelete
  13. AnonymousMarch 4, 2014 at 12:34 PM

    Not display image preview, please help...

    ReplyDelete
    Replies
    1. montu khantMay 12, 2015 at 12:46 AM

      Please write error here, I help you to solved that.

      Delete
  14. sumanMarch 8, 2014 at 5:04 PM

    same problem Not display image preview

    ReplyDelete
    Replies
    1. montu khantMay 12, 2015 at 12:47 AM

      Please write error here, I help you to solved that

      Delete
  15. UnknownMarch 27, 2014 at 4:56 PM

    thanks for help.

    ReplyDelete
  16. UnknownApril 5, 2014 at 6:28 PM

    it doesn't show jpg images :P, ithink it cant be done widout ajax after all

    ReplyDelete
  17. irfanMay 5, 2014 at 4:50 PM

    Thanks bro

    ReplyDelete
  18. UnknownJune 26, 2014 at 11:40 PM

    i upload multi file but show 1 file.u can help me , please ?

    ReplyDelete
  19. pawanSeptember 16, 2014 at 1:22 PM

    Thanks a lot. May GOD bless you!
    Pawan chouhan

    ReplyDelete
  20. AnonymousNovember 12, 2014 at 8:55 PM

    Awesome dude! May God bless you :)

    ReplyDelete
  21. AnonymousApril 6, 2015 at 11:41 AM

    Picture not displaying

    ReplyDelete
    Replies
    1. montu khantMay 12, 2015 at 12:45 AM

      Please write error here, I help you to solved that.

      Delete
  22. Rejeesh K,NairMay 11, 2015 at 11:13 AM

    Thanks a lot. Its working fine!

    ReplyDelete
  23. montu khantMay 12, 2015 at 12:45 AM

    Thanks To All!

    ReplyDelete
  24. UnknownSeptember 5, 2015 at 10:38 AM

    Thankyou for your post, but not showing image and not showing any error, only showing "alt" text

    ReplyDelete
  25. prashant impingeSeptember 24, 2015 at 12:57 PM

    For this to work add above script basic jquery file needs for its working in script tag and or add following in script tag src attribute

    src="//code.jquery.com/jquery-1.10.2.js"

    ReplyDelete
  26. UnknownOctober 3, 2015 at 11:54 AM

    its not working in local



    ReplyDelete
    Replies
    1. montu khantOctober 28, 2015 at 1:16 AM

      @Ashish

      can you please explain exact error which generated in your local server, So I help you to solve that.

      Enjoy!

      Delete
  27. AnonymousDecember 19, 2015 at 1:58 PM

    Nice Code

    ReplyDelete
  28. wakibulDecember 29, 2015 at 4:40 PM

    Thanks... it helped a lot.

    ReplyDelete
  29. GunbardoFebruary 18, 2016 at 5:00 AM

    Hi, did not work for me. Probably because the runat="server" script requires asp.net, which I don't understand what it means. I'm working with normal php files, nothing special. Help please?

    ReplyDelete
    Replies
    1. montu khantFebruary 23, 2016 at 2:02 PM

      Can you try with remove runat="server" from 'form' tag?

      If any issue there after removing then tell me :)

      Delete
  30. UnknownJune 21, 2016 at 3:57 AM

    Amazing man, thanks

    ReplyDelete
  31. UnknownJune 28, 2016 at 10:18 PM

    thanks so much but how do i go about it now that am uploading multiple images at once please....waiting please

    ReplyDelete
  32. AnonymousJuly 23, 2016 at 9:50 AM

    Very Helpful! Thank you!

    ReplyDelete
  33. Prachi BedekarSeptember 18, 2016 at 4:13 PM

    thank you

    ReplyDelete
  34. UnknownFebruary 12, 2017 at 11:31 AM

    my it wont display image?

    ReplyDelete
    Replies
    1. montu khantFebruary 24, 2017 at 1:26 AM

      @Ness: Please send me your exact problem when upload any image? So I try to help you to solve that.

      Thanks.

      Delete
    2. UnknownMay 19, 2017 at 7:29 PM

      i want to upload two image at same form how can i apply this logic ?

      Delete
    3. dominicApril 1, 2018 at 11:19 AM

      multiple images, multiple previews, id love to know too

      Delete
  35. UnknownOctober 23, 2017 at 9:21 PM

    thanks ...it works..but it doesnt if i use for multiple img,, can help?

    ReplyDelete
  36. epullijalNovember 10, 2017 at 8:13 AM

    damn thanks alot it's work

    ReplyDelete
  37. UnknownFebruary 6, 2018 at 6:15 PM

    this is great man! thanks for this/

    ReplyDelete
  38. Just another guyFebruary 17, 2018 at 8:26 AM

    I'm testing this on Chrome, and it doesnt work.
    All it shows it's a broken image before and after I select the image.
    I'm testing on a blank new page with the exact code showing here. Any clues?

    ReplyDelete
  39. UnknownJune 12, 2018 at 4:19 PM

    but sir it is only one input valid
    but i use four input and different different image upload but image is not show preview

    ReplyDelete
  40. UnknownOctober 20, 2018 at 7:08 PM

    This will not work for me. It only shows the image alt text

    ReplyDelete
  41. UnknownOctober 25, 2018 at 1:02 PM

    OH! you are a life saver! thanks a lot dude

    ReplyDelete
  42. Sharon JudithFebruary 11, 2020 at 4:55 PM

    Woooh, this script worked for me, thanks a lot

    ReplyDelete
  43. Nachiket PanchalFebruary 27, 2020 at 5:20 PM

    I found the perfect solution.

    Image preview before upload

    ReplyDelete

Subscribe to: Post Comments (Atom)

Integrating Google reCAPTCHA v3 in HTML Form with PHP

  What is Google reCAPTCHA v3? Google reCAPTCHA is a free service that helps protect websites from spam and abuse. reCAPTCHA v3 is the lates...