Click here to Skip to main content
15,884,237 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
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
Comments
[no name] 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 10392439 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.

XML
<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>
 
Share this answer
 
v3
Comments
Bharathhp 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 27-Feb-14 2:13am    
Thank u very much
Member 10520627 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)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900