1

バケット URL に直接送信して、Amazon S3 に直接アップロードしています。

ページは次のようにモックアップされています。

<div id="one">
    <upload image form>
</div>

<div id="two>
    <information form>
</div>

Div "two" はデフォルトで非表示になっています。ユーザーがアップロード画像フォームで送信を押すと、.submit() フックが呼び出され、div one が非表示になります。Div 2 が表示され、ユーザーはアップロードする画像に関する追加情報を入力します。

ただし、アップロードする画像が大きく、接続によってはアップロードに 1 分以上かかる場合があるため、アップロードが完了する前にユーザーが 2 番目のフォームを完了して送信すると、アップロードが中断されるという問題があります。

Amazon ではページへのリダイレクトが許可されているため、PHP_SELF にリダイレクトしているため、アップロードが完了すると、ユーザーは違いを認識しません。

私の質問は、アップロードが完了するまで、アップロードの進行状況を検出するか、div 2 の送信ボタンを無効にすることができるかどうかです。

私はほとんどのブラウザをサポートしたいので、CORS/.put() は実際にはオプションではありません。

また、Amazon に直接プッシュし、中間業者をスキップしている点も気に入っています。

私はもう試した：

isset($_POST)

リダイレクトでアップロードが完了したことを検出しますが、呼び出されることはなく、その理由はわかりません。

ブラウザはアップロードのパーセンテージ (ステータス バー) を表示します。これに接続する方法はありますか?

4

1 に答える 1

0

使いやすさのために、

  • ユーザーは画像情報をすぐに入力できます
  • アップロード進行状況インジケーターが表示される
  • 1単位の情報に対して2つのフォームを提出する必要はありません

jquery を使用して画像をアップロードする場合は、データ フォームを自動的に送信するコールバック関数を構成できます。

フォームを実際に送信する代わりに、送信ボタンの 1 つを削除し、クリック イベント ハンドラーを追加します。

このイベント ハンドラーは、

  • フォーム入力の評価
  • ファイルをアップロードする
  • 進行状況の表示 (「アップロード保留中...」の場合もあります)
  • アップロード完了のコールバックを定義します。

コールバックは、2 番目のフォームを送信するだけです。

于 2013-01-30T06:55:11.553 に答える