homepage Welcome to WebmasterWorld Guest from 54.196.207.55
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

    
Works perfectly in Firefox, but not in IE7
Kitkat




msg:3629953
 1:49 pm on Apr 18, 2008 (gmt 0)

My image upload script works perfectly in firefox, but when I try in IE7 it just hangs when you click "submit". I think it has something to do with this part:

[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.

 

Kitkat




msg:3630197
 9:25 pm on Apr 18, 2008 (gmt 0)

Would it help more if I posted the whole page/script?

OutdoorMan




msg:3630206
 9:51 pm on Apr 18, 2008 (gmt 0)

Maybe you could:

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?)

Kitkat




msg:3630444
 12:57 pm on Apr 19, 2008 (gmt 0)

The form part is so they can browse and select the image they want to upload, and can see the path afterwards, then submit.
I'll try adding that to the action and update you.

Kitkat




msg:3630448
 1:08 pm on Apr 19, 2008 (gmt 0)

That didnt work, and adding it made it not work in firefox either.
I'm thinking maybe if I took the earlier part of the page that processes the image and saved it in its own file and put that file in the action part it might work then. Its just weird how its perfectly fine in firefox =s


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

OutdoorMan




msg:3630603
 6:45 pm on Apr 19, 2008 (gmt 0)

When I use forms, I always have the action attribute set to something; so I'm not familiar with this kind of approach (and I'm not even sure it's valid XHTML/HTML to leave the action attribute empty).

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]

Kitkat




msg:3630617
 7:07 pm on Apr 19, 2008 (gmt 0)

It says "CSS1Compat".
I'm not too good with PHP and most of this was built from examples and tutorials.

OutdoorMan




msg:3630633
 7:36 pm on Apr 19, 2008 (gmt 0)

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.

OutdoorMan




msg:3630665
 8:20 pm on Apr 19, 2008 (gmt 0)

If it still doesn't work, you might want to have a look at this article: features.file-upload [us3.php.net] (from php.net - containing a lot of comments and examples)

Kitkat




msg:3630936
 2:43 pm on Apr 20, 2008 (gmt 0)

It works fine up to that point, but it doesnt upload the image. it just hangs there with loading image under it.
its supposed to upload the picture the to folder, then show "upload complete" or if the picture is too big "You have exceeded the size limit!" and if it isnt a filetype I've allowed "Unknown extension!". All this works fine in firefox.
Excuse the bad skills in paint:
[img230.imageshack.us...]
thats whats supposed to happen, in IE it hangs on the first bit after you click submit and doesnt upload the image, I've tried it with IE at work and at home, neither works, but with firefox at work and home, it works fine.
I'll have a have a look at the link you sent me.
Im going to test if it will work if I made the php code that processes the image a seperate file and make the action on submit run that file.
I really appreciate the help and suggestions.

darrenG




msg:3630945
 2:54 pm on Apr 20, 2008 (gmt 0)

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;

[edited by: darrenG at 2:55 pm (utc) on April 20, 2008]

Kitkat




msg:3630946
 2:56 pm on Apr 20, 2008 (gmt 0)

Hmm still the same problem when I make the code that processes the image a seperate file and make the "action" run that code. Again, it works in firefox but not IE.

darrenG




msg:3631010
 5:55 pm on Apr 20, 2008 (gmt 0)

I'd look at your javascript, as it seems to me like the form isn't being submitted at all, which I would suggest is an IE related javascript problem.

[edited by: darrenG at 5:55 pm (utc) on April 20, 2008]

Kitkat




msg:3631347
 8:24 am on Apr 21, 2008 (gmt 0)

Oops sorry I didnt see your other post.

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;


I have no knowledge of how to use java propperly. The javascript in this page is from examples and tutorials. For the submit button I used:

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]

darrenG




msg:3631578
 4:17 pm on Apr 21, 2008 (gmt 0)

function showProgress() {
document.getElementById("progress").style.visibility = 'visible';
document.getElementById("submit").disabled = true;
return true;
}

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;">

Kitkat




msg:3632265
 1:09 pm on Apr 22, 2008 (gmt 0)

It's definately an issue with the java, I stripped it all out and it uploaded with IE. I'll try adding what you suggested. The reason I added the java side was I wanted something to happen when the user clicks submit (in this case a loading gif shows)rather than the page sitting there until the image has been uploaded.
Many thanks for you help pointing out the java issue.
I'll update you soon.

Kitkat




msg:3632317
 2:24 pm on Apr 22, 2008 (gmt 0)

I've got it working. Thanks for all your suggestions, especially darrenG for pointing out the problem is probably with the javascript..
It would appear the problem was with disabling the submit button after the user clicked it, I guess IE doesnt like this.
This javascript line in the header was the culprit:
document.getElementById("submit").disabled = true;
I've just removed it for now, and it works perfectly with IE and firefox. Just now the user might click submit twice, I'll see if I can find a work around, but at least now I know what to watch out for.
Also feel free to use the script if its helpful in any way.
Again many thanks for all the help =)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved