bootstrap fileinputアップロードプラグインの基本的な使用方法

前略：

以前の三つの記事では、bootstrap tableの一般的な使い方を紹介しました。ブログ主はこの平面的なスタイルに少し夢中になりました。前日、Excelのインポート機能を作成して、フロントエンドではinput type='file'のようなタグを使用し、見栄えが良くありませんでした。したがって、ブログ主は見栄えが良いアップロードコンポーネントを見つけて置き換えることを決意しました。bootstrapがオープンソースであるため、コミュニティには多くのコンポーネントがあります。その中にはこのような一般的なアップロードコンポーネントもあるでしょう。何度も探してみましたが、結局、ブログ主がこのコンポーネントを見つけました：bootstrap fileinput。このコンポーネントの簡単な使用方法、BootStrap Metronic開発フレームワークの経験の要約【五】Bootstrap File Inputファイルアップロードプラグインの使い方の詳細について、多くの詳細は含まれていませんでした。したがって、ブログ主は開発タスクを完了した後、このコンポーネントの一般的な使い方をまとめました。これを記録することで、ノートを取るのにも役立ち、使用する方々に便利にするためです。

ソースコードおよびAPIアドレス：

bootstrap-fileinputソースコード：https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinputオンラインAPI：http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo

一、効果展示

　1、元のinput type='file'は見るに堪えません。

2、装飾を一切しないbootstrap fileinput：（bootstrap fileinput初心者向け進化）

3、bootstrap fileinput高度進化：中国語化、ドラッグ＆ドロップアップロード、ファイル拡張子チェック（必要なファイルでない場合はアップロードを許可しません）

ドラッグ＆ドロップアップロード

アップロード中

4、bootstrap fileinput究極進化：同時に複数のファイルを多スレッドでアップロードを許可します。

アップロード中

アップロードが完了した後

二、コード例

　どうですか？効果はどうですか？急がないで、一つ一つその効果を実現していきます。

1、cshtmlページ

必要なjsとcssファイルをまずインクルードします。

//bootstrap fileinput 
 bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include( 
    "~/Content/bootstrap-fileinput/js/fileinput.min.js", 
    "~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js")); 
 bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include( 
    "~/Content/bootstrap-fileinput/css/fileinput.min.css"); 
@Scripts.Render("~/Content/bootstrap-fileinput/js") 
@Styles.Render("~/Content/bootstrap-fileinput/css") 

それでは、input type='file'タグを定義します。

<form> 
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal-dialog modal-lg" role="document"> 
   <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="myModalLabel">Excelファイルを選択してください</h4> 
    </div> 
    <div class="modal-body"> 
     <a href="~/データ/ExcelTemplate/Order.xlsx" rel="external nofollow" class="form-control" style="border:none;">ダウンロード用のテンプレートをダウンロード</a> 
     <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> 
    </div></div> 
  </div> 
 </div> 
</form>

この一文に注目してください：

<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> 

multipleは複数のファイルを同時にアップロードを許可する、class=“file-loading”はタグのスタイルを示しています。これは非常に重要であり、class="file"の場合、中国語化が有効になりません。

2、js初期化

$(function () { 
 //0. fileinputを初期化 
 var oFileInput = new FileInput(); 
 oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder"); 
});<span class="cnblogs_code_copy"></span> 
<span class="cnblogs_code_copy"></span> 
//fileinputを初期化 
var FileInput = function () { 
 var oFile = new Object(); 
 //fileinputコントロールを初期化（初回初期化） 
 oFile.Init = function(ctrlName, uploadUrl) { 
 var control = $('#' + ctrlName); 
 //アップロードコントロールのスタイルを初期化 
 control.fileinput({ 
  language: 'zh', //言語を設定 
  uploadUrl: uploadUrl, //アップロード先のアドレス 
  allowedFileExtensions: ['jpg', 'gif', 'png'],//受け取るファイルの拡張子 
  showUpload: true, //アップロードボタンを表示するかどうか 
  showCaption: false,//タイトルを表示するかどうか 
  browseClass: "btn btn-primary", //ボタンのスタイル  
  //dropZoneEnabled: false,//ドラッグエリアを表示するかどうか 
  //minImageWidth: 50, //画像の最小幅 
  //minImageHeight: 50,//画像の最小高さ 
  //maxImageWidth: 1000,//画像の最大幅 
  //maxImageHeight: 1000,//画像の最大高さ 
  //maxFileSize: 0,//単位はkbで、0の場合はファイルサイズに制限がありません 
  //minFileCount: 0, 
  maxFileCount: 10, //最大の同時アップロードファイル数を示しています 
  enctype: 'multipart/form-data', 
  validateInitialCount:true, 
  previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" 
  msgFilesTooMany: "選択したアップロードファイルの数({n})が許可されている最大数{m}を超えています！", 
 }); 
 //ファイルのアップロードが完了した後のイベント 
 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) { 
  $("#myModal").modal("hide"); 
  var data = data.response.lstOrderImport; 
  if (data == undefined) { 
   toastr.error('ファイル形式のタイプが正しくありません'); 
   return; 
  } 
  //1.テーブルの初期化 
  var oTable = new TableInit(); 
  oTable.Init(data); 
  $("#div_startimport").show(); 
 }); 
} 
 return oFile; 
}; 

