1,105,344 Community Members

Preview an image before upload

Member Avatar
naju
Junior Poster in Training
57 posts since Jun 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

pliz let me have an working example for it

Member Avatar
hunkychop
Junior Poster in Training
55 posts since Mar 2007
Reputation Points: 3 [?]
Q&As Helped to Solve: 4 [?]
Skill Endorsements: 0 [?]
 
0
 

are you using server side scripting for the upload?

Member Avatar
Inny
Posting Whiz in Training
293 posts since Oct 2005
Reputation Points: 1 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 0 [?]
 
0
 

If its Client side....

<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ */

/***** CUSTOMIZE THESE VARIABLES *****/

  // width to resize large images to
var maxWidth=500;
  // height to resize large images to
var maxHeight=500;
  // valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
  // the id of the preview image tag
var outImage="previewField";
  // what to display when the image is not valid
var defaultPic="spacer.gif";

/***** DO NOT EDIT BELOW *****/

function preview(what){
  var source=what.value;
  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
  for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
  globalPic=new Image();
  if (i<fileTypes.length) globalPic.src=source;
  else {
    globalPic.src=defaultPic;
    alert("THAT IS NOT A VALID IMAGEnPlease load an image with an extention of one of the following:nn"+fileTypes.join(", "));
  }
  setTimeout("applyChanges()",200);
}
var globalPic;
function applyChanges(){
  var field=document.getElementById(outImage);
  var x=parseInt(globalPic.width);
  var y=parseInt(globalPic.height);
  if (x>maxWidth) {
    y*=maxWidth/x;
    x=maxWidth;
  }
  if (y>maxHeight) {
    x*=maxHeight/y;
    y=maxHeight;
  }
  field.style.display=(x<1 || y<1)?"none":"";
  field.src=globalPic.src;
  field.width=x;
  field.height=y;
}
// End -->
</script>







<center> Pre-veiw pic from your drive </center>
<body><div align="center" style="line-height: 1.9em;">

<br>
<input type="file" id="picField" onchange="preview(this)">
<br>
<img alt="Graphic will preview here" id="previewField" src="http://i14.photobucket.com/albums/a345/Instar/eye_search_e0.gif">

</div></body>
Member Avatar
bluepicaso
Newbie Poster
14 posts since Jul 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

This doesnt seem to work on Firefox, chrome, and opera
:'(

Member Avatar
Troy III
Practically a Posting Shark
891 posts since Jun 2008
Reputation Points: 174 [?]
Q&As Helped to Solve: 119 [?]
Skill Endorsements: 10 [?]
 
0
 

This doesnt seem to work on Firefox, chrome, and opera
:'(

Of course it doesn't - what did you expect?

Member Avatar
rafaelksd
Newbie Poster
1 post since Apr 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hola que tal, con una modificacion este codigo sirve tambien para FIREFOX, espero que a alguien le sirva. :)

<script type="text/javascript">
      <!-- Begin
      /* This script and many more are available free online at
      The JavaScript Source!! http://javascript.internet.com
      Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ */
      /***** CUSTOMIZE THESE VARIABLES *****/
      // width to resize large images to
      var maxWidth=500;
      // height to resize large images to
      var maxHeight=500;
      // valid file types
      var fileTypes=["bmp","gif","png","jpg","jpeg"];
      // the id of the preview image tag
      var outImage="previewField";
      // what to display when the image is not valid
      var defaultPic="spacer.gif";
      /***** DO NOT EDIT BELOW *****/
      function preview(what){
      var source=what.value;
      var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
      for (var i=0; i<fileTypes.length; i++){
	  if (fileTypes[i]==ext){
	  break;
	  }
	  }
      globalPic=new Image();
      if (i<fileTypes.length){
	  
	  //Obtenemos los datos de la imagen de firefox
	  try{
	  globalPic.src=what.files[0].getAsDataURL();
	  }catch(err){
	  globalPic.src=source;
	  }
	  }else {
      globalPic.src=defaultPic;
      alert("ESTA NO ES UNA IMAGEN VALIDA por favor escoge una imagen de tipo:nn"+fileTypes.join(", "));
      }
      setTimeout("applyChanges()",200);
      }
	  
      var globalPic;
      function applyChanges(){
      var field=document.getElementById(outImage);
      var x=parseInt(globalPic.width);
      var y=parseInt(globalPic.height);
      if (x>maxWidth) {
      y*=maxWidth/x;
      x=maxWidth;
      }
      if (y>maxHeight) {
      x*=maxHeight/y;
      y=maxHeight;
      }
      field.style.display=(x<1 || y<1)?"none":"";
      field.src=globalPic.src;
      field.width=x;
      field.height=y;
      }
      // End -->
      </script>
      <center> Pre-veiw pic from your drive </center>
      <body><div align="center" style="line-height: 1.9em;">
      <br>
      <input type="file" id="picField" onchange="preview(this)">
      <br>
      <img alt="Graphic will preview here" id="previewField" src="http://i14.photobucket.com/albums/a345/Instar/eye_search_e0.gif">
      </div></body>
Member Avatar
Christian Harms
Newbie Poster
4 posts since Mar 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Your example is an HTML5 Feature and will only work on Firefox2.5 and Chrome5. Hoping the function getAsDataURL() will come more popular in the next time!

Other solution with more compatibility are client side java applets or activeX ...

Member Avatar
lyrics
Newbie Poster
1 post since May 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Yeah, it works when the file is saved with .html extension, but doesnt work when the file is converted and saved with .php extension. Please will like help when the file is saved as .php extension.

On the other side, please i will need help....When the image preview on the front-end, i will like to save the image with other form elements and stored in MySQL database. How can i achieve this. Thanks

Member Avatar
prabhatraja445
Newbie Poster
1 post since May 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Thank you very much .
your solution works like a charm but it is not working in ie7
could you please give me the code to make it work in ie7

Member Avatar
Mike_H
Light Poster
46 posts since Jun 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

rafaelksd,

Can you make this work with IE 7 and 8 also?

The post from March 20, 2008 does not work in IE 7?

Thanks,
Mike

Hola que tal, con una modificacion este codigo sirve tambien para FIREFOX, espero que a alguien le sirva. :)

<script type="text/javascript">
      <!-- Begin
      /* This script and many more are available free online at
      The JavaScript Source!! http://javascript.internet.com
      Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ */
      /***** CUSTOMIZE THESE VARIABLES *****/
      // width to resize large images to
      var maxWidth=500;
      // height to resize large images to
      var maxHeight=500;
      // valid file types
      var fileTypes=["bmp","gif","png","jpg","jpeg"];
      // the id of the preview image tag
      var outImage="previewField";
      // what to display when the image is not valid
      var defaultPic="spacer.gif";
      /***** DO NOT EDIT BELOW *****/
      function preview(what){
      var source=what.value;
      var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
      for (var i=0; i<fileTypes.length; i++){
	  if (fileTypes[i]==ext){
	  break;
	  }
	  }
      globalPic=new Image();
      if (i<fileTypes.length){
	  
	  //Obtenemos los datos de la imagen de firefox
	  try{
	  globalPic.src=what.files[0].getAsDataURL();
	  }catch(err){
	  globalPic.src=source;
	  }
	  }else {
      globalPic.src=defaultPic;
      alert("ESTA NO ES UNA IMAGEN VALIDA por favor escoge una imagen de tipo:nn"+fileTypes.join(", "));
      }
      setTimeout("applyChanges()",200);
      }
	  
      var globalPic;
      function applyChanges(){
      var field=document.getElementById(outImage);
      var x=parseInt(globalPic.width);
      var y=parseInt(globalPic.height);
      if (x>maxWidth) {
      y*=maxWidth/x;
      x=maxWidth;
      }
      if (y>maxHeight) {
      x*=maxHeight/y;
      y=maxHeight;
      }
      field.style.display=(x<1 || y<1)?"none":"";
      field.src=globalPic.src;
      field.width=x;
      field.height=y;
      }
      // End -->
      </script>
      <center> Pre-veiw pic from your drive </center>
      <body><div align="center" style="line-height: 1.9em;">
      <br>
      <input type="file" id="picField" onchange="preview(this)">
      <br>
      <img alt="Graphic will preview here" id="previewField" src="http://i14.photobucket.com/albums/a345/Instar/eye_search_e0.gif">
      </div></body>
Member Avatar
vcarvalho
Newbie Poster
1 post since May 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

anyone knows how to do this work for Chrome?


alguém sabe como fazer para isso funcionar no Chrome?

thx

Member Avatar
saravani20
Newbie Poster
1 post since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi,

Here you go, ref http://saravani.wordpress.com/

Hope it work in all browsers.

<!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>

Thanks,
Sarav

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article