20

AJAX でファイルをアップロードしたい。過去に、魔法のjQuery フォーム プラグインを使用してこれを実現しましたが、うまく機能しました。現在、私はRailsアプリを構築していて、「The Rails Way」をやろうとしているので、フォームヘルパーとペーパークリップジェムを使用して添付ファイルを追加しています。

Rails ドキュメントは、フォーム ヘルパーが AJAX ファイルのアップロードでは機能しないことを警告しています。

他のフォームとは異なり、非同期ファイル アップロード フォームを作成することは、form_for に remote: true を提供するほど単純ではありません。Ajax フォームでは、ブラウザー内で実行される JavaScript によってシリアル化が行われます。JavaScript はハード ドライブからファイルを読み取ることができないため、ファイルをアップロードすることはできません。最も一般的な回避策は、フォーム送信のターゲットとして機能する非表示の iframe を使用することです。

既製のソリューションがないことは明らかです。だから、どうするのが一番賢いのだろうと思っています。いくつかのオプションがあるようです：

  1. フォーム ヘルパーと iframe トリックを使用します。
  2. フォーム ヘルパー + jQuery フォーム プラグインの読み込みを使用してファイルを送信します (これが Rails の認証トークンなどで適切に機能するかどうかはわかりません)。
  3. フォーム ヘルパー + クリップ + [その他の宝石] を使用して、AJAX フォームの送信を許可するように機能を拡張します。

3つすべてが可能のようです。#3、特に [some other gem] の部分については、私はほとんど知りません。Uploadify と呼ばれる Pic-Upload のブランチについて言及している 2 つの同様の質問 ( thisとthis ) を見つけましたが、どちらも 2 年前のもので、Rails 2 と 3 を扱っています (そして、Uploadify は何年も更新されていません)。どれだけ変化したかを考えると、これはまったく新しい質問だと思います。

Rails 4でAJAXを使用してファイルをアップロードする最良の方法は何ですか?

4

3 に答える 3

1

特にプログレスバーが必要な場合は、AJAXを使用してアップロードファイルを処理する場合、IMHO Railsは完璧ではありません。（2）で提案したように、AJAXリクエストを介したフォーム送信にJavascriptを使用することをお勧めします。Javascript に慣れている場合は、多くの問題はありません。

私は最近、この非常に単純な JS ライブラリhttps://github.com/hayageek/jquery-upload-fileを使用して同じアプローチを使用し、ここに詳細を書きましたhttp://www.alfredo.motta.name/upload-video- files-with-rails-paperclip-and-jquery-upload-file/

タイトルと説明を付けて映画をアップロードするフォームを持つアプリケーションの場合、JS コードは次のようになります。

$(document).ready(function() {
  var uploadObj = $("#movie_video").uploadFile({
    url: "/movies",
    multiple: false,
    fileName: "movie[video]",
    autoSubmit: false,
    formData: {
      "movie[title]": $('#movie_title').text(),
      "movie[description]": $('#movie_description').text()
    },
    onSuccess:function(files,data,xhr)
    {
      window.location.href = data.to;
    }
  });

  $("#fileUpload").click(function(e) {
    e.preventDefault();
    $.rails.disableFormElements($($.rails.formSubmitSelector));
    uploadObj.startUpload();
  });
});

完璧にはほど遠いですが、フロントエンドに柔軟性をもたらします。

于 2015-05-24T10:23:07.897 に答える