User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 373,933 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,212 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1792 | Replies: 2
Reply
Join Date: Jun 2007
Posts: 51
Reputation: naju is an unknown quantity at this point 
Rep Power: 2
Solved Threads: 2
naju's Avatar
naju naju is offline Offline
Junior Poster in Training

Preview an image before upload

  #1  
Mar 20th, 2008
pliz let me have an working example for it
Hunters Never Hurt
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Mar 2007
Location: georgia
Posts: 55
Reputation: hunkychop is an unknown quantity at this point 
Rep Power: 2
Solved Threads: 4
hunkychop's Avatar
hunkychop hunkychop is offline Offline
Junior Poster in Training

Re: Preview an image before upload

  #2  
Mar 20th, 2008
are you using server side scripting for the upload?
toast
Reply With Quote  
Join Date: Oct 2005
Posts: 236
Reputation: Inny is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 5
Inny's Avatar
Inny Inny is offline Offline
Posting Whiz in Training

Re: Preview an image before upload

  #3  
Mar 21st, 2008
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> 
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

DaniWeb JavaScript / DHTML / AJAX Marketplace
Thread Tools Display Modes

Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

All times are GMT -4. The time now is 6:14 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC