如何在几个ajax步骤中逐步更新html，尤其是在文件上传期间

Question

长话短说

获得了执行5个ajax步骤的javascript代码。

第二步和第三步涉及文件上传。有进度条。

不确定如何在5个步骤中逐步更新进度条。

长篇故事

演示位于http://ajaxprogressbar.cloudcontrolled.com/ajaxprogress.html

要执行它，请按“运行进度条”按钮

该代码位于github

基本上ajax过程有5个步骤。

step1,4和5分别将数据发送到step1.php，step4.php和step5.php。

step2和step3是ajax文件上传步骤。

序列应为：

• 仅在步骤1完成后，步骤2和步骤3可以同时执行。
• 步骤4只能在步骤2之后执行。
• 步骤5只能在前面所有步骤成功后执行。
• 如果在任何步骤中出现任何错误，则应停止该过程。

我想要完成的事情

1. 仅在步骤1完成后，可以同时执行步骤2和步骤3。的（完成）
2. 步骤4只能在步骤2之后执行。（完成）
3. 步骤5只能在所有前述步骤成功后执行。
4. 如果在任何步骤中出现任何错误，则应停止该过程。
5. 在每个步骤（完成）
后更新进度条20％
6. 在步骤2和步骤3中一次更新1％的进度条。（已完成）请参阅this
7. 在
时重构executeProcess以使用Q.js而不是jquery

请注意，标有（已完成）的标签已完成。请参阅演示here。

我尝试和得到的结果

• 我之前曾为R6提出上诉，我终于想出了over here

我需要什么

我想完成R3，R4， R6，和R7而不会破坏任何其他内容。

R6是最重要的。

R3现在是最重要的。

常见问题

1. 这是你的完整应用吗？

号。我做了一个简化的测试用例，我删除了尽可能多的不必要的代码来解释我的问题，而不会影响问题陈述。

因此有些逻辑似乎缺失了。但作为一个演示，请放心，没有错误。我已经测试过了。

我还通过为fileupload.php

输入sleep(5)来模拟文件上传的时间延迟

如果我在这里或其他地方找到解决方案，我会怎么做

我将使该解决方案作为演示工作并在线提交。

这也是为了帮助其他人学习我的问题。