Wsrtjtyk

This is my html which I'm generating dynamically using drag and drop functionality.

<form method="POST" id="contact" name="13" class="form-horizontal wpc_contact" novalidate="novalidate" enctype="multipart/form-data">

<fieldset>

    <div id="legend" class="">

        <legend class="">file demoe 1</legend>

        <div id="alert-message" class="alert hidden"></div>

    </div>



    <div class="control-group">

        <!-- Text input-->

        <label class="control-label" for="input01">Text input</label>

        <div class="controls">

            <input type="text" placeholder="placeholder" class="input-xlarge" name="name">

            <p class="help-block" style="display:none;">text_input</p>

        </div>

        <div class="control-group">  </div>

        <label class="control-label">File Button</label>



        <!-- File Upload --> 

        <div class="controls">

            <input class="input-file" id="fileInput" type="file" name="file">

        </div>

    </div>

    <div class="control-group">    



        <!-- Button --> 

        <div class="controls">

            <button class="btn btn-success">Button</button>

        </div>

    </div>

</fieldset>

</form> 

this is my js code...

<script>

    $('.wpc_contact').submit(function(event){

        var formname = $('.wpc_contact').attr('name');

        var form = $('.wpc_contact').serialize();               

        var FormData = new FormData($(form)[1]);



        $.ajax({

            url : '<?php echo plugins_url(); ?>'+'/wpc-contact-form/resources/js/tinymce.php',

            data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData},

            type : 'POST',

            processData: false,

            contentType: false,

            success : function(data){

            alert(data); 

            }

        });

   }

For correct form data usage you need to do 2 steps.

Preparations

You can give your whole form to FormData() for processing

var form = $('form')[0]; // You need to use standard javascript object here

var formData = new FormData(form);

or specify exact data for FormData()

var formData = new FormData();

formData.append('section', 'general');

formData.append('action', 'previewImg');

// Attach file

formData.append('image', $('input[type=file]')[0].files[0]); 

Sending form

Ajax request with jquery will looks like this:

$.ajax({

    url: 'Your url here',

    data: formData,

    type: 'POST',

    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)

    processData: false, // NEEDED, DON'T OMIT THIS

    // ... Other options like success and etc

});

After this it will send ajax request like you submit regular form with enctype="multipart/form-data"

Update: This request cannot work without type:"POST" in options since all files must be sent via POST request.

Note: contentType: false only available from jQuery 1.6 onwards

I can't add a comment above as I do not have enough reputation, but the above answer was nearly perfect for me, except I had to add

type: "POST"

to the .ajax call. I was scratching my head for a few minutes trying to figure out what I had done wrong, that's all it needed and works a treat. So this is the whole snippet:

Full credit to the answer above me, this is just a small tweak to that. This is just in case anyone else gets stuck and can't see the obvious.

  $.ajax({

    url: 'Your url here',

    data: formData,

    type: "POST", //ADDED THIS LINE

    // THIS MUST BE DONE FOR FILE UPLOADING

    contentType: false,

    processData: false,

    // ... Other options like success and etc

})

<form id="upload_form" enctype="multipart/form-data">

jQuery with CodeIgniter file upload:

var formData = new FormData($('#upload_form')[0]);



formData.append('tax_file', $('input[type=file]')[0].files[0]);



$.ajax({

    type: "POST",

    url: base_url + "member/upload/",

    data: formData,

    //use contentType, processData for sure.

    contentType: false,

    processData: false,

    beforeSend: function() {

        $('.modal .ajax_data').prepend('<img src="' +

            base_url +

            '"asset/images/ajax-loader.gif" />');

        //$(".modal .ajax_data").html("<pre>Hold on...</pre>");

        $(".modal").modal("show");

    },

    success: function(msg) {

        $(".modal .ajax_data").html("<pre>" + msg +

            "</pre>");

        $('#close').hide();

    },

    error: function() {

        $(".modal .ajax_data").html(

            "<pre>Sorry! Couldn't process your request.</pre>"

        ); // 

        $('#done').hide();

    }

});

you can use.

var form = $('form')[0]; 

var formData = new FormData(form);     

formData.append('tax_file', $('input[type=file]')[0].files[0]);

or

var formData = new FormData($('#upload_form')[0]);

formData.append('tax_file', $('input[type=file]')[0].files[0]); 

Both will work.

$('#form-withdraw').submit(function(event) {



    //prevent the form from submitting by default

    event.preventDefault();







    var formData = new FormData($(this)[0]);



    $.ajax({

        url: 'function/ajax/topup.php',

        type: 'POST',

        data: formData,

        async: false,

        cache: false,

        contentType: false,

        processData: false,

        success: function (returndata) {

          if(returndata == 'success')

          {

            swal({

              title: "Great",

              text: "Your Form has Been Transfer, We will comfirm the amount you reload in 3 hours",

              type: "success",

              showCancelButton: false,

              confirmButtonColor: "#DD6B55",

              confirmButtonText: "OK",

              closeOnConfirm: false

            },

            function(){

              window.location.href = '/transaction.php';

            });

          }



          else if(returndata == 'Offline')

          {

              sweetAlert("Offline", "Please use other payment method", "error");

          }

        }

    });







}); 

Actually The documentation shows that you can use XMLHttpRequest().send()
to simply send multiform data
in case jquery sucks