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

Question

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

Tom*_*Tom 63 javascript django file-upload http websocket

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

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

我不担心旧浏览器,所以iframe和flash解决方案不是很吸引人,除非在这条路线上有显着的优势.

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

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

Answer 1

Wla*_*ant 61

编辑(2017-10-17):截至目前,还有使用Fetch API的选项.它提供了与基于更现代的基于承诺的API背后的XMLHttpRequest基本相同的功能.对于本机不支持的浏览器有一个polyfillwindow.fetch()(现在主要是Internet Explorer和旧的Safari版本).

XMLHttpRequest与Web套接字与其他东西相比

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

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

发送二进制数据

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

仅发送文件内容: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.

显示上传进度

你可以听听progress活动XMLHttpRequest.upload.该progress事件有loaded和total,使确定你在多大程度上符合你的要求得到了性能.浏览器兼容性:Chrome 7,Firefox 3.5,Opera 11.60,IE 10.

JavaScript库

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

Answer 2

Ped*_*ito 20

我的答案很晚,但在这里:

简短回答:

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

什么是XMLHttpRequest？

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

尽管名称如此,XMLHttpRequest可用于检索任何类型的数据,而不仅仅是XML,它支持HTTP以外的协议(包括文件和ftp).

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

好处:

处理字节流,如File,Blob和FormData对象,以便上载和下载
上传和下载过程中的进度事件
跨域请求
允许发出匿名请求 - 即不发送HTTP Referer
为请求设置超时的功能
上传正在后台进行
用户所在的页面保持不变
不需要对服务器端进行任何更改,因此现有的服务器端逻辑应保持不变,这使得更容易调整此技术.

Html5进展事件:

根据Html5 Progress Events规范,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

Run Code Online (Sandbox Code Playgroud)

使用上述信息,向用户提供"剩余时间"信息相当容易.