2

フォームのアップロードの進行状況バーを作成しようとしています (新しい HTML5 API ではなく、古い HTML4 フォームのアップロード)。進行状況は、ファイルが移動された後に行われた追加の作業を実際に追跡します。設計された方法は、追加の作業が完了するまでストリームが開いたままになり、その後サーバー側のメソッドが最終的に戻り、ストリームを閉じることです。

Chrome に固有の可能性がある問題がいくつかあります。私も実用的な実装を持っていますが、「より良い」ものを手に入れたいと思っています。

コードを要求する可能性が高い人のために: 意図的にここにはありません。シナリオは問題を説明しています。コード自体は「過失」ではなく、より混乱するだけです。

失敗した試み #1 一言で言えば

  1. フォームのアップロードを開始
  2. 一部の JSON で進行状況を取得する Ajax 呼び出しに間隔を設定する
  3. データをプログレス バーにレンダリングする

失敗の理由: アップロード ストリームがページ上の他のアクティビティをブロックし、転送中に追加の Ajax 呼び出しを行うことができません。

失敗した試み #2 一言で言えば

  1. 同じ Ajax 呼び出しを含む iFrame を作成する
  2. データを iFrame 内の要素にレンダリングします (必要なものはすべて自己完結型であり、少なくとも「トップ」ドキュメントを参照しません)。

結果：

  • フォームのアップロードを開始する前に、JSON から「ステータス: 待機中」をレンダリングできました。レンダリング関数もカウンターをインクリメントしたので、「試行 #X」が表示されます。ステータスが待機している間、試行回数が増加します。

  • 転送が開始された後、Ajax 呼び出しは正常に 200 を取得し、JSON が実際にそこにあることを確認するために応答を調べることができました。

  • ただし、iFrame の「シャドウ DOM」(正しい用語ですか?) を更新できませんでした。iFrame 内のノードにアクセスして変更しようとすると失敗しました。カウンターでさえ増加しませんでした。

  • 転送が完了すると、「ステータス: 完了」が正常にレンダリングされ、カウンターがジャンプします (カウンターは増加していましたが、iFrame へのレンダリングが機能していませんでした)。

ぐら！

成功した試み

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 のブートストラップ プログラム バーに適用します。

私が最終的に行って固執したのは、素晴らしいアップローダーを使用することでした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 に答える