正文 

当前位置： 首页 > 源码 >

Ajax表单上传进度条

     2023-05-08     52

关键词：

【中文标题】Ajax表单上传进度条【英文标题】：Ajax form upload progress bar 【发布时间】：2013-04-18 12:01:34 【问题描述】：

尝试为表单上传制作进度条（旧的 HTML4 表单上传，而不是新的 HTML5 API）。进度实际上跟踪文件移动后正在完成的其他工作。它的设计方式是流保持打开状态，直到完成额外的工作，然后服务器端方法最终返回，从而关闭流。

我遇到了一些特定于 Chrome 的问题。我也有一个可行的实现，但我希望能得到“更好”的东西。

对于任何可能要求提供代码的人：这里故意不提供。场景解释了问题；代码本身没有“错误”，只会更加混乱。

简而言之，第 1 次尝试失败

    启动表单上传 在获取某些 JSON 中的进度的 Ajax 调用上设置间隔 将数据呈现到进度条

失败原因：上传流阻塞了页面上的其他活动，并且您在传输过程中无法进行额外的 Ajax 调用。

简而言之，第 2 次尝试失败

    创建一个包含相同 Ajax 调用的 iFrame 将数据呈现给 iFrame 中的元素（所需的一切都是自包含的，至少不引用“顶部”文档）

结果：

在启动表单上传之前，我可以从 JSON 中呈现“状态：等待”。渲染函数还增加了一个计数器，所以我会看到“尝试#X”。状态等待时，尝试次数会增加。

启动传输后，Ajax 调用成功获得 200，我可以检查响应以查看 JSON 确实存在。

但是，我无法更新 iFrame 中的“shadow DOM”（这是正确的术语吗？）。尝试访问 iFrame 中的节点并对其进行修改失败。甚至计数器也没有增加。

传输完成后，它将成功呈现“状态：完成”，并且计数器会向前跳（计数器正在递增，但将其呈现到 iFrame 只是不起作用）

GRR！

成功尝试

iFrame 不再请求 Ajax。 iframe 的 src 属性设置为返回预渲染进度条的 URL。正在加载到 iframe 中的文档设置为重新加载自身。所以在规定的时间间隔内，它会重新渲染一个“移动”的新进度条。

结果是一个“工作”进度条，尽管有时请求中的延迟会导致 iframe 瞬间空白，这不是我的偏好。

谁能想到更好的方法来做到这一点？是否有可能我可以让 iFrame 中的表单本身而 Ajax 在“顶部”文档中工作？

我主要是想把表现层和数据层分开，但是只要我必须返回一个渲染的进度条，那是行不通的。作为奖励，如果我能找到一种通过 Ajax 更新进度条的方法，我就不会有那些“空白”光点。

【问题讨论】：

您是否尝试过将文件上传提交到 iFrame，该 iFrame 不会阻止页面上的任何内容，但允许发生服务器请求？ Alos - 根据您的限制 - 如果您可以访问 HTML5 浏览器，那么现在 XHR 对象上有一个进度事件。但它只支持 Chrome 和 Firefox（可能是 Opera）。绝对不是 IE。 谢谢，isuriel。我认为这将是一些尝试。我还没有这样做。 HTML5 进度事件将使我能够访问“移动”部分，但我仍然需要从服务器访问“移动后”进度。但扭转 iFrame 的角色可能是一种方法。 这个似乎有你需要的一切，以防你使用 jQuery ***.com/questions/15410265/… Oleg，如果我正确阅读了代码，它不会处理“文件移动后”部分。在完成“额外”工作时，它只会保持 100%；这将适用于传输的第一段（移动文件），但它不提供捕获第二段（正在完成的额外工作）进度的机制。 【参考方案1】：

要扩展我的评论并提供指导，要执行“隐藏 iframe 文件上传”，您需要一个带有名称的隐藏框架（不是很明显吗？）。

<html>
  <body>
    <iframe name="file-upload" src="" style="border: none; visibility: hidden; width: 0; height: 0; position: absolute; top: 0; left: 0;"></iframe>
    The iframe shouldn't be visible, just pretend I didn't use inline styles though.
    <form id="uploadForm" action="anaction.php" enctype="whatever-you-need-here" method="post">
      File: <input type="file" /><br />
      <input type="submit" value="Upload" />
    </form>
  </body>
</html>

到目前为止所有非常标准的东西。接下来是 Javascript：

var form = document.getElementById("uploadForm");
form.onsubmit = function()  
  console.log("The form has been submitted, start progress!"); 

form.target = "file-upload"; // the name of the iframe
// Go about your business, when "Upload" is pressed the file will be submitted
// to the iframe so you'd start your progress requests on form submit.

忽略不良做法，这是一个简单的例子。

【讨论】：

似乎不起作用。我的编码类型是“multipart/form-data”；上传有效，但在 Chrome 中仍然存在阻塞条件。不过，我不确定如何判断它是否实际上是从 iFrame 发送文件；看起来它仍在从顶部文档发送它。 注意：它似乎在 Firefox 中工作，有点：代码很好，但表单上传不断使浏览器崩溃。 ;) 我猜最近表单上传的错误实现。 我取消了表单上的操作（如果您也将其关闭也很可疑），并且 IFrame 可能需要一个空的 src 属性才能开始 - 我不确定。除此之外，我以前使用过这种方法没有任何问题。 是的，我有一个空的 src 属性并包含一个动作。上传确实启动了；它只是不允许 Ajax 调用进度（在 Chrome 中）。 @Azd325 如果使用足够新的 jQuery 版本（我认为是 1.9）然后：$(formSelector).prop("target", "file-upload"); 否则：$(formSelector)[0].target = "file-upload";【参考方案2】：

老实说，我为一个应用做所有的前端开发，我也在寻找同样的东西。首先，我尝试使用我们的 socket.io 发送回一个数字，然后将其转换为百分比。然后，我会将其应用于 twitter 引导程序栏。

我最终做和坚持的是使用好的上传器http://fineuploader.com/ 文档有点烂，你必须稍微玩弄它，但它有一个内置事件，在上传一些东西时会一遍又一遍地触发实际上会返回你的进度。

【讨论】：

如果您有任何改进文档的建议，请在 Fine Uploader Github 项目中打开a support ticket。我已经竭尽全力使文档完整，但我想知道它是否可以进一步改进。 我会查看 Fine Uploader；我只是想知道它将如何处理我拥有的非常规用例（在完成一些“额外”工作之前，服务器不会返回并关闭流）。 @GregPettit 这取决于您的期望。如此处所述，您的用例对我来说并没有不合常规（除非我遗漏了什么）。【参考方案3】：

我决定使用：http://blueimp.github.io/jQuery-File-Upload/，因为它是免费的，并且提供了不错的进度条。

【讨论】：

看起来很有希望，Garath。我会调查的！【参考方案4】：

上次我只是将带有数据的表单提交到一些不可见的 iframe，然后我就可以忘记它了。

接下来我开始轮询一些 URL/REST API 的进度。

一旦提交完成 - 事件将触发，其处理程序将停止进度轮询。

我认为这种方法没有任何问题，但由于某种原因，您的两种方法似乎都与我所描述的不符，所以我将其作为答案。

如果您使用 jQuery，最好的方法是使用 jQuery Form plugin“ajaxify”您的表单。示例可以参考这个问题：File upload progress bar with jQuery。

【讨论】：

这似乎是 izuriel 在 cmets 中所建议的。我还没有尝试过，但这个想法是合理的。我会回来报告的！

带有节点（socket.io 和强大）和 ajax 的文件上传进度条

...自学一些Ajax，本课需要在本地构建一个简单的文件上传表单。我在Windows7上运行XAMPP，并为http://test设置了一个虚拟主机。书中的解决方案是使用nod 查看详情

如何在ajax文件上传中显示进度条

