I am testing the following code and sending formData object via ajax. I copied this solution from this post.
Although I can see the formData object in the URL (as shown in the image below), I am not able to retrieve file values and see the post data in PHP. When I mentioned the following in my PHP :
var_dump($_POST['TextArea1']); // This prints NULL
var_dump($_FILES); // This prints array(0) { }
Another strange thing I noticed in the Network table of Internet Explorer 11 is that the HTTP Method is GET instead of POST as shown in the screenshot below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" method="post" id="myForm1">
<p><textarea id="TextArea1" rows="2" cols="20" name="TextArea1"></textarea></p>
<p><input id="File1" type="file" multiple="multiple" /></p>
<!--<input id="btnUpload" type="button" value="Submit" />-->
<button type = "button" onclick="submitFileTest()">Submit </button>
</form>
function submitFileTest() {
//getting form into Jquery Wrapper Instance to enable JQuery Functions on form
var form = $("#myForm1");
//Serializing all For Input Values (not files!) in an Array Collection so that we can iterate this collection later.
var params = form.serializeArray();
console.log("CONSOLE LOG PARAMS TESTS");
console.log(params);
//Getting Files Collection
var files = $("#File1")[0].files;
console.log("CONSOLE LOG FILESTESTS");
console.log(files);
//Declaring new Form Data Instance
var formData = new FormData();
//Looping through uploaded files collection in case there is a Multi File Upload. This also works for single i.e simply remove MULTIPLE attribute from file control in HTML.
for (var i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
console.log("File Name Check");
console.log(files[i].name);// I can see the name of file here
}
//Now Looping the parameters for all form input fields and assigning them as Name Value pairs.
$(params).each(function(index, element) {
formData.append(element.name, element.value);
});
console.log("FormData Test");
console.log(formData);
$.ajax({
url: "php/myfolder/myfileDownload.php",
method: "post",
data: formData,
contentType: false,
processData: false,
success: function(msg) {
alert(msg);
console.log(msg);
$("#File1").val("");
},
error: function(error) {
alert("Error");
}
});
}