在现代浏览器中上传文件的最佳方法是什么？ [英] What is the best way to upload files in a modern browser

问题描述

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

I want to upload a (single) file to a server and show progress of the upload.

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

I know I can upload a file using HTTP POST. I'm not familiar with web-sockets, but as I understand, binary data can also be sent that way and because websockets are bi-directional I could get progress of the upload.

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

I'm not worried about older browsers so iframe's and flash solutions aren't very appealing unless there is a significant advantage in going that route.

对于最好的服务器端技术我也很好奇。他们的优势是使用像Django这样的wsgi服务器吗？或者可能是非阻塞的I / O技术，如Node.js？我不是问，如果web框架x比web框架y更好，或者服务器x比服务器y更好。但是简单的理想技术应该是为了在客户端进行上传。

更新：像服务器端一样，对客户端上可用的技术/ API没有影响，以方便上传。

推荐答案

XMLHttpRequest vs. Web sockets vs. Something else

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

XMLHttpRequest vs. Web sockets vs. Something else

Clearly XMLHttpRequest. Its capabilities in modern browsers are enormous and cover almost all scenarios. It will produce a standard POST or PUT request, any web server and framework combination can deal with that.

虽然Web套接字对于某些场景很好，但它是一种不同的协议增加了很多复杂性 - 如果您需要来自服务器的实时响应，它们只能值得使用。而您注意到，像Flash这样的其他方法只是丑陋的黑客。

While web sockets are nice for some scenarios, it's a different protocol that adds lots of complexity - they are only worth using if you need real-time responses from the server. And as you noted yourself, other approaches like Flash are merely ugly hacks.

通常，您将无法直接访问文件。因此，您的页面上的某个地方将有一个< input type =file> 表单字段，并等待用户选择一个文件。选项然后是：

Normally, you won't have direct access to files. So you will have an <input type="file"> form field somewhere on your page and wait for the user to choose a file. The options then are:

• 仅发送文件内容： request.send（input.files [0]） 。请求体将是文件的内容，没有其他内容，不会执行编码，也不会传输文件名等元数据。 浏览器兼容性：Chrome 7，Firefox 3.6，Opera 12 ，IE 10。


• 发送整个表单的数据： request.send（new FormData（input.form））。在这里，表单内容将被编码为 multipart / form-data ，这意味着您可以发送多个表单字段和元数据，如字段和文件名也将被传输。您还可以修改 FormData object 发送之前。根据服务器端框架，处理此请求可能比原始数据更简单，通常可以使用许多帮助器。 浏览器兼容性：Chrome 6，Firefox 4，Opera 12 ，IE 10。


• 发送一个类型化的数组：为了防止你没有文件，只是想发送一些你即时生成的二进制数据。这里没有执行额外的编码，所以就服务器端而言，这样做就像发送文件内容一样。 浏览器兼容性：Chrome 9，Firefox 9，Opera 11.60 ，IE 10。

• Sending only the file contents: request.send(input.files[0]). The request body will be the file's contents and nothing else, no encoding will be performed and no metadata like file name will be transmitted. Browser compatibility: Chrome 7, Firefox 3.6, Opera 12, IE 10.
• Sending the data of the entire form: request.send(new FormData(input.form)). Here the form contents will be encoded as multipart/form-data, meaning that you can send multiple form fields and metadata like field and file names will be transmitted as well. You can also modify the FormData object before sending it. Depending on the server-side framework, handling this request might be simpler than raw data, there are typically many helpers you can use. Browser compatibility: Chrome 6, Firefox 4, Opera 12, IE 10.
• Sending a typed array: just in case you don't have a file but merely want to send some binary data you generate on the fly. No extra encoding is being performed here, so as far as the server side is concerned this works like sending file contents. Browser compatibility: Chrome 9, Firefox 9, Opera 11.60, IE 10.

您可以收听进度事件 XMLHttpRequest.upload 。 progress events 有加载和总计属性，可以确定您的请求有多远。 浏览器兼容性：Chrome 7，Firefox 3.5，Opera 11.60 ，IE 10。

You can listen to progress events on XMLHttpRequest.upload. The progress events have loaded and total properties that allow determining how far you've got with your request. Browser compatibility: Chrome 7, Firefox 3.5, Opera 11.60, IE 10.

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

There are of course existing libraries wrapping the functionality outlined here. These are mentioned in other answers, searching on the web will certainly turn up even more. I explicitly don't want to propose any libraries here - which of them if any you should use is purely a matter of preference.

这篇关于在现代浏览器中上传文件的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！