用ajax发布文件和数据

Question

I have read in other post on SO, similar to what is happening to me, but I still can not get the solution

$('#edit-continue').on('click', function(e) {
    e.preventDefault();
    var photo = new FormData();                               <-----
    jQuery.each(jQuery('#photo')[0].files, function(i, file) {<----- SO suggest for file upload
        photo.append('file-' + i, file);                      <-----
    });
    $.ajax({
        type: "POST",
        url: "/templates/staycation/common/edit-profile.php",
        data: {
            id: $('#id').val(),
            email: $('#email').val(),
            birthday: $('#birthday').val(),
            gender: $("input[name='gender']:checked").val(),
            photo: photo,
        },
        success: function(data) {
            console.log('pass');
            console.log(data);
        },
        error: function(data) {
            console.log('not pass');
            console.log(data);
        },
        cache: false,
        contentType: false,
        processData: false, <------ i think my error is here
    });

if i leave processData: false, , the post arrives empty, by making echo of my array, all data is empty, in the other case, if I comment, the console throws Uncaught TypeError: Illegal invocation

I need to do is send the values entered by the user such as "email", "gender", ... and profile picture, to make an update to the database and to save the image to a folder

Answer 1

this is what working perfectly for me

// formData will wrap all files and content of form
var formData=new FormData($('#formId')[0]); 
// you can add more data ot formData after this to
$.ajax({
        url     :   'upload.php',
        type    :   'post',
        data    :   formData,
        processData:false,
        contentType:false,
        success :   function(e)
                    {
                        alert('uploaded successfully');
                    },
        error   :   function()
                    {
                        alert('hello from here');   
                    }
    });