How to add file value with jQuery serialize()

Question

I am sorry for the weird title of the question.

I am trying to process a form using jQuery ajax which contain a file.

This is what I am trying to use..

<script>
     var file_data = $('#qfile').prop('files')[0];   
     var form_data = new FormData();
     form_data.append('file', file_data);// 
     var data = $(this).serialize();
     // Here is the problem. I sucessfully sent the file alone but I want to 
     //send all the form input values using serialize() and add formData too

</script>

I want to send the file and also all the input serialize()

Here is my ajax part...

<script>
   $.ajax({

            type : 'POST',
            url  : 'ajax/ajax-reg.php',
            data : form_data,
            processData: false,
            contentType: false,

</script>

Answer 1

I want to send all the form input values using serialize() and add formData too

In this case serialize() won't help you, but there is a better way. Simply provide the form DOMElement to the FormData() constructor. Then all the data from the form fields (including the images) will be placed in to the FormData object. Try this:

var form_data = new FormData($('form')[0]);
$.ajax({
    type: 'POST',
    url: 'ajax/ajax-reg.php',
    data: form_data,
    processData: false,
    contentType: false,
    success: function() {
        // handle response here...
    }
});

Answer 2

Using jQuery, you also can try something like this:

var postData = new FormData($('form')[0]);

postData.append("In", $("input[name=In]").val()); // usual input
postData.append("Txt", $("textarea[name=Txt]").text()); // textarea
postData.append("File", $("input[name=File]")[0].files[0]); // file

$.post('ajax/ajax-reg.php', postData);