Forum Moderators: coopster
[Code:]
//If no errors registred, print the success message
if(isset($_POST['Submit']) && !$errors)
{
echo "<h1>File Uploaded Successfully</h1>";
}
?>
<form name="newad" method="post" enctype="multipart/form-data" action="">
<table align="center">
<tr><td><input type="file" name="image"></td></tr>
<tr><td><input name="Submit" type="submit" value="Upload image" onClick="javascript:showProgress();"></td></tr>
<tr><td><span id="progress" style="visibility:hidden"><img src="http://mysite.com/upload.gif"/></td></tr>
</table>
</form>
[/code]
I noticed that action="" doesnt have anything in, does IE not like this?
Any ideas or help would be very much appreciated.
1) insert <?echo $_SERVER['PHP_SELF']?> in your 'action' attribute or
2) remove the <form> completely and replace the submit input with this:
<input name="Submit" type="button" value="Upload image" onclick="javascript:showProgress();">
(If the script doesn't depend on form action, why use a form anyway?)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mysite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="hide_menu.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
}
-->
</style>
<script type="text/javascript">
<!--
function showProgress() {
document.getElementById("progress").style.visibility = 'visible';
document.getElementById("submit").disabled = true;
}
//-->
</script>
</head><body>
<div id="header">
<p align="center" class="style2">Mysite</p>
<p align="center" class="style2">-
The Wasted Potential - </p>
</div>
<div id="hit_area" onmouseover="toggleDown();"></div>
<div id="menu_holder">
<div id="nav">
<ul>
<li><a href="http://Mysite.com">Home</a></li>
<li><a href="/proxy.php">Proxy</a></li>
<li><a href="/Savetarget.php">Save Target</a></li>
<li><a href="/images.php">Images</a></li>
<li><a href="/Members">Members</a></li>
</ul>
</div>
</div>
<div id="hit_area2" onmouseover="toggleUp();">
<div id="content">
<h1 align="center">mysite.com</h1>
<p align="center"><a href="http://www.mysite.com/images/photos.php?event=19860308-onwards">Show Uploaded Images</a></p>
<?php
//define a maxim size for the uploaded images in Kb
define ("MAX_SIZE","100");
//This function reads the extension of the file. It is used to determine if the file is an image by checking the extension.
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
//This variable is used as a flag. The value is initialized with 0 (meaning no error found)
//and it will be changed to 1 if an errro occures.
//If the error occures the file will not be uploaded.
$errors=0;
//checks if the form has been submitted
if(isset($_POST['Submit']))
{
//reads the name of the file the user submitted for uploading
$image=$_FILES['image']['name'];
//if it is not empty
if ($image)
{
//get the original name of the file from the clients machine
$filename = stripslashes($_FILES['image']['name']);
//get the extension of the file in a lower case format
$extension = getExtension($filename);
$extension = strtolower($extension);
//if it is not a known extension, we will suppose it is an error and will not upload the file,
//otherwise we will do more tests
if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "pjpeg") && ($extension != "png") && ($extension != "gif"))
{
//print error message
echo '<h1>Unknown extension!</h1>';
$errors=1;
}
else
{
//get the size of the image in bytes
//$_FILES['image']['tmp_name'] is the temporary filename of the file
//in which the uploaded file was stored on the server
$size=filesize($_FILES['image']['tmp_name']);
//compare the size with the maxim size we defined and print error if bigger
if ($size > MAX_SIZE*1024)
{
echo '<h1>You have exceeded the size limit!</h1>';
$errors=1;
}
else
{
//we will give an unique name, for example the time in unix time format
$image_name=time().'.'.$extension;
//the new name will be containing the full path where will be stored (images folder)
$newname="images/photos/19860308-onwards/".$image_name;
//we verify if the image has been uploaded, and print error instead
$copied = copy($_FILES['image']['tmp_name'], $newname);
if (!$copied)
{
echo '<h1>Copy unsuccessfull!</h1>';
$errors=1;
}}}}}
//If no errors registred, print the success message
if(isset($_POST['Submit']) && !$errors)
{
echo "<h1>File Uploaded Successfully</h1>";
}
?>
<!--next comes the form, you must set the enctype to "multipart/frm-data" and use an input type "file" -->
<form name="newad" method="post" enctype="multipart/form-data" action="">
<table align="center">
<tr><td><input type="file" name="image"></td></tr>
<tr><td><input name="Submit" type="submit" value="Upload image" onClick="javascript:showProgress();"></td></tr>
<tr><td><span id="progress" style="visibility:hidden"><img src="http://mysite.com/upload.gif"/></td></tr>
</table>
</form>
</div>
</body>
</html>
Also I never use XHTML -- only HTML 4.01 Strict.
(The problem could also be caused by something else that sends IE into 'Quirks mode [google.com]'
You can test if IE is in Quirks mode by typing this in the address bar and hit 'Enter':
javascript:alert(document.compatMode);
If you get an alert such as 'BackCompat', IE is in Quirks mode -- it could be an 'Quirks mode' issue.)
[edited by: OutdoorMan at 6:47 pm (utc) on April 19, 2008]
It says "CSS1Compat".
Then IE isn't in Quirks mode. That's good.
I did a copy/paste of your code and uploaded it as a test page on my server: it looks fine in my IE7 and also show the alert 'CSS1Compat' when I made a test.
When I clicked the submit input 'Upload image' it became unavailable (it faded out) and an image became visible right under the submit input. It seems to work properly to me (though I haven't tested it all the way -- I didn't try to upload any files etc.)
It could be some user defined setting of yours in IE that causes the page to hang. Check your settings in IE.
return true;
If that doesn't work, try appending
var form = document.getelementbyid("[your forms id]");
form.submit;
[edited by: darrenG at 2:55 pm (utc) on April 20, 2008]
[edited by: darrenG at 5:55 pm (utc) on April 20, 2008]
In your javascript function showProgress() first try appending:return true;
If that doesn't work, try appending
var form = document.getelementbyid("[your forms id]");
form.submit;
Use a javascript event function with your froms submit button.
Put this in your page head:<script language="JavaScript">
<!--
function showProgress() {
document.getElementById("progress").style.visibility = 'visible';
document.getElementById("submit").disabled = true;
}
//-->
</script>Make your submit button call the show progress event function with an onclick:
<input type="submit" name="submit" value="Upload Picture" onclick="javascript:showProgress();">
Then stick this next to your submit button:
<span id="progress" style="visibility:hidden"><img src="http://battlescrypt.scrypted.com/images/busy_blue.gif"/>
That should work out fine for you! Feel free to use that image from my server.
Where do I need to add return true; to my page test what you suggested?
[edited by: Kitkat at 8:26 am (utc) on April 21, 2008]
Or failing that
function showProgress() {
document.getElementById("progress").style.visibility = 'visible';
document.getElementById("submit").disabled = true;
document.getelementbyid("[your forms ID here]").submit;
return true;
}
or in the submit button onclick attribute:
onclick="javascript:showProgress(); return true;">
