2

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

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

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

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

  1. 启动表单上传
  2. 在获取某些 JSON 中的进度的 Ajax 调用上设置间隔
  3. 将数据渲染到进度条

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

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

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

结果：

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

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

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

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

GRR！

成功的尝试

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

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

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

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

4

4 回答 4

3

要扩展我的评论并提供指导，要执行“隐藏 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.

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

于 2013-04-24T19:48:45.457 回答
1

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

我最终做和坚持的是使用精细上传器http://fineuploader.com/文档有点糟糕，你必须玩弄它一点，但它有一个内置事件，在上传时一遍又一遍地触发一些实际上会给你带来进步的东西。

于 2013-04-24T19:24:45.650 回答
1

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

于 2013-04-24T19:29:45.580 回答
1

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

接下来，我开始轮询一些 URL/REST API 以了解进度。

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

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

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

于 2013-04-24T19:30:52.813 回答