】如何在ajax文件上传中显示进度条【英文标题】：Howtoshowprogressbarinajaxfileupload【发布时间】：2013-01-2605:22:52【问题描述】：我的代码发布了ajax请求，但没有显示进度条。请帮助更正代码以显示工作进度条。$(document).ready(function()... 查看详情

Sinatra，上传表单中的进度条

】Sinatra，上传表单中的进度条【英文标题】：Sinatra,progressbarinuploadform【发布时间】：2011-03-0623:21:21【问题描述】：我正在开发一个包含上传表单的Sinatra应用程序，其中有一个进度条指示上传完成了多少。如ryandahl所述，该过程... 查看详情

显示多文件上传 Jquery/Ajax 的进度

...619:04:36【问题描述】：我有允许用户上传多个文件的上传表单。我决定如果文件很大，进度条会很好。下面是我的源代码。我是jquery的新手，通常我只会使用php，但我发现ajax对用户更友好。<divid="new_upload"><div 查看详情

PHP Ajax 上传进度条

】PHPAjax上传进度条【英文标题】：PHPAjaxUploadProgressBar【发布时间】：2012-04-1007:30:29【问题描述】：<formenctype="multipart/form-data"action="upload.php"method="POST"><inputname="uploaded"type="file"/><inputtype="submit"value="Up 查看详情

使用 jQuery $.ajax 和 Spring Boot 上传图片的进度条

】使用jQuery$.ajax和SpringBoot上传图片的进度条【英文标题】：ProgressbarforanimageuploadwithjQuery$.ajaxandSpringBoot【发布时间】：2018-01-0619:41:49【问题描述】：我在$.ajax帖子中设置进度条时遇到问题，该帖子通过带有Spring框架的@Controller将... 查看详情

[layui]上传文件带进度条+表单提交功能优化(代码片段)

上传文件带进度条+表单提交功能优化前期做了一个简视频提交；每次只提交一个需要重新上传。视频文件较大时候没有进度提示，用户体验并不好，今天做一个简单的优化！如果监听提交表单时候，回调路径可能还未完成。提... 查看详情

HTML5：带有进度条的 AJAX 文件上传

】HTML5：带有进度条的AJAX文件上传【英文标题】：HTML5:AJAXfileuploadwithprogressbar【发布时间】：2011-11-0602:38:13【问题描述】：我正在寻找一个带有HTML5进度条的文件上传器。我尝试使用其他地方的一些教程，包括SO。ThisSOanswer（被接... 查看详情

通过 HTTP 表单上传文件，通过 MultipartEntityBuilder，带有进度条

】通过HTTP表单上传文件，通过MultipartEntityBuilder，带有进度条【英文标题】：UploadafilethroughanHTTPform,viaMultipartEntityBuilder,withaprogressbar【发布时间】：2013-09-2815:31:17【问题描述】：短版-org.apache...MultipartEntity已弃用，其升级版Multipart... 查看详情

带有进度条的 jQuery ajax 上传 - 没有 flash

】带有进度条的jQueryajax上传-没有flash【英文标题】：jQueryajaxuploadwithprogressbar-noflash【发布时间】：2011-02-1210:59:54【问题描述】：我正在寻找类似于uploadify的文件上传器，其进度条不依赖于Flash，最好使用jQuery-这可能吗？【问题... 查看详情

取消表单文件上传提交

】取消表单文件上传提交【英文标题】：Cancelformfileuploadsubmission【发布时间】：2013-05-1708:45:17【问题描述】：我正在处理带有一些附加数据的文件上传表单，并希望有一个取消按钮。我的网站在Django上运行。我使用不带Ajax的提... 查看详情

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

如何在ajax调用中获取文件上传进度状态？

】如何在ajax调用中获取文件上传进度状态？【英文标题】：Howtogetthefileuploadingprogressstatusinajaxcall?【发布时间】：2020-04-0408:36:44【问题描述】：我正在通过ajax上传多个文件，我需要在其中保留一个进度条。只有在所有过程完成后... 查看详情

ajax大文件切割上传以及带进度条。

分块传输的原理就是利用HTML5新增的文件slice截取函数。 代码如下：html：<inputid="f"type="file"name="part"onchange="writeFile()">JS：核心部分已经加粗显示了，其他部分不用看，因为实现的方式有很多种，不一定要按照我的方式去... 查看详情

struts+ajax上传文件进度条的问题

上传文件ajax读取进度总是只能直接100%，下面结果说明监听器是可以正常取得值得，就是ajax无法异步取得大小而是最后才取得。ajax代码在下面update34370;51925;1update37895;51925;1update41949;51925;1update45474;51925;1update49528;51925;1update51925;51925;... 查看详情

使用引导进度条以模态显示上传进度

...问题描述】：我正在构建一个c#MVC应用程序，它显示一个表单并允许用户上传一些文件。当用户点击提交时，会出现一个带有进度条的模式，设置为100%并显示一条消息“请稍候，等等。”我希望能够捕获上传过程的进度并将其显... 查看详情

文件上传进度条干扰控制器重定向

...时间】：2021-11-1610:23:43【问题描述】：我有一个文件提交表单和一个跟踪上传进度的进度条。但是，控制进度条的javascript会干扰我的控制器，我不知道如何修复它。我的控制器从不使用链接重定向回家（它在没有实现进度条的... 查看详情