How to use FormData for AJAX file upload?

by

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

More Related Contents:

  1. jQuery Ajax File Upload
  2. Upload multiple image using AJAX, PHP and jQuery
  3. Upload file with Ajax XMLHttpRequest
  4. Get file size before uploading
  5. Using HTML5 file uploads with AJAX and jQuery
  6. How to upload a file using jQuery.ajax and FormData
  7. Difference between .ajaxSubmit() vs .submit()
  8. jQuery Ajax POST example with PHP
  9. jQuery AJAX submit form
  10. Send JSON data with jQuery
  11. What is AJAX and how does it work? [duplicate]
  12. Getting all selected checkboxes in an array
  13. jQuery get textarea text
  14. How to bind Events on Ajax loaded Content?
  15. Loading local files with Javascript without a web server
  16. JSF/PrimeFaces ajax updates breaks jQuery event listener function bindings
  17. My javascript is returning this error: $.ajax is not a function
  18. Catching 302 FOUND in JavaScript
  19. JQuery Ajax – How to Detect Network Connection error when making Ajax call
  20. AJAX jQuery refresh div every 5 seconds
  21. cross-origin ‘Authorization’-header with jquery.ajax()
  22. Rails flash notice via ajax
  23. How do I abort image load requests without using window.stop()
  24. Cross-origin resource sharing (CORS) concept
  25. How to load all server side data on initial vue.js / vue-router load?
  26. JQuery Ajax Post results in 500 Internal Server Error
  27. JQuery $.ajax() post – data in a java servlet
  28. Uploading multiple files asynchronously by blueimp jquery-fileupload
  29. AJAX Page Download progress
  30. Set Request Header jQuery Ajax

Leave a Comment