By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,276 Members | 2,063 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,276 IT Pros & Developers. It's quick & easy.

How can display the image preview before saving an image to folder using cakephp?

P: 25
Hi..

I have a form for storing the details of a student In that form there is a field for uploading the student image .How can i display the image preview of a student ?

If anyone knows please help me . thanks in advance..
Jun 13 '11 #1

✓ answered by omerbutt

one the way i know is javascript
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="../stage/js/jquery-1.4.2.min.js"></script>
  7. <script type="text/javascript">
  8.     function imageURL(input) {
  9.         if (input.files && input.files[0]) {
  10.             var reader = new FileReader();
  11.             reader.onload = function(e) {
  12.                 $('#preview_img').attr('src', e.target.result)
  13.                  .width('auto')
  14.                  .height('auto');
  15.             }
  16.             reader.readAsDataURL(input.files[0]);
  17.         }
  18.     }
  19. </script>
  20. </head>
  21. <body>
  22. <input type="file" class="file" onchange="imageURL(this)" />
  23. <img id="preview_img" style="width:auto; height:auto;" />
  24. </body>
  25. </html>
  26.  
YOU NEED TO CHANGE THE JQUERY SRC WITH YOUR PATH

but this will not work for IE as IE shows URL differently from firefox and chrome so you need to work out to check the navigator agent to get the right path
regards,
Omer Aslam

Share this Question
Share on Google+
3 Replies


omerbutt
100+
P: 638
one the way i know is javascript
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="../stage/js/jquery-1.4.2.min.js"></script>
  7. <script type="text/javascript">
  8.     function imageURL(input) {
  9.         if (input.files && input.files[0]) {
  10.             var reader = new FileReader();
  11.             reader.onload = function(e) {
  12.                 $('#preview_img').attr('src', e.target.result)
  13.                  .width('auto')
  14.                  .height('auto');
  15.             }
  16.             reader.readAsDataURL(input.files[0]);
  17.         }
  18.     }
  19. </script>
  20. </head>
  21. <body>
  22. <input type="file" class="file" onchange="imageURL(this)" />
  23. <img id="preview_img" style="width:auto; height:auto;" />
  24. </body>
  25. </html>
  26.  
YOU NEED TO CHANGE THE JQUERY SRC WITH YOUR PATH

but this will not work for IE as IE shows URL differently from firefox and chrome so you need to work out to check the navigator agent to get the right path
regards,
Omer Aslam
Jun 13 '11 #2

P: 25
hi.
thanks for your replay its working fine for me in firefox..thank you...
Jun 14 '11 #3

omerbutt
100+
P: 638
Please choose the best answer whenever the solution works for you , so that its helpful to others who have the same problem .
Regards,
Omer Aslma
Jun 14 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.