Uploading both data and files in one form using Ajax?

The problem I had was using the wrong jQuery identifier.

You can upload data and files with one form using ajax.

PHP + HTML

<?phpprint_r($_POST);print_r($_FILES);?><form id="data" method="post" enctype="multipart/form-data">    <input type="text" name="first" value="Bob" />    <input type="text" name="middle" value="James" />    <input type="text" name="last" value="Smith" />    <input name="image" type="file" />    <button>Submit</button></form>

jQuery + Ajax

$("form#data").submit(function(e) {    e.preventDefault();        var formData = new FormData(this);    $.ajax({        url: window.location.pathname,        type: 'POST',        data: formData,        success: function (data) {            alert(data)        },        cache: false,        contentType: false,        processData: false    });});

Short Version

$("form#data").submit(function(e) {    e.preventDefault();    var formData = new FormData(this);        $.post($(this).attr("action"), formData, function(data) {        alert(data);    });});

another option is to use an iframe and set the form's target to it.

you may try this (it uses jQuery):

function ajax_form($form, on_complete){    var iframe;    if (!$form.attr('target'))    {        //create a unique iframe for the form        iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));        $form.attr('target', iframe.attr('name'));    }    if (on_complete)    {        iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');        iframe.load(function ()        {            //get the server response            var response = iframe.contents().find('body').text();            on_complete(response);        });    }}

it works well with all browsers, you don't need to serialize or prepare the data.one down side is that you can't monitor the progress.

also, at least for chrome, the request will not appear in the "xhr" tab of the developer tools but under "doc"

I was having this same issue in ASP.Net MVC with HttpPostedFilebase and instead of using form on Submit I needed to use button on click where I needed to do some stuff and then if all OK the submit form so here is how I got it working

$(".submitbtn").on("click", function(e) {    var form = $("#Form");    // you can't pass Jquery form it has to be javascript form object    var formData = new FormData(form[0]);    //if you only need to upload files then     //Grab the File upload control and append each file manually to FormData    //var files = form.find("#fileupload")[0].files;    //$.each(files, function() {    //  var file = $(this);    //  formData.append(file[0].name, file[0]);    //});    if ($(form).valid()) {        $.ajax({            type: "POST",            url: $(form).prop("action"),            //dataType: 'json', //not sure but works for me without this            data: formData,            contentType: false, //this is requireded please see answers above            processData: false, //this is requireded please see answers above            //cache: false, //not sure but works for me without this            error   : ErrorHandler,            success : successHandler        });    }});

this will than correctly populate your MVC model, please make sure in your Model, The Property for HttpPostedFileBase[] has the same name as the Name of the input control in html i.e.

<input id="fileupload" type="file" name="UploadedFiles" multiple>public class MyViewModel{    public HttpPostedFileBase[] UploadedFiles { get; set; }}