私は最近免れました。 Bootstrap FileInputコンポーネントのいくつかの一般的な用途を要約しました。参照のためにWulin Networkプラットフォームと共有します。また、将来の検索にも便利です。この記事の貧弱な執筆を許してください。
1。エフェクトディスプレイ
1。元の入力型= 'ファイル'は、それを見るのが非常に耐えられません。
2。装飾なしのブートストラップfileInput ：（ブートストラップfileinputの一次進化）
3. Bootstrap FileInputの高度な進化：中国文化、ドラッグアンドドロップアップロード、ファイル拡張検証（ファイルが不要な場合、アップロードされません）
ドラッグアンドドロップアップロード
アップロード
4。BootstrapFileInput Ultimate Evolution：複数のスレッドによって複数のファイルを同時にアップロードできるようにします。
アップロード
アップロードが完了した後
2。コードの例
それはどうですか？どれほど効果的ですか？心配しないでください、上記の結果を段階的に達成します。
1。CSHTMLページ
まず、必要なJSおよびCSSファイルを紹介します。
// bootstrap fileinputbundles.add（new ScriptBundle（ "〜/content/bootstrap-fileinput/js"）） StyleBundle（ "〜/content/bootstrap-fileinput/css"）。
次に、入力型= 'ファイル'タグを定義します
<form> <div id = "mymodal" tabindex = "-1" role = "ダイアログ" aria-labelledby = "mymodallabel"> <div role = "document"> <div> <div> <ボタンタイプ= "button" data-dismiss = "modal" aria-label = "close"> <span </spar> </<h4 id = "mymodallabel"> Excelファイルを選択してください</h4> </div> <div> <a href = "〜/data/exceltemplate/order.xlsx" style = "border：none;">インポートテンプレートをダウンロード/> </div> </div> </div> </div> </form>
この文に焦点を当てる：
<入力型= "file" name = "txt_file" id = "txt_file"倍数 />
複数のことは、複数のファイルを同時にアップロードできることを意味し、class = "ファイルロード"はタグのスタイルを意味します。
2。JS初期化
$（function（）{//0。fileinputvarofileinput = new fileinput（）; ofileinput.init（ "txt_file"、 "/api/orderapi/intermedorder"）;}）; // fileinputvar fileinput = function = function（）{var ofile = new Object（）; uploadurl）{var control = $（ '＃' + ctrlname）; // upload control.fileinput.fileinputのスタイルを初期化（{言語： 'zh'、// uploadurl：// uploadアドレスAlovedfileextensions：['jpg'、 'gif']、 'pnix showpoldoad']、pnix showpoldoad 'gif'] showcaption：false、//タイトルブラウザーBrowserclass： "btn btn-primary"、// button style // dropzoneEnabled：false、// dragewidth：50、// pictureのminimagewidth // minimageheight：50、//写真画像//最大値：1000、//画像の最大高さ// maxfilesize：0、//ユニットは0の場合、ファイルサイズが限定されていないことを意味します。 true、previewfileicon： "<i class = 'glyphicon glyphicon-king'> </i>"、msgfilestoomany： "アップロードされたファイルの数（{n}）は最大許容値{m}！"、}）; previewid、index）{$（ "＃mymodal"）。modal（ "hide"）; var data.response.lstorderimport; if（data == undefined）{toastr.error（ 'ファイル形式は不正'）;} // 1 tableInit（）; otable.init（data）; $（ "＃div_startimport"）。show（）;}）;} return ofile;};説明：
（1）fileInput（）メソッドは、多くの属性があるJSONデータに渡されます。各属性は、アップロード制御を初期化するときの特性を表します。これらの属性が設定されていない場合、デフォルト設定が使用されることを意味します。その内部のプロパティを確認したい場合は、その最後に示すように、fileinput.jsのソースコードを開くことができます。
これらのプロパティが具体的に設定されていない場合、デフォルト値が使用されます。
（2）$（ "＃txt_file"）。
3。背景C＃に対応する方法
JSの初期化制御方法FileInput（）にパラメーターURLがあることを覚えていますか？このURLの対応する値は、1日後のC＃の対応する処理方法を示します。または、バックグラウンド処理方法を投稿します。
[ActionName（ "ImportOrder"）] Public Object ImportOrder（）{var ofile = httpcontext.current.request.files ["txt_file"]; var lstorderimport = new list <dto_to_order_import> X.ORDER_NO）.TOLIST（）; VAR LSTTMMODEL = MODELMANAGER.FIND（）; var LSTTMMATERIAL = MATELALMANAGER.FIND（）; // VAR IMAX_IMPORT_INDEX = LSTEXISTORDER.MAX（X => X.IMPORT_INDEX）; // IMAX_INDEX = IMAX_IMPORT_INDEX = NULUL？ 0：imax_import_index.value;＃endregion＃region 1。ストリームiworkbook workbook = null; if（ofile.filename.endswith（ "。xls"））{workbook = new hssfworkbook（ofile.inputstream）; xssfworkbook（ofile.inputStream）;} if（workbook == null）{return new {};} // ............ Heandl excel logic //ordermanager.add(lstorder);lstorderimport = lstorderimport.orderby（x => x.importu）.torist（ブロガーのプロジェクトはExcelをアップロードすることであるため、NPOIロジックはここで使用されます。写真やその他のファイルをアップロードすると、GDIを使用して写真を処理できます。
4.複数のファイルを同時にアップロードします
複数のファイルが同時にアップロードされると、フロントデスクは複数の非同期リクエストを背景に送信します。つまり、3つのファイルが同時にアップロードされると、バックグラウンドのインポートオーダーメソッドが3回入力されます。これにより、複数のスレッドを使用して3つのファイルを同時に処理できます。
3。概要
Bootstrap FileInputの基本的な使用法が大まかに導入されています。実際、これはアップロードされたコンポーネントであり、高度な使用法はありません。重要なのは、インターフェイスをより友好的にし、ユーザーエクスペリエンスをより良くすることです。
Bootstrap FileInputファイルアップロードコンポーネントの使用について、多くのことを紹介します。それがあなたに役立つことを願っています！