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

其中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编码。

Answer 3

如果您使用的是jquery，请查看此jquery插件 http://github.com/valums/file-uploader

希望它有所帮助。

使用XmlHttpRequest发送文件：Streaming？

3 个答案: