2013-02-15 14 views
10

私は本当にファイルを選択し、キャンセルまたは削除するオプションでプレビューを持つクライアント側の処理が大好きです。blueimp jQuery-File-Upload with ajax

しかし、私はフォームを使ってページをアップロードしたいので、私はajaxを使う必要はありません。私はすべてのオプションを試していて、同期して選択されたファイルを使用してフォームに投稿することはできません。

data.filesをフォームに投稿することはできますか?

+0

AJAXのないファイルアップロードは、ほとんどの言語では非常に簡単です。あなたの質問はあまり明確ではないようです。 http://www.whathaveyoutried.com –

+0

Jay Blanchardあなたはblueimp jQuery-File-Uploadを使用しましたか?私はそれが私の質問ではない、ajaxを使わないでファイルのアップロードを行うのは非常に簡単だと理解しています。私の質問は、同期フォームの投稿を行うためにblueimp jQuery-File-Uploadを使用していました。 – Topaz

+1

フォームを使用してファイルを投稿するには、フォームの投稿コンポーネントと一緒にアップロードするコンポーネントが必要ですが、このコンテキストでbt "synchronous"とは何を意味するのですか?フォームデータの投稿と同時に何かをアップロードすることを意味しますか?もしそうなら - https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data –

答えて

9

replaceFileInputオプションをfalseに設定して、blueimp jQuery-File-Uploadを使用して標準フォーム送信を介してファイルを送信できます。ドキュメントから

:デフォルトでは

は、ファイルの入力フィールドは、各 入力フィールドの変更イベントの後にクローンに置き換えられます。これは、iframeの輸送キュー に必要と変更イベントは、同じファイル選択のために解雇することができますが、 はjQueryの-FILE-アップローダが簡単にAjaxのファイルのために作成されblueimp偽

+0

このオプションを動的に変更するには?私は、ユーザーが無効にすることができる自動保存(ajax経由)のフォームを持っているので、フォームを正常に送信できるはずです。現在、自動保存がオフで、ユーザーがフォームを送信すると、選択したファイルのデータはサーバーに渡されません。 –

+0

私から大きな感謝です。 –

-2

には、このオプションを設定することで無効にすることができていますアップロードする。シンプルで複数のファイル入力をサーバーに送信したい場合。どのように動作するかを変更するには、提供されたAPIを使用して変更する必要があります。

私は別のライブラリを使用することをお勧めします。

これは私がウェブ上に築かそのうちの一つである:
http://www.fyneworks.com/jquery/multiple-file-upload/

私はそれが簡単にこのライブラリを使用してjQueryの - ファイルアップロードに似たUIを微調整することになると思います。

サーバーにアップロードする前のイメージファイルのプレビューを表示するコードサンプルです。
http://blog.revathskumar.com/2012/04/html5-show-thumbnail-preview-of-image.html

ただ、すべてを備えた単一のAJAX呼び出しを行うことは、その後終了T、配列内のファイルを収集し、falseにautoUploadを回すことによって行うことができるライン283

-1

にMultiFile.addToList機能を変更しますファイルをフォームデータと一緒に使用します(hereを参照)。

-1
Use config replaceFileInput = false; 
jQuery('#add_new_product_form').fileupload({ 
      // Uncomment the following to send cross-domain cookies: 
      //xhrFields: {withCredentials: true}, 
      fileInput: jQuery('#upload-video'), 
      replaceFileInput: false, 
      ...... 
}) 

コントローラでは、ビデオデータを取得するために$ _FILESを取得します。