AJAX File Upload with XMLHttpRequest

by

To avoid the post_max_size limitation problem… but also out of memory problems on both sides :

On the client side

  • use PUT instead of POST :

    xhr.open("put", "upload.php", true);

  • add custom headers to specify original FileName and FileSize :

    xhr.setRequestHeader("X-File-Name", file.name);
    xhr.setRequestHeader("X-File-Size", file.size);

  • use the File object directly in your XHR send method :

    xhr.send(file);

    Please note that the File object can be obtained directly via the “files” property of your input[type=file] DOM object

On the server side

  • read the custom headers via $_SERVER :

    $filename = $_SERVER['HTTP_X_FILE_NAME'];
    $filesize = $_SERVER['HTTP_X_FILE_SIZE'];

  • read file data using php://input :

    $in = fopen('php://input','r');

You’ll then be able to send very big files (1GB or more) without any limitation!!!

This code works for FireFox 4+, Chrome 6+, IE10+

More Related Contents:

  1. How can I upload files asynchronously with jQuery?
  2. Send POST data using XMLHttpRequest
  3. jQuery AJAX file upload PHP
  4. Origin is not allowed by Access-Control-Allow-Origin
  5. download file using an ajax request
  6. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘…’ is therefore not allowed access
  7. Uploading multiple files using formData()
  8. HTTP HEAD Request in Javascript/Ajax?
  9. jQuery has deprecated synchronous XMLHTTPRequest
  10. Prevent redirection of Xmlhttprequest
  11. What’s the best way to retry an AJAX request on failure using jQuery?
  12. Is it possible to use Ajax to do file upload?
  13. How to upload a file using jQuery.ajax and FormData
  14. Empty responseText from XMLHttpRequest
  15. How to intercept all http requests including form submits
  16. How to get response url in XMLHttpRequest?
  17. Fetch API vs XMLHttpRequest
  18. loading json data from local file into React JS
  19. XMLHttpRequest (Ajax) Error
  20. Cross-site XMLHttpRequest
  21. Ajax file upload
  22. Javascript: Overriding XMLHttpRequest.open()
  23. Cross-Origin XMLHttpRequest in chrome extensions
  24. How to Detect Cross Origin (CORS) Error vs. Other Types of Errors for XMLHttpRequest() in Javascript
  25. XmlHttpRequest onprogress interval
  26. IE10/IE11 Abort Post Ajax Request After Clearing Cache with error “Network Error 0x2ef3”
  27. Same Origin Policy – AJAX & using Public APIs
  28. Opinion about synchronous requests in web workers
  29. Intercept XMLHttpRequest and modify responseText
  30. XmlHttpRequest.responseText while loading (readyState==3) in Chrome

Leave a Comment