ブートストラップファイルアップロードプラグインファイル入力は、適切なファイルアップロード制御ですが、検索と使用の場合は多くありません。それを使用するとき、あなたはまた、段階的に石に触れることによって川を渡ります。このコントロールはインターフェイスに表示され、以前に使用したアップロードをより美しく、より強力な機能を備えています。この記事は、主に私自身のフレームワークコードケースに基づいており、ファイル入力の使用、ファイルアップロードプラグインを導入しています。
1。ファイルアップロードプラグインのファイル入力の紹介
このプラグインのホームページアドレスは、http：//plugins.krajee.com/file-inputです。ここから多くのデモコードディスプレイを見ることができます：http：//plugins.krajee.com/file-basic-usage-demo。
これは、拡張されたHTML5ファイル入力コントロール、ブートストラップ3.xの拡張、ファイルアップロードプレビュー、マルチファイルアップロード、その他の機能の実装です。
一般的に言えば、プラグインが正常に使用するには、次の2つのファイルを導入する必要があります。
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js
単純なインターフェイス効果は次のとおりです。多くのファイルコントロールをアップロードするのと同様に、さまざまなタイプのファイルを受け入れることができます。もちろん、特定のファイルタイプと受け入れられたその他の機能を指定することもできます。
中国の文化を考慮する必要がある場合、文書を紹介する必要があります。
bootstrap-fileinput/js/fileinput_locale_zh.js
このようにして、MVCのバンドルコレクションに基づいて、必要なファイルをコレクションに追加できます。
// bootstrap-fileinputコントロールcss_meteronic.include（ "〜/myplugins/bootstrap-fileinput/css/fileinput.min.css"）; js_meteronic.include（ "〜/content/myplugins/bootstrap-fileinput/js/fileinput.min.js"）; js_meteronic.include（ "〜/content/myplugins/bootstrap-fileinput/js/fileinput_locale_zh.js"）; js_meteronic.include（ "〜/content/myplugins/bootstrap-fileinput/js/fileinput_locale_zh.js"）;
このようにして、次のインターフェイスに示すように、ページに中国のインターフェイスの説明とプロンプトを表示できます。
2。ファイルアップロードのファイル入力の使用
一般的に言えば、次のJS関数コードに示すように、このプラグインコントロールを初期化するための一般的なJS関数を定義できます。
// FileInputコントロール（最初の初期化）関数initfileInput（ctrlname、uploadurl）{var control = $（ '＃' + ctrlname）; control.fileInput（{言語： 'zh'、//言語の設定uploadurl：uploadurl、// uploaded address aplaitfileextensions：['jpg'、 'png'、 'gif']、// //ボタンスタイルpreviewfileicon： "<i class = 'glyphicon glyphicon-king'> </i>"、}）;}ページコードでは、次のコードに示すように、ファイルアップロード制御を配置します。
<div style = "height：500px"> <input id = "file-portrait1" type = "file"> </div>
このように、スクリプトコードの初期化コードは次のとおりです。
// fileInputコントロール（最初の初期化）initfileInput（ "file-portrait"、 "/user/editportrait"）;
これにより、コントロールの初期化が完了します。ファイルをアップロードする必要がある場合は、クライアントがアップロードしたイベントを処理するためのJSコードも必要です。また、ファイルの保存操作を処理するためにMVCバックグラウンドコントローラーも必要です。
たとえば、フォームデータを保存するための私のコードは次のとおりです。
// record formvalidate（ "ffadd"、function（form）{$（ "＃add"）。modal（ "hide"）; // constructパラメーターを背景にvar postdata = $（ "＃ffadd"）。 // initportraitをアップロードします（data1） }）。エラー（function（）{showtips（ "この関数を使用することは許可されていません。管理者に連絡してください。"）;}）; }）;その中で、ファイルの保存の処理ロジックコード部分に次のことに気付きました。
//ポートレートinitportrait（data.data1）のアップロード処理を追加します; //書かれたIDを使用して$（ '＃file-portrait'）を更新します。
コードの最初の行は、ユーザーのID情報などのアップロードされた追加コンテンツを再構築することです。そのため、背景のアップロードと処理のためにこれらのIDに基づいて追加のデータを作成できます。
この関数は、主にIDを再割り当てして、アップロード時に最新の追加パラメーターの取得を促進します。これは、アップロード処理モードと同じです。
//画像情報関数Initportrait（ctrlname、id）{var control = $（ '＃' + ctrlname）; var imageurl = '/picturealbum/getportrait？id =' + id + '＆r =' + math.random（）; //重要なのは、コントロールの追加パラメーターコンテンツと画像初期化表示コントロールを更新する必要があります。FileInput（ 'Refresh'、{uploadextradata：{id：id}、initialpreview：[//画像設定 "<img src = '" + imageurl + "' class = 'file-preview-image' patige ''> 'file-preeview-image"'> 'classe =' classe }）; }先ほど見たように、アップロードしたアドレスは「/user/editportrait」です。また、この背景関数を発表し、学習する完全なケースコードを提供したいと考えています。
/// <summary> ///ユーザーAvatar Image /// </summary> /// <param name = "id"> user's id </param> /// <returns> </returns> public ActionResult editportrait（int id）{commonResult result = new CommonResult（）; try {var files = request.files; if（files！= null && files.count> 0）{userInfo info = bllfactory <user> .instance.findbyid（id）; if（info！= null）{var filedata = readfilebytes（files [0]）; result.success = bllfactory <user> .instance.updatepersonimagebytes（userimagetype.personportrait、id、filedata）; }}} catch（Exception ex）{result.errormessage = ex.message; } return tojsoncontent（result）; }このようにして、上記のユーザーポートレートの保存と処理ロジックを構築し、ファイルをバックグラウンドファイルシステムに正常に保存でき、同時にデータベースに必要な情報が記録されます。
もちろん、それを使用してユーザーのポートレート写真を処理することに加えて、それを使用して画像アルバム処理操作を構築することもできます。特定のインターフェイスは次のとおりです。
この部分の初期化コードは次のとおりです。
// fileInputコントロールの初期化（最初の初期化）$（ '＃file-portrait'）。fileInput（{言語： 'zh'、//言語updowurl： "/fileupload/upload"、// adpoldfileextensions：['jpg' '、' png '、' gif ']、// 'multipart/form-data'、showupload：true、//アップロードボタンshowcaption：false、//タイトルブラウザーBrowserclass： "btn btn-primary"、// button style previewfileicon： "<i class = 'glyphicon glyphicon-king' （{n}）は、最大許容値{m}！ "、}）を超えます。上記は、編集者が紹介したブートストラップメトロニック開発フレームワークの経験の詳細な説明です[5]ブートストラップファイル入力ファイルアップロードプラグインの使用について詳しく説明します。私はそれが誰にでも役立つことを願っています。詳細情報を知りたい場合は、wulin.comのWebサイトに注意してください！