How to use FormData for AJAX file upload?

Question

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

Answer 1

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

Answer 2

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