Ajax表单上传进度栏
[英]Ajax form upload progress bar
问题描述
尝试制作表单上传的进度条（旧的HTML4表单上传，而不是新的HTML5 API）。 该进度实际上跟踪文件移动后正在执行的其他工作。 它的设计方式是流保持打开状态，直到完成其他工作为止，然后服务器端方法最终返回并关闭流。
我遇到了一些可能是Chrome特有的问题。 我也有一个可行的实现，但是我希望能得到“更好”的东西。
对于任何可能要求代码的人：故意不在这里。 该场景说明了问题； 代码本身并不是“过错”，只会更加混乱。
简而言之，尝试失败＃1
- 启动表格上传
- 在Ajax调用上设置间隔，以获取某些JSON的进度
- 将数据渲染到进度条
失败原因：上载流阻止了页面上的其他活动，并且您在传输期间无法进行其他Ajax调用。
简而言之，尝试失败＃2
- 创建一个包含相同Ajax调用的iFrame
- 将数据呈现到iFrame中的元素（所需的一切都是自包含的，至少没有引用“顶部”文档）
结果：
在启动表单上传之前，我可以从JSON渲染“状态：正在等待”。 渲染功能还增加了一个计数器，因此我将看到“尝试#X”。 状态等待期间，尝试次数将增加。
传输启动后，Ajax调用成功达到200，我可以检查响应以了解JSON实际上在那里。
但是，我无法在iFrame中更新“影子DOM”（这是正确的术语吗？）。 尝试访问iFrame中的节点并对其进行修改失败。 即使计数器没有增加。
传输完成后，它将成功呈现“状态：完成”，并且计数器将向前跳转（计数器在增加，但是将其呈现给iFrame却无法正常工作）
GRR！
成功尝试
iFrame不再请求Ajax。 iframe的src属性设置为返回预渲染进度栏的URL。 加载到iframe中的文档设置为重新加载自身。 因此，在指定的时间间隔内，它会重新渲染“移动”的新进度条。
结果是一个“工作中”的进度条，尽管有时请求中的延迟会导致iframe在一秒钟内空白，这不是我的偏好。
有人能想到一种更好的方法吗？ 是否可以在iFrame中使用表单本身，而在“顶部”文档中使用Ajax？
我主要想将表示层与数据层分开，但是只要我必须返回渲染的进度条，那是行不通的。 另外，如果我能找到一种通过Ajax更新进度条的方法，则不会出现“空白”提示。
4 个解决方案
解决方案1
3 已采纳 2013-04-24 19:48:45
要扩展我的评论并提供指导，要执行“隐藏的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.
忽略不良做法，这是一个简单的示例。
解决方案2
1 2013-04-24 19:24:45
老实说，我负责应用程序的所有前端开发，而我一直在寻找相同的东西。 首先，我尝试仅使用我们的socket.io发送回一个数字，然后我将其转换为一个百分比。 然后，将其应用于twitter bootstrap编排。
我最终要做的就是坚持使用优良的上载器http://fineuploader.com/该文档有点糟透了，您需要花点时间玩，但是它有一个内置事件，在上载时会一遍又一遍地触发实际可以为您带来进展的东西。
解决方案3
1 2013-04-24 19:29:45
我决定使用： http : //blueimp.github.io/jQuery-File-Upload/，因为它是免费的，并且为您提供了不错的进度条。
解决方案4
1 2013-04-24 19:30:52
上一次，我只是将带有数据的表单提交给了一些不可见的iframe，然后我就忘了它。
接下来，我开始轮询一些URL / REST API以获取进度。
提交完成后-事件将触发，其处理程序将停止进度轮询。
我认为这种方法没有任何问题，但是由于某种原因，你们俩似乎都不符合我的描述，因此我将其作为答案。
如果您使用jQuery，则最好的方法是使用jQuery Form plugin “ ajaxify”您的表单。 您可以参考以下问题示例： 使用jQuery的文件上传进度栏 。
上传时的Ajax进度栏
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.