Jump to content

Archived

This topic is now archived and is closed to further replies.

Mateobus

Image Upload Preview

Recommended Posts

Hello, I have an image upload page on my website, but I want to make it so that a person can preview the image on their computer before they upload it.  Is this possible with javascript?  Does anyone know of a good tutorial for this? Any help is appreciated.

Share this post


Link to post
Share on other sites
Is it possible? Not with anything that runs in their browser.

Share this post


Link to post
Share on other sites
Not in PHP...

But yes in JavaScript:

Copied from [url=http://javascript.internet.com/forms/image-upload-preview.html]The JavaScript Source[/url]

[code]

<!-- TWO STEPS TO INSTALL IMAGE UPLOAD PREVIEW:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<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=100;
  // height to resize large images to
var maxHeight=100;
  // 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 IMAGE\nPlease load an image with an extention of one of the following:\n\n"+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>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<div align="center" style="line-height: 1.9em;">
Test it by locating a valid file on your hard drive:
<br>
<input type="file" id="picField" onchange="preview(this)">
<br>
<img alt="Graphic will preview here" id="previewField" src="spacer.gif">
<br> <div style="font-size: 7pt;">
Script submitted by: <a href="http://www.abrahamjoffe.com.au/">Sydney Wedding Video / DVD</a></div>
</div>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  2.43 KB -->[/code]

Share this post


Link to post
Share on other sites
Thanks for the script, but it isn't working.  I actually tried this one before with no success.  I think that it is a new security feature built in to ie that is stopping the preview from working.  Is this correct?  I think the only way to do it would be to make a whole java applet.  Any suggestions?

Tested in IE7 beta 1 and firefox 1.5.0.4

Share this post


Link to post
Share on other sites
I'd suggest making an additional step in your upload process. Like a confirmation page before the upload?

"Is this the image you wish to upload? If yes click Submit. If no, search below for another image."

I'm afraid that doing it in any other way is going to be extremely inconsistent and based upon browsers, versions, security settings, etc. etc. etc.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.