Grundlegende Verwendung des Upload-Plugins bootstrap fileinput

Einleitung:

Die drei vorherigen Artikel haben einige gängige Anwendungen von Bootstrap Table vorgestellt und haben gezeigt, dass der Blogger von diesem flachen Stil angezogen wird. Vor zwei Tagen habe ich eine Funktion zur Excel-Importierung erstellt, bei der das Frontend das originale input type='file'-Tag verwendet hat, das Ergebnis war unerträglich, daher hat der Blogger beschlossen, ein schönes Upload-Component zu finden, um es zu ersetzen. Da Bootstrap Open Source ist, gibt es sicherlich viele Komponenten in der Community, sicherlich auch solche gängigen Upload-Komponenten. Nach einer Suche wurde der Blogger fündig und fand diese Komponente: bootstrap fileinput. Über die einfache Anwendung dieser Komponente, basierend auf der Erfahrung mit dem BootStrap Metronic-Entwicklungsrahmen (Fünf), detaillierte Erklärung der Verwendung des Bootstrap File Input-Dateiupload-Plugins, wobei viele Details nicht behandelt wurden. Daher hat der Blogger, neben der Erledigung der Entwicklungsarbeit, einige gängige Anwendungen dieser Komponente zusammengefasst. Dies wird hier aufgeschrieben, um eine Notiz zu machen und auch Freunden, die es verwenden müssen, etwas zu erleichtern.

Quellcode und API-Adresse:

bootstrap-fileinput Quellcode:https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput Online API:http://plugins.krajee.com/file-input

bootstrap-fileinput Demo-Darstellung:http://plugins.krajee.com/file-basic-usage-demo

Eins, Effekt-Demonstration

　1、Das ursprüngliche input type='file' ist einfach unangenehm anzusehen.

2、Nichts dekoriertes Bootstrap fileinput: (Bootstrap fileinput grundlegende Evolution)

3、Bootstrap fileinput fortgeschrittene Evolution: Chinesifizierung, Drag and Drop Upload, Dateierweiterungsvalidierung (wenn es sich nicht um erforderliche Dateien handelt, wird der Upload nicht erlaubt)

Drag and Drop Upload

Während des Uploads

4、Bootstrap fileinput ultimative Evolution: Es ist möglich, gleichzeitig mehrere Dateien in mehreren Threads hochzuladen.

Während des Uploads

Nach dem Upload

Zwei, Code-Beispiel

　Wie geht es? Wie ist das Ergebnis? Keine Sorge, wir realisieren Schritt für Schritt die oben genannten Effekte.

1、cshtml-Datei

Zuerst führen Sie die erforderlichen js- und css-Dateien ein.

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

Dann definieren Sie das input type='file'-Tag

<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">Wählen Sie eine Excel-Datei aus</h4> 
    </div> 
    <div class="modal-body"> 
     <a href="~/Daten/ExcelTemplate/Order.xlsx" rel="external nofollow" class="form-control" style="border:none;">Laden Sie das Importmuster herunter</a> 
     <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> 
    </div></div> 
  </div> 
 </div> 
</form>

Besondere Aufmerksamkeit sollte auf diesen Satz gelegt werden:

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

multiple bedeutet, dass mehrere Dateien gleichzeitig hochgeladen werden können, class=“file-"loading" bedeutet das Style der Etikette. Das ist sehr wichtig, wenn class="file", dann funktioniert die Chinesifizierung nicht.

2、js initialisieren

