I've created an AJAX file upload that works wonderfully with jQuery 1.11.x but when I switch over to a local version of jQuery 1.4.x (a version I'm forced to use in production), I begin to have issues with getting PHP to acknowledge the uploaded file details.
With jQuery 1.11.x, I can see var_dump($_FILES) output as expected and it's beautiful!
...but with jQuery 1.4.x, I cannot and it's giving me a serious headache. Instead, the AJAX post occurs as expected per-Firebug's POST details but the RESPONSE details show only the markup I started with. Nothing new or changed.
Code (you should be able to copy-and-paste-and-run as-is):
Code: Select all
<!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(/image.*/)){
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('div#response').html('<br /><img src="ajax-loader.gif"/>');
jQuery.ajax({
url: "index.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
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>It's as if the PHP isn't able to grab / acquire / acknowledge the file payload and so when I try to use var_dump($_FILES), it just keeps coming up as an empty PHP array (which implies that either PHP isn't seeing the details or else my AJAX is inadvertently refreshing the DIV with a brand new index.php request, absent of the initial AJAX call details). Does that sound right?
Any insight into this would be very appreciated. It's really got me banging my head.