Clever Geek Handbook

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個）のファイルを選択する場合は、フラッシュ技術を検討してください。



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


More articles:


All Articles