javascript – 如何检索本机html表单提交的进度?

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

这让我在这里:我需要能够在html表单元素上调用.submit(),然后挂钩上传进程,就像我在XMLHttpRequest上监听“progress”事件一样.

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

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

解决方法

我认为您无法在标准表单提交上获得进度.

所以我没有对此进行测试,但为什么不通过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请求还是标准浏览器请求.

它应该在all modern browsers.工作

See docs on FormData.

And here’s a link to that details如何跟踪ajax上传的进度.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...