Upload file with Ajax XMLHttpRequest

1. There is no such thing as xhr.file = file;; the file object is not supposed to be attached this way.

2. xhr.send(file) doesn't send the file. You have to use the FormData object to wrap the file into a multipart/form-data post data object:

   var formData = new FormData();
   formData.append("thefile", file);
   xhr.send(formData);
   

After that, the file can be access in $_FILES['thefile'] (if you are using PHP).

Remember, MDC and Mozilla Hack demos are your best friends.

EDIT: The (2) above was incorrect. It does send the file, but it would send it as raw post data. That means you would have to parse it yourself on the server (and it's often not possible, depend on server configuration). Read how to get raw post data in PHP here.