Trying to use jQuery 1.4.x: AJAX file upload w/ $_FILES...?
Posted: Mon Sep 08, 2014 2:48 pm
Problem:
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):
Conclusion:
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.
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.