|
Page created 27 April 2005, updated 13 June 2008. JavaScriptPage 2 The script below is an improved version of the Upload script on the previous page. When the client selects a photo, the image is displayed by the browser. However, the image isn't displayed when using either the Firefox or the Opera web browsers! This illustrates the point that JavaScript only works properly on certain web browsers. So this script works better with Internet Explorer, and the only limitation that I am aware of, is that some browsers don't display the image. THE IMPROVED UPLOAD SCRIPT <HTML> <HEAD> <TITLE>File Upload</TITLE> </HEAD> <BODY BGCOLOR="WHITE" TEXT="#0101BA" VLINK="WHITE" ALINK="RED"> <SCRIPT TYPE = "text/javascript"> //========================================================== Global var $file = "", $myvalue = 0, $str = ""; //========================================================== Get mime function mime(){ $str = $file.substr($file.length -3, $file.length); } //========================================================== Set value $file function set(){ $file = document.f.file.value; } //========================================================== Check File function checkfile(){ set(); mime(); if( $str != "jpg" && $str != "gif"){ alert("File Error!\nPlease select a file, which has either a jpg or gif extension."); $myvalue = 0; return false; } else{ $myvalue = 1; return true; } } //====================================================== Show picture function showpic(){ checkfile(); if($myvalue == 1){ document.images.pic.src=$file; } } </script> <H1>File Upload</H1> <H3>Select a file to upload:</H3> <FORM NAME="f" ACTION="uploader.php" ONSUBMIT = "return checkfile()" METHOD="post" ENCTYPE="multipart/form-data"> <P> <INPUT TYPE="file" NAME="file" SIZE=45 ONCHANGE="javascript:showpic()"> <P align="left"><INPUT TYPE=SUBMIT VALUE=" Click here to upload your picture "> </P></P></FORM> <p>Click on 'Browse' to select a photo. Then you should see<br> that picture below, but the height will always be 500 pixels!<br> The file must be a picture with either a jpg or gif extension!<br> It will also be rejected if it does'nt have a reasonable size!<br></p> <img name="pic" src="http://games.daftwat.biz/images/blairedu.jpg" HEIGHT = "300"> </BODY> </HTML> NOTES I have made many changes to the script, such as using 'Functions' and using a different method of finding the MIME type. This is simply a personal desire to improve my programming skill. Otherwise, if a program works, there is no need to change it. Both of the scripts do the job, even if there is room for improvement! |