home

articles

broadband

browsers

fraud001

javascript001

javascript002

javascript003

links

mysql01

mysql02

mysql03

mysql04

php001

php002

php003

problem001

spyware

virus01

virus02

web_programming

Sponsor001

 

Page created 27 April 2005, updated 13 June 2008.

JavaScript

Page 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!