How to upload a file using jQuery.ajax and FormData

by

You have to add processData:false,contentType:false to your method, so that jQuery does not alter the headers or data (which breaks your current code).

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);

    $.ajax({
       url: "upload.php",
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(response) {
           // .. do something
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); // Optional
       }
    });
}

More Related Contents:

  1. Upload file with Ajax XMLHttpRequest
  2. How can I upload files asynchronously with jQuery?
  3. jQuery Ajax File Upload
  4. How to use FormData for AJAX file upload?
  5. Upload multiple image using AJAX, PHP and jQuery
  6. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘…’ is therefore not allowed access
  7. What is the cleanest way to get the progress of JQuery ajax request?
  8. jQuery has deprecated synchronous XMLHTTPRequest
  9. Get file size before uploading
  10. Using HTML5 file uploads with AJAX and jQuery
  11. What’s the best way to retry an AJAX request on failure using jQuery?
  12. Show a progress bar for downloading files using XHR2/AJAX
  13. jQuery+JavaScript: Create custom ajax call function with single object as argument [closed]
  14. jQuery: Return data after ajax call success [duplicate]
  15. Uploading both data and files in one form using Ajax?
  16. How do I POST urlencoded form data with $http without jQuery?
  17. Prevent redirection of Xmlhttprequest
  18. Find out how long an Ajax request took to complete
  19. jquery submit form and then show results in an existing div
  20. Fetch API vs XMLHttpRequest
  21. Use JSONP to load an html page
  22. Cancel event on input type=”file”
  23. Javascript – Stop form submit depending on ajax response [duplicate]
  24. How do I resend a failed ajax request?
  25. When loading an html page via ajax, will script tags be loaded?
  26. How to catch net::ERR_CONNECTION_REFUSED
  27. IE10/IE11 Abort Post Ajax Request After Clearing Cache with error “Network Error 0x2ef3”
  28. What is the best multiple file JavaScript / Flash file uploader?
  29. Multiple url in same ajax call?is this possible?
  30. Prevent ajax call from firing twice

Leave a Comment