XMLHttpRequest vs. Web套接字与其他东西

Question

我想将（单个）文件上传到服务器并显示上传的进度。

我知道我可以使用HTTP POST上传文件。我不熟悉网络套接字，但据我所知，二进制数据也可以通过这种方式发送，因为网络套接字是双向的，我可以获得上传的进度。

我并不担心旧浏览器，所以iframe和flash解决方案并不具有吸引力，除非在这条路线上有显着的优势。

我也对最好的服务器端技术感到好奇。使用像Django这样的WSGI服务器有什么好处？或者像Node.js这样的非阻塞I / O技术？我不是问Web框架x是否优于Web框架y，或者服务器x是否优于服务器y。但只是理想的技术应该具有什么才能在客户端设置上传。

更新：服务器端似乎与客户端上提供的技术/ API无关，以方便上传。

Answer 1

修改（2017-10-17）：截至目前，还可以选择使用Fetch API。它提供了与基于更现代的基于承诺的API背后的XMLHttpRequest基本相同的功能。浏览器polyfill本身不支持window.fetch()（目前主要是Internet Explorer和旧版Safari）。

XMLHttpRequest vs. Web套接字与其他东西

显然XMLHttpRequest。它在现代浏览器中的功能非常庞大，几乎涵盖了所有场景。它将产生标准的POST或PUT请求，任何Web服务器和框架组合都可以处理它。

虽然Web套接字适用于某些场景，但它是一种不同的协议，增加了许多复杂性 - 如果您需要来自服务器的实时响应，它们仅值得使用。正如你所指出的那样，像Flash这样的其他方法只是丑陋的黑客攻击。

发送二进制数据

通常，您无法直接访问文件。因此，您将在页面的某个位置放置一个<input type="file">表单字段，并等待用户选择文件。选项是：

仅发送文件内容：request.send(input.files[0])。请求正文将是文件的内容而不是其他内容，不会执行编码，也不会传输文件名之类的元数据。 Browser compatibility：Chrome 7，Firefox 3.6，Opera 12，IE 10。
Sending the data of the entire form：request.send(new FormData(input.form))。这里表单内容将被编码为multipart/form-data，这意味着您可以发送多个表单字段，并且还将传输字段和文件名等元数据。您也可以在发送之前modify the FormData object。根据服务器端框架，处理此请求可能比原始数据更简单，通常可以使用许多帮助程序。 Browser compatibility：Chrome 6，Firefox 4，Opera 12，IE 10。
Sending a typed array：以防您没有文件但只是想发送一些动态生成的二进制数据。这里没有执行额外的编码，因此就服务器端而言，这就像发送文件内容一样。 Browser compatibility：Chrome 9，Firefox 9，Opera 11.60，IE 10。

显示上传进度

你可以listen to progress events on XMLHttpRequest.upload。 progress events具有loaded和total属性，可用于确定您的请求的距离。 Browser compatibility：Chrome 7，Firefox 3.5，Opera 11.60，IE 10。

JavaScript库

当然，现有的库包含了此处概述的功能。这些在其他答案中提到，在网上搜索肯定会更多。我明确地不想在这里提出任何库 - 如果你应该使用它们中的哪一个纯粹是一个偏好的问题。

Answer 2

我的答案很晚，但是在这里：

简答：

XMLHttpRequest 是在现代浏览器中上传文件的最佳方式。

什么是XMLHttpRequest？

XMLHttpRequest是一个JavaScript对象，由Microsoft设计并由Mozilla，Apple和Google采用。它现在正在standardized in the W3C。它提供了一种从URL检索数据的简便方法，而无需进行整页刷新。网页只能更新页面的一部分，而不会中断用户的操作。 XMLHttpRequest在AJAX编程中大量使用。

尽管名称如此，但XMLHttpRequest可用于检索任何类型的数据，而不仅仅是XML ，并且它支持HTTP以外的协议（包括文件和ftp ）。

XMLHttpRequest对象在 Html5 规范中得到了改进。特别是XMLHttpRequest Level 2。

优点：

处理字段流，例如文件， Blob 和 FormData 对象，以便上传和下载
进度事件
来源请求
允许匿名请求 - 即不发送HTTP Referer
为请求

超时

正在后台
用户所在的页面保持不变
不需要对服务器端进行任何更改，因此现有的服务器端逻辑应保持不变，这样可以更轻松地调整此技术。

Html5进度事件：

根据Html5 Progress Events spec，Html5进度事件提供以下信息：

total - Total bytes being transferred
loaded - Bytes uploaded thus far
lengthComputable - Specifies if the total size of the data/file being uploaded is known

使用上述信息，提供剩余时间＆＃34;相当容易。给用户的信息。

让用户知情：

有关可供用户使用的文件的信息：

文件名
文件大小
Mime Type
完成百分比的进度条
上传速度或上传带宽
剩余的大致时间
到目前为止上传的字节
来自服务器端的回复

使用XMLHttpRequest演示文件上传

请检查＆＃34; Uploading files using Html5 with Progress indication demo＆＃34;举个例子。所需的所有JavaScript代码都在页面中，但不包含CSS。出于安全原因，文件类型仅限于jpg，png，gif和txt。最大文件大小为2MB。

XMLHttpRequest浏览器兼容性：

XMLHttpRequest Browser compatibility

Answer 3

可能Javascript的文件API是现代浏览器中的最佳方式：

http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/

http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/

服务器方面......我认为任何主要框架都有很好的覆盖HTTP文件POST功能。

Answer 4

可以通过AJAX上传文件。

使用jQuery form plugin。它完成了将文件绑定到表单并将其序列化的所有脏工作。它还能够显示上传进度。

服务器堆栈与它没什么关系。

<强> Demo

在现代浏览器中上传文件的最佳方式是什么？

4 个答案:

XMLHttpRequest vs. Web套接字与其他东西

发送二进制数据

显示上传进度

JavaScript库

简答：

优点：

Html5进度事件：

让用户知情：

使用XMLHttpRequest演示文件上传

XMLHttpRequest浏览器兼容性：