(I noticed that the recent upgrade is having problems w/ some formatting, so please try to disregard some of the inconsistent bold text, etc. It’s a work in progress, right? 
)
I’m forced to use jQuery 1.4.4 in our production environment and I’m having some problems making my AJAX code respond with more than just a 200 HTTP code… For example, I’m trying to POST the upload to the same page it’s uploaded from (index.php) and on that page, I’m trying to PHP to var_dump($_FILES) and output the resulting POST results (nothing major going on here, right?). Well, $_FILES always returns empty and after some research, I’m convinced it’s got something to do with how back in 1.4.4 days, header handling was sketchy with AJAX: there’s something awry going on with the AJAX word boundary.
The problem is that the code below (where I attempt to use a custom word boundary via "contentType: “multipart/form-data; boundary=whatever”) just doesn’t work. Every time I investigate the headers in Firebug, it’s always in the form of some random numbers, like it’s not acknowledging my change. Everything else is sent as expected, but according to Firebug, the payload uses some sort of generic numeric boundary, which doesn’t appear to suffice as far as jQuery 1.4.4 is concerned. What a pain!
Here’s an example of successful headers I see when I use jQuery 1.11.1:
//Response Headers...
HTTP/1.1 200 OK
Date: Wed, 10 Sep 2014 00:06:48 GMT
Server: Apache/2.2.22 (Win32) mod_ssl/2.2.22 OpenSSL/0.9.8k PHP/5.2.9-2
X-Powered-By: PHP/5.2.9-2
Content-Length: 2594
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/html
X-Pad: avoid browser bug
//Request Headers...
POST /projects/ajax_file_upload/index.php HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0
Accept: */ *
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
X-Requested-With: XMLHttpRequest
Referer: http://localhost/projects/ajax_file_upload/
Content-Length: 296
Content-Type: multipart/form-data; boundary=---------------------------139501139415121
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Due to the changes they made back in 1.5.x, jQuery can handle / accepts the generic numeric boundary.
Now here’s an example of headers I see in Firebug for jQuery 1.4.4 (the version that I’m having problems with):
//Response Headers...
HTTP/1.1 200 OK
Date: Wed, 10 Sep 2014 00:01:35 GMT
Server: Apache/2.2.22 (Win32) mod_ssl/2.2.22 OpenSSL/0.9.8k PHP/5.2.9-2
X-Powered-By: PHP/5.2.9-2
Content-Length: 2403
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
X-Pad: avoid browser bug
//Request Headers...
POST /projects/ajax_file_upload/index.php HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0
Accept: */ *
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: multipart/form-data; boundary=whatever
X-Requested-With: XMLHttpRequest
Referer: http://localhost/projects/ajax_file_upload/
Content-Length: 293
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
As you can see, the Request realizes that I’m trying to modify the boundary as seen by the “boundary=whatever” line, but unfortunately, the Response just doesn’t see it or else something gets lost in the translation.
Here’s the code I’m working with (can be copied-and-pasted into an index.php for quick testing as long as you have access to jQuery 1.4.4):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Upload Test</title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="left"></div>
<div id="right">
<form method="post" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
</form>
<div id="response">
<?php
print '<pre>';
var_dump($_FILES);
print '</pre>';
?>
</div>
</div>
<div id="footer"></div>
</div>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>-->
<script type="text/javascript" src="jquery_1.4.4.js"></script>
<script type="text/javascript">
var input = $("#file");
var formdata = false;
if(window.FormData){
formdata = new FormData();
}
input.bind("change", function (evt) {
var i = 0, len = this.files.length, reader, file;
for(;i<len;i++){
file = this.files[i];
if (!!file.type.match(/text.*/)){
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function(e){};
reader.readAsDataURL(file);
}
if(formdata){
formdata.append("text", file);
formdata.append("extra",'extra-data');
}
if(formdata){
jQuery.ajax({
cache: false,
url: "index.php",
type: "POST",
data: formdata,
processData: false,
contentType: "multipart/form-data; boundary=whatever",
success: function (res) {
console.log(res);
$('#response').empty();
$('#response').html($(res).find('#response').html());
}
});
}
}else{
alert('Not a vaild file type.');
}
}
evt.preventDefault();
});
</script>
</body>
</html>
All it is is an AJAX upload form. Nothing major, but again, the place that I believe is causing problems here is where I try to override the boundary… I only say this because when I submit the same code / upload with the later version of jQuery and swap that contentType property w/ a Boolean false value, it works like a charm!
I’m at a complete loss here as to what’s required to change the boundary value. I’ve been able to accomplish it (more or less) with a pure JavaScript implementation but then I wound up having problems with accessing everything between the time it was submitted and the time it reached PHP: it’s easier to manipulate everything with jQuery, so I prefer to stick with that if possible.
Any insight into all this would be very appreciated. I’ve really struggled with this one and I can’t seem to find anything anywhere that applies to my specific situation.
Thanks in advance.