1

jquery-file-upload と uploadify については知っていますが、どちらもユーザー インターフェイスを決定するフラッシュ ソリューション/フォールバックに依存しているようです。

javascriptだけで非同期に画像ファイルをアップロードするにはどうすればよいですか?

ファイル入力が変更されるたびに、画像を s3 にアップロードしてから、画像の場所をデータベースに非同期的に保存したいと考えています。いくつかのアイデア:

  • Amazon s3 に直接 POST し、成功するとイメージの場所をデータベースに POST します

ただし、機密性の高い s3 キーを公開せずに s3 への認証済みアクセスを処理する方法がわかりません。

また、新しい画像ファイルの一意の名前を保証するにはどうすればよいですか?

  • 何とか画像データをシリアライズし、ajaxで文字列としてPOST

次に、サーバーは s3 バケットに配置し、場所を保存します。画像データを適切にシリアル化し、画像に再作成できますか? を使用してプレビュー画像を表示できることを知っているFileReaderので、それを使用して画像データを取得できる可能性があります。

上記の方法のいずれかが機能するかどうか、またはこのようなものを機能させる簡単な方法があるかどうかを教えてください。

$('#file-upload').change(function() {
  // Asynchronously get image on amazon s3 and saved in the database
});

可能であるはずですが、私が見たすべての例は、プラグイン ソリューションを使用したユーザー インターフェイスに密接に関連しています。

4

1 に答える 1

0

この質問を忘れていました！次のように通常のフォーム送信を防止することで機能しました。

var path = $('#form').attr('action');
$('#form').submit(function(evnt) {
  // stop normal submission
  evnt.preventDefault();  

  // POST it asynchronously
  var formData = new FormData(this);
  $.ajax({
    url: path,
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false
  });
});
于 2013-01-16T02:00:10.803 に答える