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

问题描述

我想将(单个)文件上传到服务器并显示上传进度.

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

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

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 web sockets are bi-directional I could get the 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 服务器有什么优势吗?或者像 Node.js 这样的非阻塞 I/O 技术?我不是在问 web 框架 x 是否比 web 框架 y 更好，或者服务器 x 是否比服务器 y 更好.但只是为了在客户端实现上传，理想的技术应该具备什么.

更新:似乎服务器端与客户端上可用的技术/API 无关以促进上传.

推荐答案

Edit (2017-10-17):截至目前，还可以选择使用 Fetch API.它在更现代的基于 Promise 的 API 背后提供与 XMLHttpRequest 基本相同的功能.对于不支持 window.fetch() 的浏览器，有一个 polyfill本机(目前主要是 Internet Explorer 和较旧的 Safari 版本).

Edit (2017-10-17): As of now, there is also the option to use Fetch API. It offers essentially the same capabilities as XMLHttpRequest behind a more modern promise-based API. There is a polyfill for browsers that don't support window.fetch() natively (which is mainly Internet Explorer and older Safari versions right now).

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

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.

虽然网络套接字在某些情况下很好，但它是一种不同的协议，增加了很多复杂性 - 只有当您需要来自服务器的实时响应时，它们才值得使用.正如您自己指出的那样，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 对象 在发送之前.根据服务器端框架的不同，处理此请求可能比原始数据更简单，通常可以使用许多帮助程序.浏览器兼容性: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.

您可以在上收听progress事件>XMLHttpRequest.upload.progress 事件有loaded 和 total 属性，用于确定您的请求已经完成了多远.浏览器兼容性: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屋！