Why can't I upload files asynchronously?

Question

After a whole-day's study && trying, i finally give up upload files by pure AJAX (ps: this post How can I upload files asynchronously with JQuery? buried my last hope)

My question may be a little meaningless, but i still wanna know why ajax(or XMLHttpRequest) can't handle this? why can't the files transfered like the real httprequest?

Answer 1

Javascript cannot read local files for security reasons, so we can't send the data using AJAX.

However you can POST a standard HTML form, and set the form target to be an invisible iframe on the page. This iframe can then use server side code to handle the upload.

If your reason to use AJAX is because you'd like a progress bar as the file is uploading, using this method you can use a server-side static variable to store the progress of the file upload, then use AJAX to make a simple, timed request to another HTTP page which just returns the upload progress.

Answer 2

Just as an updated answer in case someone Googles this, XMLHttpRequest level 2 does support AJAX submittal of file inputs.

Browser support:

http://caniuse.com/xhr2

It uses the FormData Javascript object.

How to send FormData objects with Ajax-requests in jQuery?

Don't forget to turn off processData and contentType if you're doing this.

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});