使用XmlHttpRequest发送文件:Streaming？

Question

我试图通过拖放上传大文件.我有这段Javascript代码:

xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('X-File-Name', file.name);
xhr.setRequestHeader('X-File-Size', file.size);
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);

where url是一个目标url的字符串,file是一个文件拖放后检索Blob到的(根据http://www.w3.org/TR/XMLHttpRequest2/#the-send-method).此代码适用于Chrome 12,Safari 5和Firefox 4,并在HTTP请求正文中发送文件的原始内容.

但是,如果文件足够大,则永远不会发送请求.相反,XMLHttpRequest对象触发和错误事件(没有任何有用的消息).在我的环境中,此限制为86Mb,但因机器而异.

Chrome的javascript控制台显示以下消息:

POST http://localhost/xfiles/xfiles.php undefined (undefined)

这与我的代码无关(与较小的文件完美配合).

浏览器似乎在内存中并在发送之前读取整个文件.可能有一个内存不足的异常或类似的东西会停止进程.在任何情况下,都没有发送HTTP请求,因此可以肯定服务器的限制与此问题无关.

无论如何,阅读整个文件是浪费资源.

是否有任何方法以流方式逐字节发送文件,而不必先将其存储在内存中？

Answer 1

尝试使用该Blob.slice方法将其拆分Blob为多个块,并将每个块作为单独的请求发送.

Answer 2

今天,使用chrome 31(windows),xhr.send(文件)不会将整个文件读入内存.事实是,我尝试xhr.send 100mb文件,并查看任务管理器的chrome内存使用情况 - 它在100mb文件上传期间仅略有增长.

作为旁注,xhr.send(file)适合PUT上传,对于POST更合适的是FormData:

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

但是,使用FormData会将上传时间增加约50% - 可能是因为base64编码.