jQuery file upload with additional data

Question

I am using jQuery to do AJAX uploading with additional data. The Stackoverflow code I am following it this one How can I upload files asynchronously? and the code I am using is the following:

var formData = new FormData($('form')[0]);
                $.ajax({
                    type: "POST",
                    url: "ajax/register.php",
                    dataType: "text",
                    data: {
                        name: $("#name").val(),
                        city: $("#city").val(),
                        image: formData
                    },
                    success: function(text) {
                        if(text == "data ok pic ok") { window.location = "reg3.php"; }
                        else { errorMessage(text); }
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });

The problem is that, if I remove the file-related codes, such as

var formData = new FormData($('form')[0]);
image: formData
cache: false,
contentType: false,
processData: false

then the code works and I can send other data, too like "name" and "city". When I put back in the file-related code, it stops working, no errors in the console and no action from the PHP script on the server (like it did not receive the other relevant data)

Any ideas?

Thanks in advance.

Answer 1

When write a form to send a file, you specify the POST method and a multipart/form-data encoding. Each <input> in the HTML code will be converted by the browser in a part in the HTTP request body, so you can send at the same time multiple files and strings. Here is the documentation for FormData (see the very bottom of the page). Basically you should use

var data = new FormData($('form')[0]);
data.append("name",  $("#name").val());
data.append("city",  $("#city").val());

// ...

$.post({
  "ajax/register.php",
  data: data,
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

The FormData object is intended to be directly assigned to the data key. You append additional fields to the FormData object: it doesn't represent a binary content. Instead it's a name-value pair data structure , where the keys are always strings, ant the values can be string or binary objects.

Answer 2

try adding : enctype: 'multipart/form-data'

eg

            {
                type: "POST",
                url: "ajax/register.php",
                dataType: "text",
                enctype: 'multipart/form-data',
                data: {
                    name: $("#name").val(),
                    city: $("#city").val(),
                    image: formData
                }
            }