Utilizzo di base dell'estensione di upload file di 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高级进化：中文化、可拖拽上传、文件扩展名校验（如果不是需要的文件，不让上传）

Trascina e rilascia per caricare

In corso di caricamento

4、bootstrap fileinput evoluzione estrema: permette di caricare contemporaneamente più file in modalità multithreading.

In corso di caricamento

Dopo aver caricato

2、Esempio di codice

　Come va? Come è l'effetto? Non preoccuparti, realizzeremo passo dopo passo gli effetti sopra menzionati.

1、cshtml pagina

Prima di tutto, includi i file js e css necessari.

//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") 

Poi definisci il tag 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="Chiudi"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="myModalLabel">Scegli il file Excel</h4> 
    </div> 
    <div class="modal-body"> 
     <a href="~/Data/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", //Stile del pulsante  
  //dropZoneEnabled: false,//Mostra o nasconde la zona di trascinamento 
  //minImageWidth: 50, //Larghezza minima dell'immagine 
  //minImageHeight: 50,//Altezza minima dell'immagine 
  //maxImageWidth: 1000,//Larghezza massima dell'immagine 
  //maxImageHeight: 1000,//Altezza massima dell'immagine 
  //maxFileSize: 0,//Unità di misura in kb, se è 0 non c'è limite per la dimensione del file 
  //minFileCount: 0, 
  maxFileCount: 10, // Indica il numero massimo di file che possono essere caricati contemporaneamente 
  enctype: 'multipart/form-data', 
  validateInitialCount: true, 
  previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
  msgFilesTooMany: "Il numero di file selezionati ({n}) supera il numero massimo consentito {m}! ", 
 }); 
 //Evento dopo che il file è stato caricato con successo 
 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) { 
  $("#myModal").modal("hide"); 
  var data = data.response.lstOrderImport; 
  if (data == undefined) { 
   toastr.error('Il tipo di formato del file non è corretto'); 
   return; 
  } 
  //1. Inizializzazione della tabella 
  var oTable = new TableInit(); 
  oTable.Init(data); 
  $("#div_startimport").show(); 
 }); 
} 
 return oFile; 
}; 

Spiegazione:

(1) Il metodo fileinput() riceve un dati json, che contiene molte proprietà. Ogni proprietà rappresenta le caratteristiche dell'interfaccia di upload durante l'inizializzazione. Se queste proprietà non vengono configurate, significa che verranno utilizzate le impostazioni predefinite. Se i visitatori vogliono vedere quali proprietà ci sono, possono aprire il codice sorgente di fileinput.js, alla fine come illustrato nell'immagine:

Queste proprietà, se non vengono configurate appositamente, utilizzeranno i valori predefiniti.

(2) $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {} questo metodo registra l'evento di callback dopo l'upload completato. È il metodo che viene chiamato dopo che il file è stato trattato dal lato posteriore.

3、后台C#对应的方法

　Ricordate che in js nel metodo di inizializzazione del controllo fileinput() c'è un parametro url, il valore di questo url indica il metodo di trattamento corrispondente al lato posteriore di C#. Ecco il metodo di trattamento posteriore.

[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 == null ? 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 { }; 
  } 
  //...............logica di elaborazione Excel 
  //orderManager.Add(lstOrder); 
  lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList(); 
  return new { lstOrderImport = lstOrderImport }; 
 } 

Poiché il progetto del blogger riguarda il caricamento di file Excel, qui viene utilizzato il logica di NPOI; se si caricano immagini o altri file, è possibile utilizzare GDI per gestire le immagini.

4. Caricamento contemporaneo di più file

Quando si caricano più file contemporaneamente, la pagina front-end invierà più richieste asincrone al backend, ovvero quando si caricano tre file contemporaneamente, il metodo ImportOrder del backend verrà chiamato tre volte. In questo modo è possibile utilizzare più thread per gestire contemporaneamente tre file.

Terza sezione: Sommario

La guida di base sull'uso di bootstrap fileinput è praticamente completa, in realtà è un componente di upload, non esiste alcuna utilizzo avanzato. L'obiettivo principale è rendere l'interfaccia più amichevole e migliorare l'esperienza utente. Se avete qualsiasi domanda, lasciate un commento, il moderatore risponderà prontamente. In questo senso, ringrazio anche tutti i sostenitori del sito Web Yell Guide!

Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, sei invitato a inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata la veridicità, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.