Question

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

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

对于任何可能要求代码的人：故意不在这里。该方案解释了问题;代码本身不是“有问题”，只会更加混乱。

简单地尝试＃1失败

启动表单上传
在Ajax调用上设置间隔，以获取某些JSON
将数据渲染到进度条

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

简单地尝试＃2失败

创建包含相同Ajax调用的iFrame
将数据渲染到iFrame中的元素（所需的一切都是自包含的，并且至少不会引用“顶部”文档）

结果：

在启动表单上传之前，我可以从JSON呈现“status：waiting”。渲染函数也增加了一个计数器，所以我会看到“尝试#X”。当状态等待时，尝试次数将增加。
，Ajax调用成功获得200，我可以检查响应，看看JSON实际上是在那里。
但是，我无法在iFrame中更新“shadow DOM”（这是正确的术语？）。尝试访问iFrame中的节点并修改它们失败。甚至柜台也没有增加。
当转移完成后，它会成功呈现“状态：完成”并且计数器将向前跳（计数器正在递增，但将其呈现给iFrame只是不起作用）
< / LI>

GRR！

成功尝试

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

结果是一个“工作”进度条，虽然有时请求中的滞后会导致iframe在一瞬间变为空白，这不是我的偏好。

有人能想出更好的方法吗？我可以在iFrame中使用表单本身，而Ajax可以在“顶级”文档中使用吗？

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

Answer 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.

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

Answer 2

老实说，我为应用程序做了所有前端开发，我正在寻找相同的东西。首先，我尝试使用我们的socket.io发回一个数字，然后我变成一个百分比。然后我将它应用于twitter bootstrap prog吧。

我最终做的并且坚持使用精细上传器http://fineuploader.com/文档有点糟糕，你必须玩一点但它有一个内置的事件，在上传时反复激发实际上会让你回到过去的东西。

Answer 3

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

Answer 4

我最后一次这样做时，我只是将带有数据的表单提交给了一些看不见的iframe，然后我就可以忘掉它了。

接下来，我开始轮询一些URL / REST API以获得进展。

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

我认为这种方法没有任何问题，但出于某些原因，你们两个似乎都没有我所描述的那样，所以我把它作为答案。

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

Ajax表单上传进度条

4 个答案: