views:

623

answers:

2

I've run into a strange issue with Webkit based browsers (both Safari and Chrome - I'm testing on a Mac) and I am not sure what is causing it. Here's a small script I've created that replicates the issue:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" language="javascript">
function doRequest() {
  document.test.submit();
  $.ajax({
    type: "GET",
    cache: false,
    url: 'ajax.php?tmp=1',
    success: doSuccess
  });
}
function doSuccess(t_data,t_status,req) {
  alert('Data is: '+ t_data +', XMLHTTPRequest status is: '+ req.status);
}
</script>
</head>

<body>
<form name="test" method="post" action="ajax.html" enctype="multipart/form-data">
<input type="file" name="file_1">
<br><input type="button" value="upload" onclick="doRequest();">
</form>
</body>
</html>

ajax.php is:

<?php
echo $_REQUEST['tmp'];
?>

This works as is on Firefox, but the XMLHTTPRequest status is always "0" on both Safari and Chrome. If I remove this line:

document.test.submit();

then it works, but of course the form is not submitted. I've tried changing the form submit button from "button" to "submit", but that also prevents it from working on Safari or Chrome.

What I am trying to accomplish is:

  • submit the form
  • call another script to get status on the file being uploaded via the form (it's for a small upload progress meter).

Any help is really appreciated - I'm hopeful it is just a quirk I'm not familiar with.

Thanks!

  • Brian
A: 

Simply put: you cannot upload files using AJAX.

There are nice plugins such as jquery form that will handle this automatically (by creating a hidden iframe and performing the real file upload).

I think FireFox has a native file upload API but if you want a cross browser solution you will need to take a look at some plugins. Using a flash upload is another solution.

Darin Dimitrov
I'm not uploading the file via AJAX - the file upload is being handled in the HTML form - the AJAX call is a separate call to a PHP script that in turn will monitor the upload. I've simplified the example above to illustrate the issue - in the 'real world' this form submits to a perl CGI script, and the AJAX call goes out to a PHP script that in turn monitors the perl script as it handles the file upload.Thanks!- Brian
Brian
Once you submit the form the browser will redirect to ajax.html and scripts will probably stop executing, so trying to perform an ajax call after submitting the form is useless.
Darin Dimitrov
The redirect will happen once the file is uploaded - that is correct, but while the form is being submitted (and thus the file being uploaded) it will not be redirected. For example, uploading a 100mb file may take a few minutes - in that time I want to query a PHP script via AJAX and get the progress. This works on Firefox and IE, so I am wondering why the AJAX call only fails in Webkit based browsers. As far as I can tell the document.form.submit is not blocking, since if you upload a large enough file for it take 10 seconds or so to submit, you'll see the AJAX call is immediate.
Brian
Turns out it's likely a Webkit bug:https://bugs.webkit.org/show_bug.cgi?id=23933I should have searched more before posting. Now to try and find a work around.- Brian
Brian
A: 

My experience while developing a similar upload checking tool1 is that you should use both success: .. and complete: ... They would probably do the exact same thing in your code and you can have them call the same function. complete: gets called when the request finishes, success: when a request succeeds. Thus maybe:

function doRequest() {
  document.test.submit();
  $.ajax({
    type: "GET",
    cache: false,
    url: 'ajax.php?tmp=1',
    complete: doSuccess,
    success: doSuccess
  });
}
André van Toly