I have a form which uploads file on to my server. Since my site is catering for the larger file upload, I want to have a progress-animation gif file to load once I click on the form's upload button. How can this be done with javascript? Any help is much appreciated, thanks!
First, in HTML file create a <div> tag, put your gif image in it with <img src="yourimage.gif"> and make the <div> tag invisible. Then change the type of the "submit form" button from SUBMIT to BUTTON, i.e. <input type="BUTTON" value="submit form">. And finally, create a simple Javascript function that will be executed by onClick action for that button. The function will do just 2 things: make the <div> visible and submit the form.
<? set_time_limit(0); if($_POST) { $uploaddir = 'C:/apache2triad/htdocs/file/'; $uploadfile = $uploaddir . basename($_FILES['thefile']['name']); if(move_uploaded_file($_FILES['thefile']['tmp_name'], $uploadfile)) { $msg = "file uploaded"; } else { switch($_FILES['thefile']['error']) { case 0: $msg = "No errors occured, file still not uploaded"; break; case 1: $msg = "File is too large, check php.ini"; break; case 2: $msg = "File is too large, check the form html"; break; case 3: $msg = "The uploaded file is incomplete"; break; case 4: $msg = "No files were uploaded"; break; case 6: $msg = "No temp dir was found, please check / create settings"; break; case 7: $msg = "Failed to write to disk"; break; case 8: $msg = "Extension not allowed"; break; } } } ?> <html> <head> <script language="javascript"> function doButton() { document.getElementById("controls").innerHTML = "<br /><img src='http://yourdomain.com/load.gif'></img>"; } </script> </head> <body> <?=$msg ?> <br /> <form action="" method="post" enctype="multipart/form-data" onsubmit="doButton()"> <input type="hidden" name="MAX_FILE_SIZE" value="1000000000" /> <input type="file" name="thefile"> <div id="controls"><br /><input type="submit" value="Upload"></div> </form> </body> </html> PHP: Made from just boredom, you'll need to mess with it a little, but thats the general idea