Display image preview - file input incorrect...

[richrock]

Hi, 

 

Having a little difficulty with some JS to preview a local image:

 

	<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=180;
		  // height to resize large images to
		var maxHeight=200;
		  // 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="";

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

		function preview(what){
		  var source=what.value;
		  alert(source);
		  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>

 

And this is run with an input type="file" :

 

<input type="file" id="picField" onchange="preview(this)">

 

Which *should* display here:

 

<img alt="Graphic will preview here" id="previewField" src="">

 

Problem is, the JS fires, but the input tag strips the file location from :

 

C:/Documents and Settings/<user>/My Pictures/image.jpg

 

to

 

image.jpg

 

Which results in a broken image link because there is no image.jpg...  Any ideas how/why?  I've tried 3 different scripts and it seems that they all do the same. 

[richrock]

Never mind, digging around see that JS doesn't read local files correctly, people are exploiting IE flaws.  Guess I'll move the file to a temp location on the server then render a preview.