$(function () { 
 //0. fileinput initialisieren 
 var oFileInput = new FileInput(); 
 oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder"); 
});<span class="cnblogs_code_copy"></span> 
<span class="cnblogs_code_copy"></span> 
//fileinput initialisieren 
var FileInput = function () { 
 var oFile = new Object(); 
 //fileinput-Kontrolle initialisieren (erster Initialisierung) 
 oFile.Init = function(ctrlName, uploadUrl) { 
 var control = $('#' + ctrlName); 
 //Stile für den Upload-Controller initialisieren 
 control.fileinput({ 
  language: 'zh', //Sprache einstellen 
  uploadUrl: uploadUrl, //hochgeladene Adresse 
  allowedFileExtensions: ['jpg', 'gif', 'png'],//Akzeptierte Dateiendungen 
  showUpload: true, //Ob der Upload-Button angezeigt wird 
  showCaption: false,//Ob der Titel angezeigt wird 
  browseClass: "btn btn-primary", //Stil der Schaltfläche  
  //dropZoneEnabled: false,//Ob der Drag-and-Drop-Bereich angezeigt wird 
  //minImageWidth: 50, //Minimale Breite des Bildes 
  //minImageHeight: 50,//Minimale Höhe des Bildes 
  //maxImageWidth: 1000,//Maximale Breite des Bildes 
  //maxImageHeight: 1000,//Maximale Höhe des Bildes 
  //maxFileSize: 0,//Einheit in kb, wenn 0, bedeutet das keine Beschränkung der Dateigröße 
  //minFileCount: 0, 
  maxFileCount: 10, //Das bedeutet, dass die maximale Anzahl gleichzeitig hochzuladender Dateien erlaubt ist 
  enctype: 'multipart/form-data', 
  validateInitialCount: true, 
  previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" 
  msgFilesTooMany: "Die Anzahl der ausgewählten Dateien ({n}) überschreitet die zulässige maximale Anzahl {m}!", 
 }); 
 //Nachdem die Datei-Import-Upload abgeschlossen ist, wird dieses Ereignis ausgelöst 
 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) { 
  $("#myModal").modal("hide"); 
  var data = data.response.lstOrderImport; 
  if (data == undefined) { 
   toastr.error('Die Dateiformatart ist nicht korrekt'); 
   return; 
  } 
  //1.Initialisierung der Tabelle 
  var oTable = new TableInit(); 
  oTable.Init(data); 
  $("#div_startimport").show(); 
 }); 
} 
 return oFile; 
}; 

Erklärung:

（1Der fileinput()-Methodenparameter ist ein JSON-Datenobjekt, das viele Eigenschaften enthält. Jede Eigenschaft repräsentiert eine Eigenschaft des Upload-Controls bei der Initialisierung. Wenn diese Eigenschaften nicht festgelegt sind, wird die Standardkonfiguration verwendet. Wenn die Freunde sehen möchten, welche Eigenschaften darin enthalten sind, können sie den Quellcode von fileinput.js öffnen, wie am Ende gezeigt:

Diese Eigenschaften werden standardmäßig verwendet, wenn sie nicht besonders eingestellt werden.

（2）$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {} diese Methode registriert den Callback-Event nach dem Upload. Das bedeutet, dass nach der Verarbeitung der hochgeladenen Datei in diese Methode weitergeleitet wird.

3、C#-Rückwartemethode

　Denken Sie daran, dass im js die Methode fileinput() einen Parameter url hat, der den Wert angibt, der auf die C#-Rückwartsmethode verweist. Hier ist der Rückwartebearbeitungsmethode der Backend.

[ActionName("ImportOrder")] 
 public object ImportOrder() 
 { 
  var oFile = HttpContext.Current.Request.Files["txt_file"]; 
  var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>(); 
  #region 0. Datenbereitung 
  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 ?63; 0 : iMax_Import_Index.Value; 
  #endregion 
  #region 1Über Stream erhalten Sie das Workbook-Objekt; 
  IWorkbook Arbeitsmappe = null; 
  if (oFile.FileName.EndsWith(".xls")) 
  { 
   Arbeitsmappe = new HSSFWorkbook(oFile.InputStream); 
  } 
  else if(oFile.FileName.EndsWith(".xlsx")) 
  { 
   workbook = new XSSFWorkbook(oFile.InputStream); 
  } 
  if (workbook == null) 
  { 
   return new { }; 
  } 
  //...............Excel-Verarbeitung logik 
  //orderManager.Add(lstOrder); 
  lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList(); 
  return new { lstOrderImport = lstOrderImport }; 
 } 

Da der Projekt des Bloggers das Hochladen von Excel-Dateien ist, wird hier das LOGIK von NPOI verwendet. Wenn Bilder oder andere Dateien hochgeladen werden, kann GDI verwendet werden, um Bilder zu verarbeiten.

4Mehrere Dateien gleichzeitig hochladen

Wenn mehrere Dateien gleichzeitig hochgeladen werden, sendet das Frontend mehrere asynchrone Anfragen an das Backend, das bedeutet, dass, wenn gleichzeitig drei Dateien hochgeladen werden, die ImportOrder-Methode im Backend dreimal aufgerufen wird. Auf diese Weise kann gleichzeitig mit mehreren Threads mit drei Dateien gearbeitet werden.

Zusammenfassung

Überblick über die grundlegende Verwendung von bootstrap fileinput ist beendet. Es handelt sich其实就是一个上传的组件，也不存在什么高级用法。Der Fokus liegt darauf, die Benutzeroberfläche zu verbessern und die Benutzererfahrung zu verbessern. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht, der Herausgeber wird rechtzeitig antworten. Ich danke auch sehr für die Unterstützung der Website yells教程!

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt daher keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige Urheberrechtsinhalte entdecken, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt daher keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige Urheberrechtsinhalte entdecken, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.