I copied and modified code for uploading image files using ajax that provides feedback for a progress bar. However, it seems I cannot pass data parameters. In this test script, I get a “Undefined index: test” error from the test2.php routine. When I remove the processData: false, and, contentType:false lines of code, the POST data transfer works fine. How can I have both the progress bar work with data transfer work?
$.ajax({
//progress bar feature
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$('.progress-bar').width(percentComplete+'%');
$('.progress-bar').html(percentComplete+'%');
}
}, false);
return xhr;
},
//image processing
url: "/modules/qr_editor/test2.php", // Upload Script
type: 'POST',
processData: false, // remove this and line below makes data work
contentType: false, // but then progress bar indication fails
data: { test: 'asdfadsf' },//this does not post to test2.php
success: function(results){
console.log(results);//returns error of undefined index
}
});
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type “application/x-www-form-urlencoded”. If you want to send a DOMDocument, or other non-processed data, set this option to false .
First of all notice that the default value of this is true, meaning if you remove it then this is true by default. By sending the data with the default true, you are converting your data values to a query string that is posted and picked up properly on the server side as $_POST['test'].
Now by using contentType: false you are also saying that you don’t wish to specify a content type. Which I think is probably not what you want. You want to say to the server “hey I am posting some data and it is in this form so you know how to read it”. Leaving this property out also leads a default of guessing the type based on the data. Experienced programmers know never to leave it to just guessing because then you never know what it will return. It is always good to be explicit where you can.
I am not quite sure why you are using either. I would leave them both out and let them go to the defaults of being application/x-www-form-urlencoded; charset=UTF-8 for the content type and process the data as being a query string. Then ideally on your server side you should see it come in as $_POST['test'].
Yes, when I delete those two lines (processData, contentType), the data does post successfully. However, the progress bar stops working. The sample code I got this from indicated that the two lines - processData: false and contentType: false were important for the progress bar to function. Beyond my understanding at this point…
SOLVED. Should have included more of the code. The routine was used for uploading formdata images, therefore the requirement for processData and contentType both false. I ended using formdata and adding any additional parameters to the formdata as a way to transmit via POST.
