CODEWITHSUNDEEP
ajaxfile-upload
rhapsodyn
rhapsodyn

Reputation: 3352

Why can't I upload files asynchronously?

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?

Upvotes: 5

Views: 2359

Answers (2)

Jamon Holmgren
Jamon Holmgren

Reputation: 24392

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

Upvotes: 2

Connell
Connell

Reputation: 14411

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.

Upvotes: 8

Related Questions