Click here to Skip to main content
11,803,019 members (58,840 online)
Rate this: bad
Please Sign up or sign in to vote.
See more: Javascript jQuery
I want to show image preview before image get upload

Anyone have any idea how to implement this with using javascript or jquery

Thanks in Advance
Posted 22-Apr-13 3:03am
Member 10315184 at 4-Oct-13 8:53am
your answer: "Yes, I know why it doesn't work for you. Because you coded something wrong. Do you have any other questions?"

ho, thanks for your great communication... you are so good my Lord....
maybe yes, this can be. But i just follow and copie/paste this solutions and try it and it simply not work for me.
I tell you i use rails 4 framework... maybe there is something with that ?
Or maybe on web-browser have some secure ?
I don't said it is the fault of someone or i don't judge what is a question or not.... i just need to undersatnd with some humility.

So... maybe you don't care or i don't know why you answer like that...
i hope you will feel better.
Member 10316121 at 4-Oct-13 16:14pm
so... my code has no error, i just use yours (who is not bad on some use) without success (but you choose to judge so quick, so strong...), but for some protect reason and/or specificities, sometimes some other codes can works for do it (solution number 3), and then i'm from rails 4 framework with webrick server (works on firefox 25 and chrome 29, not on Safari):

function readURL() {
var input = document.getElementById('FilePhoto');
var fReader = new FileReader();
fReader.onloadend = function(event){
var img = document.getElementById(“blah”);
img.src =;

(no need function event call... "onchange" option from file celetion field is ok, and also, no need var "this" on function called from event)

Solution from chakroun yesser, here:">

so... i answer my own to myself... and hope some other peoples from your team could said you to go slowly before judge other people so quickly and so strongly, and try to go back school for understand how is construct a question... (and so... it is really a shame...).
If you don't know guys, just said: I'm sorry, i don't know.
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

       function readURL(input) {
           if (input.files && input.files[0]) {
               var reader = new FileReader();
               reader.onload = function(e) {
       $("#filePhoto").change(function() {

      <asp:FileUpload ID="FilePhoto" runat="server" CssClass="fileupload" onchange="readURL(this)" /><br />
       <img id="blah" src="#" alt="Preview" width="100" height="100" />
Bharathhp at 15-Oct-13 3:00am
hi, this above mentioned code is not working in IE10 can u please help...

Thanks in Advance
Sai Prasad anumolu at 27-Feb-14 2:13am
Thank u very much
Member 10520627 at 26-Feb-14 5:19am
yahoo! good solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 335
1 KrunalRohit 291
2 F-ES Sitecore 270
3 CPallini 270
4 Sergey Alexandrovich Kryukov 234
0 OriginalGriff 2,950
1 Maciej Los 1,910
2 KrunalRohit 1,862
3 CPallini 1,735
4 Richard MacCutchan 1,157

Advertise | Privacy | Mobile
Web01 | 2.8.151002.1 | Last Updated 22 Jul 2014
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100