説明：

（1）fileinput()メソッドに渡されるのはJSONデータで、多くの属性が含まれており、各属性はアップロードコントロールを初期化する際の特性を表しています。これらの属性がすべて設定されていない場合、デフォルトの設定が使用されます。園友がその中にどのような属性があるかを確認したい場合は、fileinput.jsのソースコードを開き、最後に図のように表示されます：

这些属性如果不特意设置，就会使用默认值。

（2）$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {}这个方法注册上传完成后的回调事件。也就是后端处理上传的文件之后进入这个方法里面处理。

3、后端C#对应的方法

　还记得在js里面初始化控件方法fileinput()里面有一个参数url吗，这个url对应的值就指示C#后端对应的处理方法。还是贴出后端的处理方法。

[ActionName("ImportOrder")] 
 public object ImportOrder() 
 { 
  var oFile = HttpContext.Current.Request.Files["txt_file"]; 
  var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>(); 
  #region 0.数据准备 
  var lstExistOrder = orderManager.Find(); 
  var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList(); 
  var lstTmModel = modelManager.Find(); 
  var lstTmMaterial = materialManager.Find(); 
  //var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX); 
  //iMax_Import_Index = iMax_Import_Index == null63; 0 : iMax_Import_Index.Value; 
  #endregion 
  #region 1通过Stream获取Workbook对象 
  IWorkbook workbook = null; 
  if (oFile.FileName.EndsWith(".xls")) 
  { 
   workbook = new HSSFWorkbook(oFile.InputStream); 
  } 
  else if (oFile.FileName.EndsWith(".xlsx")) 
  { 
   workbook = new XSSFWorkbook(oFile.InputStream); 
  } 
  if (workbook == null) 
  { 
   return new { }; 
  } 
  //............... Excel の処理ロジック 
  //orderManager.Add(lstOrder); 
  lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList(); 
  return new { lstOrderImport = lstOrderImport }; 
 } 

ブログ主のプロジェクトが Excel のアップロードであるため、ここでは NPOI のロジックを使用しています。画像などのファイルをアップロードする場合は、GDI を使用して画像を処理できます。

4、同時に複数のファイルをアップロード

同時に複数のファイルをアップロードする場合、フロントエンドは複数の非同期リクエストをバックエンドに送信します。つまり、同時に3つのファイルをアップロードする場合、バックエンドの ImportOrder メソッドが3回呼び出されます。これにより、3つのファイルを同時にマルチスレッドで処理することができます。

3. 総括

bootstrap fileinput の基本的な使用方法についての紹介はここまでです。実は単なるアップロードコンポーネントで、高度な使い方はありません。ポイントはユーザーインターフェースをよりフレンドリーにし、ユーザーエクスペリエンスを向上させることです。何か疑問があれば、コメントを残してください。編集者はすぐに回答します。このサイトへのサポートに感謝しています！

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を持ちません。人工的に編集されていません。また、関連する法的責任を負いません。著作権侵害が疑われる内容を見つけた場合は、メールを送信してください：notice#oldtoolbag.com（メールを送信する際に、#を@に置き換えてください。届出を行い、関連する証拠を提供してください。一旦確認がついたら、このサイトは即座に侵害が疑われるコンテンツを削除します。）