1

簡単に言えば

5 つの ajax ステップを実行する JavaScript コードを取得しました。

2 番目と 3 番目のステップには、ファイルのアップロードが含まれます。プログレスバーを取得しました。

5 つのステップの間、プログレス バーを徐々に更新する方法がわかりません。

長い話

デモはhttp://ajaxprogressbar.cloudmanaged.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% 更新します。(完了)こちらを参照してください。
  7. 次の場合に jquery の代わりに Q.js を使用するように executeProcess をリファクタリングします。

(完了)とマークされているものは完了していることに注意してください。こちらのデモをご覧ください。

やってみて得たもの

必要なもの

R3、R4、 R6、 R7 を他を壊すことなく達成したい。

R6が最も重要です。

R3が今最も重要です。

よくある質問

  1. これはあなたの完全なアプリですか？

いいえ。できるだけ問題ステートメントに影響を与えずに、問題を説明するために不要なコードを可能な限り取り除いた縮小テスト ケースを実行しました。

したがって、いくつかのロジックが欠落しているように見えます。しかし、デモとして安心してください。バグはありません。私はそれをテストしました。

sleep(5)また、fileupload.phpを入力して、ファイル アップロードの時間遅延をシミュレートします。

ここまたは他の場所で解決策を見つけた場合、私は何をしますか

ソリューションをデモとして動作させ、オンラインに公開します。

これは、他の人も私の質問から学ぶのを助けるためです。

4

0 に答える 0