Dajaxiceを使用してファイルデータを送信する方法は？

Question

私は自分のウェブサイトにajaxを使用しています。私は正常にjQuery.ajax()を使用してファイルをサーバーに非同期でアップロードしました。私はDajaxとDajaxiceを使用していますので、これらのアプリケーションをファイルアップロードにも使用する予定です。私は試したthis例です。それは正常に動作しています。しかし、私は私のHTMLフォームにファイルフィールドを追加すると、サーバーにファイルを送信しません。私のHTMLフォームは次のようになります

<form id="myform" action="/file/" method="post" enctype="multipart/form-data"> 
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='AaSmyBEwQLSD3YghRAD9Cf2uxEjzESUe' /></div> 
<p><label for="id_docfile">Select a file</label> max. 42 megabytes</p> 
<p><input type="file" name="docfile" id="id_docfile" /></p> 
<p><input type="submit" value="Upload" /></p> 
</form> 

この質問は多くの場所で尋ねられていますが、決して答えられていません。

Answer 1

Afaik現在、ファイルをアップロードするためのdajax/dajaxice内の規定はありません。

私はいくつかのプロジェクトでdajaxを使用しており、blueimp/jquery-file-uploadとアップロードファイルのPOSTを受け入れ、クライアントにJSON文字列を返すdjangoビューを使用してこれを丸ごと持っています。

jQuery-file-uploadボタンは通常のhtmlフォーム要素とは異なるスタイルになっているので、これは完璧なソリューションではありません.jQuery-uiを使用してフォーム全体をスタイルすることは可能ですが、作業。

Javaの場合はかなりdajaxであるdwrとdjangoの場合はtasty pieが提供されますので、理論的には実装することが可能です。

もし誰かが役に立つと思ったら、私のajaxソリューションのサンプルを投稿して嬉しいです。

Answer 2

私も最近この問題に直面しました。だから、少し掘り下げて答えを見つけました。

正常です。しかし、私は私のHTMLフォームにファイルフィールドを追加すると、サーバーにファイルを送信しません。

docの例で使用されているserialize()メソッドがあります。しかし、jQuery docによると：

ファイル選択要素からのデータはシリアル化されません。

また、JSにはクライアントブラウザの外部にアクセスできないため、ajaxファイルをアップロードする明確な方法はありません。ですから、dajaxiceを使用することはできません。

最も簡単なハック、私が見つけたtargetオプションを使用して、目に見えないのiframeにフォームを投稿することです：

<form method='POST' action='/upload' enctype='multipart/form-data' target='submit-iframe'>

ので、唯一のiframeが更新されます。 jsを使用すると、load()イベントをキャッチしてデータを取得できます。

より詳細なプロセスは、誰もが解決策を見つける/これを答えることができましたhere