如何检索本机html表单提交的进度？

Question

我正在为Rails应用程序做一些前端工作,我不会弄乱后端架构.基本上,我应该允许用户上传文件并使该提交基本上通过CarrierWave处理的表单直接进入亚马逊.如果你曾试图用ajax做同样的事情,你会知道这几乎是不可能的.

这让我在这里:我需要能够调用.submit()一个html表单元素,然后挂钩上传的进程,就好像我正在侦听XMLHttpRequest上的"progress"事件.

原谅我没有显示大量的代码.我真的只是在寻找两件非常简单的事情.

1. 是否可以捕获表单的本机进度事件？
2. 如果是这样,基本技术是什么？它简单form.addEventListener('progress', function () {...})吗？(< - 顺便说一下,这不起作用.)

Answer 1

我认为您无法通过标准表单提交获得上传进度。

所以我还没有测试过这个，但为什么不通过 AJAX 提交表单呢？您可以使用FormData对象上传文件，该对象可以处理上传的多部分请求。

像这样的事情可能会奏效：

// grab the form you want to submit.
var formElement = document.getElementById("myFormElement");

// make an xhr object
var request = new XMLHttpRequest();

// track progress
request.upload.addEventListener('progress', progressHandler, false);

// setup request method and url
request.open("POST", formElement.action);

// send the request
request.send(new FormData(formElement));

您必须监听服务器响应并执行它告诉您的操作、重定向或处理故障或其他任何事情。但我认为它应该有效。您提交到的服务器可能并不关心它是 xhr 请求还是标准浏览器请求。

它应该适用于所有现代浏览器。

请参阅 上的文档FormData。

这是详细介绍如何跟踪 ajax 上传进度的链接。