jQueryプラグインを使用して、asp.net mvcのファイルのAjaxロードを固定します

この記事では、 jQuery 、そのプラグインなど、およびそのような母親を使用して、 asp.net mvcにファイルを動的にアップロードする方法を理解します。 これを行うために、「概念実証」を作成し、プロセスを楽しんでみます。 =）

計画を実施するには、多くのオプションがあります。 Ajaxアップロードと複数ファイルアップロードの 2つのプラグインに焦点を当てます 。

パート1：サーバー側

サーバー上ではすべてが簡単です。 Request.Filesからファイルを受け取ります。 JSONを介してクライアントスクリプトと通信します。 このため、コントローラーの戻り値はJsonResultまたはその子孫になります。 ただし、コンテンツタイプはtext / htmlのままにします。そうしないと、ブラウザはapplication / jsonのようなコンテンツを保存するように提供します。

シンプルアクション：

1. プライベート読み取り専用IFileService _fileService = new FileServiceStub （ ） ;
3. /// <summary>
4. ///サーバーへのアップロードファイルの処理。
5. /// </ summary>
6. /// <returns>ファイル名のリストを含むJSON結果</ returns>
7. [ HttpPost ]
8. public JsonResult UploadFiles （ ）
9. {
10. ICollection < string > collection = _fileService。 アップロード （リクエスト。 ファイル ） ;
12. 新しい JsonResultを返す
13. {
14. ContentType = "text / html" 、
15. データ= 新規 {コレクション}
16. } ;
17. }

パート2： 複数ファイルアップロードプラグイン

このプラグインはjQuery.Formで動作します 。

HTMLフォーム：

1. < form id = "upload-files" action = "/ File / UploadFiles" method = "post" enctype = "multipart / form-data" >
2. < div >
3. ファイルのアップロード：
4. < 入力 クラス = "multi-file-upload" タイプ = "ファイル" name = "ファイル" / > < / / div >
5. < 入力 タイプ = 「送信」 値 = 「ダウンロード」 > < / / 入力 >
6. < / フォーム >
8. <！-出力メッセージのダウンロードの場所->
9. < div id = "messages" > < / / div >
11. < h3 >ダウンロードしたファイルの一覧< / / h3 >
12. < ol id = "file-list" > < / / ol >

プラグインのセットアップ：

1. //ドキュメントが完全にロードされるとコードを実行します。
2. $ （ドキュメント） 。 準備完了 （ 関数 （ ） {
3. var form = $ （ '＃upload-files' ） ; //フォームをダウンロードします。
4. var messages = $ （ '#messages' ） ; //通知領域。
5. var list = $ （ '＃file-list' ） ; //ダウンロード済みのファイルのリスト。
7. // MultiFileをカスタマイズします。
8. $ （ '.multi-file-upload' ） 。 MultiFile （ {
9. max ： 5 、 //一度にダウンロードされるファイルの数。
10. STRING ： { //改行。 htmlコード（たとえば、写真）を埋め込むことができます。
11. remove ： 'Remove' 、
12. selected ： 「選択：$ file」 、
13. 拒否されました： '無効な拡張子：$ ext！' 、
14. duplicate ： 'このファイルは既に選択されています： \ n $ファイル！'
15. }
16. } ） ;
18. // ajaxFormを設定します
19. フォーム。 ajaxForm （ {
20. iframe ： true 、 // iframeを使用して送信します。
21. dataType ： "json" 、 // jsonを使用して交換します。
23. //ファイルを送信する前に実行します。
24. beforeSubmit ： function （ ） {
25. // submitがjavascriptから呼び出された場合、次の行のコメントを解除します。
26. // $。fn.MultiFile.disableEmpty（）;
28. //ダウンロードメッセージを表示します。 ここにjQuery.blockUIをねじ込む方が良いのですが、わかりやすくするために残しておきます。
29. メッセージ。 html （ '<img src = "/ Content / busy.gif" />ファイルのダウンロード...' ） ;
30. } 、
32. //成功に関する応答を受け取った後に実行します。
33. 成功： 関数 （結果） {
34. // submitがjavascriptから呼び出された場合、次の行のコメントを解除します。
35. // $。fn.MultiFile.reEnableEmpty（）;
37. //ファイルアップロードフォームをクリアします。
38. $ （ '.multi-file-upload' ） 。 MultiFile （ 'reset' ） ;
40. //ダウンロードメッセージを消去します。
41. メッセージ。 空 （ ） ;
43. //アップロードされたファイルの一般的なリストに新しいアップロードされたファイルを追加します。
44. if （ result。collection。length > 0 ） {
45. $。 each （ result。collection 、 function （ i ） {
46. リスト。 append （ '<li>' + this + '</ li>' ） ;
47. } ） ;
48. }
49. } 、
51. //エラー時に実行します。
52. エラー： 関数 （ xhr 、 textStatus 、 errorThrown ） {
53. //ファイルアップロードフォームをクリアします。
54. $ （ '.multi-file-upload' ） 。 MultiFile （ 'reset' ） ;
55. alert （ 'ファイルのダウンロード中にエラーが発生しました：' + errorThrown ） ;
56. }
57. } ） ;
58. } ） ;

パート3： Ajaxアップロードプラグイン

HTMLフォーム：

1. <！-ファイルアップロードフォーム。 任意の場合があります。 ->
2. < div id = "file_upload_button" >
3. <a href = "#"> </a>新しいファイルを追加します。 < / div >
4. < div id = " uploading " style = "display：none" > < img src = "/Content/busy.gif" alt = "Download" align = "left" / >ダウンロード中。 < / div >
5. <！-ダウンロードしたファイルのリスト->
6. < ol class = "files" > < / / ol >

プラグインのセットアップ：

1. $ （ドキュメント） 。 準備完了 （ 関数 （ ） {
2. 新しい AjaxUpload （ $ （ '#file_upload_button' ） 、
3. {
4. //選択後すぐにファイルを送信するかどうか
5. autoSubmit ： true 、
6. //送信先
7. アクション： '/ File / UploadFiles' 、
8. //ファイルを保存する変数の名前。
9. 名前 ： 'myfile' 、
10. //サーバー応答のタイプ。
11. 応答： 'json' 、
13. //ファイルをアップロードする前に起動します
14. // falseを返してキャンセルすることもできます。
15. onSubmit ： function （ file 、 extension ） {
16. //ファイルを選択するための「ボタン」を非表示にします。
17. $ （ '#file_upload_button' ） 。 hide （ ） ;
18. //ダウンロードメッセージを表示します。
19. $ （ '#uploading' ） 。 show （ ） ;
20. // 1つのファイルのみをアップロードする必要がある場合：
21. //this.disable（）;
22. } 、
24. //サーバーから応答を受信した後に実行されます。
25. // fileは、クライアントが指定したファイルの名前です。
26. //応答-サーバーの応答。
27. onComplete ： function （ file 、 response ） {
28. $ （ '#file_upload_button' ） 。 show （ ） ;
29. $ （ '#uploading' ） 。 hide （ ） ;
31. // javascriptオブジェクトを取得します。
32. var resultObject = eval （ '（' + response + '）' ） ;
34. //アップロードされた新しいファイルを一般リストに追加します。
35. if （ resultObject。collection。length > 0 ） {
36. $。 each （ resultObject。collection 、 function （ i ） {
37. $ （ '.files' ） 。 append （ '<li>' + this + '</ li>' ） ;
38. } ） ;
39. }
40. }
41. } ） ;
42. } ） ;

結論の代わりに

MultiFileは一度に複数のファイルを送信できますが、標準形式（ <input type="file"... ）でのみ配置され<input type="file"... 。 サイズ：MultiFile（〜20Kb）+ jQuery.Form（〜22Kb）=〜42Kb。

AjaxUploadはファイルを1つずつ送信しますが、プレゼンテーションを柔軟にカスタマイズできます。フォームに添付されません。 プラグインのサイズ：14Kb、つまり MultiFile + Formよりも3倍少ない。

どちらにも「制限」があります。ファイルは一度に1つずつ選択されます。 一度に複数（10個）のファイルを選択する場合は、フラッシュ技術を検討してください。

この例のソースコードはネットワーク上にあります。 全体をマージできますが、 すぐに確認できます 。