homepage Welcome to WebmasterWorld Guest from 54.235.16.159
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 / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to make file uploading work in Internet Explorer? Guru's help need
alexey9




msg:3539675
 5:21 pm on Jan 3, 2008 (gmt 0)

Hello,

I have wrote code that uploads files from user's hard disks to the server and everything works fine in Firefox and Safari, but in Internet Explorer it uploads dummy files and cycles that. So when I try to upload one photo, I get a lot of dummy files on my server and a lot of record in MySQL insted of one record.

I guess the problem in JS:

<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT">
<!--

imageWait = new Image(); imageWait.src = "http://www.example.com/img/wait.gif";

function showWaitImage() {
document.getElementById('photoSubmit').disabled = true;
document.getElementById('photoSubmit').value='Закачивается...';
var showMap = document.getElementById("showMap");
showMap.innerHTML = '<iframe src="http://www.example.com/empty.html" frameBorder=0 scrolling=no></iframe>';
var mapThisPhoto = document.getElementById("mapThisPhoto");
mapThisPhoto.innerHTML = '<span></span>';

parent.changeFrameSizePhoto();
var div = document.getElementById("image");
div.innerHTML = '<table width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><span class="style">Фотография закачивается, пожалуйста подождите...<br /><br />&nbsp;<br />&nbsp;<br /><img src="http://www.example.com/img/wait.gif" id="myImage" /></span></td></tr></table>';
document.getElementById("myImage").onload = function() {
document.getElementById("photoForm").submit();
}
return false;
}

//-->
</SCRIPT>

The form looks like it's ok:
<form name="photoForm" id="photoForm" action="uploadsub.php?geo=3017382&dest=&typet=ph&lang=ru" method="post" enctype="multipart/form-data"><input type="hidden" name="MAX_FILE_SIZE" value="4000000" /><input size="15" name="url" type="file" style="border:1px solid #777777" class="style">
<input value="Закачать" type="submit" class="style" name="photoSubmit" id="photoSubmit" onclick="return showWaitImage()"></form>

I wonder what part of code doesn't work in IE? Why that happens?

[edited by: jatar_k at 1:01 pm (utc) on Jan. 5, 2008]
[edit reason] no urls thanks [/edit]

 

penders




msg:3540339
 2:27 pm on Jan 4, 2008 (gmt 0)

<input value="Закачать" type="submit" class="style" name="photoSubmit" id="photoSubmit" onclick="return showWaitImage()">

Presumably if you remove the onclick event from your submit button then your upload works OK?

document.getElementById("myImage").onload = function() {
document.getElementById("photoForm").submit();
}

You have a type="submit" button (which would submit the form) AND you are later submitting the form via JavaScript. I would have thought you'd only need one OR the other, not both. Preferably just type="submit" so you are not reliant on JavaScript to submit your form?

alexey9




msg:3540962
 9:30 am on Jan 5, 2008 (gmt 0)

Thanks for reply.

I removed onclick event and photo uploads just once, but script doesn't show "waitImage" (image like in Firefox that shows that page is loading) and doesn't add record to MySQl database.

I've also tried to remove type="Submit" and it works as it works with type="Submit".

So, I guess document.getElementById("photoForm").submit(); is not work in IE, am I right?

What can I do to make it work both in IE and Firefox?

alexey9




msg:3540964
 9:52 am on Jan 5, 2008 (gmt 0)

Or document.getElementById("myImage").onload = function() {} doesn't work in IE.

Well, everything before this part works fine:

document.getElementById("myImage").onload = function() {
document.getElementById("photoForm").submit();
}

penders




msg:3541547
 12:16 pm on Jan 6, 2008 (gmt 0)

I removed onclick event and photo uploads just once, but script doesn't show "waitImage" (image like in Firefox that shows that page is loading) and doesn't add record to MySQl database.

If your photo uploads OK, but a record isn't added to your MySQL then I would have thought this was down to your PHP script that processes the file upload? The "waitImage" doesn't show in this test since the JavaScript is not being called.

I've also tried to remove type="Submit" and it works as it works with type="Submit".

So, I guess document.getElementById("photoForm").submit(); is not work in IE, am I right?

If removing type="Submit" results in a file being uploaded then document.getElementById("photoForm").submit(); is clearly working OK.

Or document.getElementById("myImage").onload = function() {} doesn't work in IE.

Again, if the above works then this is OK.

I'm not sure what else you are trying to achieve, but I would have thought that in order to display a "wait image" you should simply call a script from the onsubmit event handler of the form that shows a hidden DIV?

alexey9




msg:3541587
 3:11 pm on Jan 6, 2008 (gmt 0)

penders, I'm sorry for wrong report, I was trying it whole day and everything mixed in my head.

1. When I remove onclick event, everything works fine both in IE and Firefox (photo uploads, script adding record to MySQL database and resizes photo). The thing is Whole JS part doesn't run.

I mean user will not see WaitImage during upload, "Upload" button will never turn off etc.

2. If I remove type="Submit" then Button turn into the simple <input> element. Script works the same as with type="Submit".

3. If I change this:
document.getElementById("myImage").onload = function() {
document.getElementById("photoForm").submit();
}

to this:

document.getElementById("myImage").onload = function() {
alert("ok");
}

It shows me alerts unlimited number of times. So, I guess the problem is in document.getElementById("myImage").onload = function() { part?

you should simply call a script from the onsubmit event handler of the form that shows a hidden DIV?

As I remeber, I've tried few things like this, but I had different problems with it (image didn't upload or whole JS couldn't be run before form submit). If you don't know how can I make "document.getElementById("myImage").onload = function() {" work in IE, I will try this.

alexey9




msg:3541661
 6:27 pm on Jan 6, 2008 (gmt 0)

I've changed this:

document.getElementById("myImage").onload = function() {
document.getElementById("photoForm").submit();
}

to this:

document.getElementById("photoForm").submit();

And it seems it works fine both in IE and Firefox. WaitImage also looks fine without preupload.

Thanks so much for your advices and time. I'm happy I finished with this problem. :)

penders




msg:3541948
 8:16 am on Jan 7, 2008 (gmt 0)

document.getElementById("myImage").onload = function() {
alert("ok");
}

It shows me alerts unlimited number of times. So, I guess the problem is in document.getElementById("myImage").onload = function() { part?

Hhhmmm, a strange one, but....

div.innerHTML = '<table width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><span class="style">Фотография закачивается, пожалуйста подождите...<br /><br />&nbsp;<br />&nbsp;<br /><img src="http://www.example.com/img/wait.gif" id="myImage" /></span></td></tr></table>';
document.getElementById("
myImage").onload = function() {

Looking at your original code again, you are trying to assign an event to an element using a standard DOM method, but this element has just been written to the page using .innerHTML (non-DOM). This could be the source of the problem?

Anyway, glad you managed to workaround this issue. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
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