Sarav's Weblog

Technical Articles for RoR Developers

Preview of an image before it is uploaded

45 Comments Posted by on March 14, 2012

Might be a old topic. But still, it will be useful for the beginners.

Using jQuery we can achieve this, The preview action will be executed all in the browser without using Ajax to upload the image. Here is the example,



<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.width(150)
.height(200);
};

reader.readAsDataURL(input.files[0]);
}
}
</script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>

Programming, Rails , , , , , ,

45 responses to “Preview of an image before it is uploaded”

  1. pchan_august April 20, 2012 at 1:39 pm

    Hello,

    I can see that there is a bug in your code. When I upload a file, the image does not preview immediately. Preview happens after uploading new file.

  2. pchan_august April 20, 2012 at 1:41 pm

    okay, i have already fixed the bug. In my case, I just replaced “input.files && input.files[0]” in the condition with the current value of the file field. It worked. ^^,

  3. Saravanan April 20, 2012 at 2:32 pm

    @pchan_august – Cool

  4. Petrov June 19, 2012 at 9:32 pm

    I don’t know why it’s not working. Itried to understand what pchan_august said, but after thousand changes, nothing happens!

  5. Raghbendra August 4, 2012 at 5:43 pm

    Hello ,

    This is not working in IE.Can you please suggest me tha how it will work in iE ?

    Thanks in advance

  6. Gayathri August 14, 2012 at 3:01 pm

    Hey cool,
    I was searching for this functionality. Thanks for the Post.

  7. emerald August 29, 2012 at 9:19 pm

    I encounter lots and lots of this kind of sample. But not working in IE. Any suggestion?????

  8. Anonymous October 31, 2012 at 3:02 pm

    This is not working in IE.Can you please suggest me tha how it will work in iE ?

  9. Abhishek October 31, 2012 at 3:03 pm

    This is not working in IE.Can you please suggest me tha how it will work in iE ? other wise it is useless

  10. Prit November 8, 2012 at 3:10 pm

    Test

    function showPreview(ele)
    {
    $(‘#imgAvatar’).attr(‘src’, ele.value); // for IE
    if (ele.files && ele.files[0]) {

    var reader = new FileReader();

    reader.onload = function (e) {
    $(‘#imgAvatar’).attr(‘src’, e.target.result);
    }

    reader.readAsDataURL(ele.files[0]);
    }
    }

    Try just

  12. Prit November 8, 2012 at 3:12 pm

    <!–

    –>

  13. Prit November 8, 2012 at 3:15 pm

    Test use this script in form and input type file, name filUpload,id filUpload onchang showPreview(this) and img id is imgAvatar

    function showPreview(ele)
    {
    $(‘#imgAvatar’).attr(‘src’, ele.value); // for IE
    if (ele.files && ele.files[0]) {

    var reader = new FileReader();

    reader.onload = function (e) {
    $(‘#imgAvatar’).attr(‘src’, e.target.result);
    }

    reader.readAsDataURL(ele.files[0]);
    }
    }

    <!–

    –>

  15. sreejesh December 27, 2012 at 1:01 pm

    Thanks dear …………. it works

  16. lekan January 31, 2013 at 10:21 pm

    its not working form mo on IE please help me out

  17. Anonymous February 16, 2013 at 2:32 pm

    i tried ur example its working ,thanks

  18. purusottama March 7, 2013 at 12:17 pm

    Hi am try this what m search it that . a bug in IE its not work so any one solve this
    please help.
    thanks in advance

  19. Anonymous April 3, 2013 at 12:17 pm

    doesn’t work in safari 5.x.x how i could i use this for safari browser………???

  20. Anonymous April 19, 2013 at 12:48 am

    it’s not working on IE !! anyone solved that??

  21. Puce April 23, 2013 at 4:05 am

    Hi there,
    You just saved my day.
    I paste here the code of unobtrusive javascript, that everybode loves 😀

    $(document).ready(function(){
    $(“#fileFieldId”).change(function(){
    if (this.files && this.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
    $(‘#img_prev’).attr(‘src’, e.target.result).width(150).height(200);
    };
    reader.readAsDataURL(this.files[0]);
    }
    });
    });

    You just have to put the id of your file field and it will work as a charm. (Don’t forget the div which contains the image to preview :P)

  23. Mansoorkhan Edensoftwares May 13, 2013 at 9:56 am

    Thank you. Its working in Chrome and FireFox, but not in Safari.. Please help me to fix it?
    Thank you

  24. Pingback: Cakephp | Membuat Thumbnail Image (Upload File) dengan Js ImgAreaSelect

  25. anji May 30, 2013 at 2:43 pm

    hi……..It’s working…

  26. Dinesh Kumar V July 16, 2013 at 12:48 pm

    Hi
    Thanks for your post it’s really helps me.but i need the image path too but it returns c:\fakepath\
    like this image src value by javacript

  27. rakesh Kundu July 22, 2013 at 2:08 pm

    thanku so.. much

  28. Pingback: Before save Image preview on upload | Learning with Earning

  29. harendra October 18, 2013 at 5:43 pm

    this is working code………thanks.

  30. senol December 1, 2013 at 10:03 pm

    hello there are multi preview sample ?

  31. Anonymous January 3, 2014 at 4:52 pm

    Ya its working

  32. Shubhadeep Chattopadhayay February 17, 2014 at 3:55 pm

    I can see that there is a bug in your code. When I upload a file, the image does not preview immediately. Preview happens after uploading new file. You have solved it pchan_august. Please post the code after bug fixing. Please…

  33. Anonymous March 1, 2014 at 10:38 am

    It’s working…thanks .

  34. Chris van der Meer March 10, 2014 at 6:44 pm

    How do i let this fill in a rails form ?

  35. Chris van der Meer March 10, 2014 at 6:48 pm

    I have a and i want it to preview the image. But i cant seem to implement it in this code.

  36. Anonymous March 18, 2014 at 7:20 pm

    Thanks a lot for this information…its working n my problem solved.

  37. kolitha gunathilaka March 20, 2014 at 2:17 pm

    Thanks. It works perfectly.

  38. Pingback: [RESOLVED]How to preview image before upload using jquery | ASP Questions & Answers

  39. Pingback: [RESOLVED]How to preview image before upload using jquery | ASP Web Form Data Control

  40. Pingback: [RESOLVED]How to preview image before upload using jquery | ASP.NET MVC

  41. hatha bp July 18, 2014 at 6:35 am

    Hello to every one, since I am in fact keen of reading this weblog’s post
    to be updated regularly. It includes fastidious
    material.

  42. JACKOB MAJANA August 7, 2014 at 12:21 am

    Thank you guys for your help

  43. ganaysa August 27, 2014 at 12:51 pm

    Nice Code, thank you !

  44. Wahyudi Ariannor December 15, 2014 at 7:47 am

    Terima kasih from Indonesia

  45. Pingback: Best way to show image previews before upload in rails & carrierwave

Leave a comment