Input type FILE…

@TageMay 29.2004 — #Okay, the Gecko browsers weren't cooperating with the onChange event handler I put on the <input type="file"> element. So I came up with a bit longer of a workaround that makes it act like Internet Explorer and Opera. I used a userAgent check for the gecko browsers... By all means change this script to your liking. I only tested it with IE6.0, Netscape7.1, Mozilla FireFox, and Opera7.23...

[code=php]<html>
 <head>
 <title>Image File Check-Preview</title>
 <script type="text/javascript">
 <!--
 function checkFile(theValue,fromFocus){
 if(typeof document.getElementById!="undefined"&&(fromFocus==null||(fromFocus==""&&navigator.userAgent.toLowerCase().indexOf("gecko")>-1&&lastImg!=theValue))){
 lastImg=theValue;
 if(theValue.slice(theValue.lastIndexOf(".")+1,theValue.length)!="gif"&&theValue.slice(theValue.lastIndexOf(".")+1,theValue.length)!="jpg"){
 alert("This is not a valid file!nPlease choose a .gif or .jpg file!nThank You!")}
 else{
 document.getElementById("theImg").src="file:///"+theValue;}}}
 //-->
 </script>
 </head>
 <body>
 <form name="theForm">
 <input type="file" name="theFile" onChange="checkFile(this.value)" onClick="this.focus()" onFocus="checkFile(this.value,'')}">
 <script type="text/javascript">
 <!--
 var lastImg=document.theForm.theFile.value;
 //-->
 </script>
 <img src="blank.gif" alt="Preview of Image" height="100" id="theImg">
 </form>
 </body>
 </html>[/code]

If they all worked with the onChange event handler, I would not have put in the onClick event handler, onFocus event handler, fromFocus var, or lastImg var. The onClick event handler focuses the file input element when the user clicks the field. If the user clicked the browse button...after they choose a file and click open, the focus() function is activated effectively firing off the onFocus event handler. The onFocus event handler has a second argument tagged onto checkFile(), two apostrophes. This is used to check if the event was fired from the onChange event handler or the onFocus event handler. I can then effectively seperate the gecko browsers from ie and opera. What the lastImg var does is keep a string of the last image's path that was loaded into the file input element. This is so I can check if the person clicked cancel by comparing lastImg to theValue. If they come up the same, there was no change in the field; therefore, the function checkFile() does not execute when the user clicks cancel. The line[code=php]var lastImg=document.theForm.theFile.value;[/code]sets the value of lastImg to the file input element's value when the page loads. I did this because sometimes when the user clicks reload, the value of the file input element isn't cleared. I set the height on the <img> tag to 100 so it would do what you wanted. Although, it might get really wide if someone has a horizontal picture. The line[code=php]typeof document.getElementById!="undefined"[/code]checks to see if the browser supports getElementById; if it does not, the script does not execute. Sorry for not having something that doesn't need a workaround; hopefully someone has a better way to do this, lol. Later...

Tage

Input type FILE…

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Input type FILE…

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