Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript jQuery
Hi
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 4:03am
asbis1.2K
Comments
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.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
var img = document.getElementById(“blah”);
img.src = event.target.result;
}
}
 
(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: http://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepath">http://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepat
 

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
good
Please Sign up or sign in to vote.

Solution 2

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

<div>
      <asp:FileUpload ID="FilePhoto" runat="server" CssClass="fileupload" onchange="readURL(this)" /><br />
       <img id="blah" src="#" alt="Preview" width="100" height="100" />
</div>
  Permalink  
v3
Comments
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
Thnx

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

  Print Answers RSS
0 OriginalGriff 325
1 DamithSL 265
2 CPallini 235
3 Maciej Los 190
4 Sergey Alexandrovich Kryukov 189
0 OriginalGriff 5,455
1 DamithSL 4,422
2 Maciej Los 3,860
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,010


Advertise | Privacy | Mobile
Web04 | 2.8.141216.1 | Last Updated 22 Jul 2014
Copyright © CodeProject, 1999-2014
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