Post File and data with 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

http://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax — Niklesh Raut, Jun 16 '16 at 03:15
See http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/ — guest271314, Jun 16 '16 at 03:36

score 0 · Answer 1 · answered Jun 16 '16 at 04:34

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');   
                    }
    });

Post File and data with ajax

1 Answers1