Ich wurde in letzter Zeit verschont. Ich habe einige häufige Verwendungen von Bootstrap -Dateikomponenten zusammengefasst. Ich werde es für Ihre Referenz mit der Wulin Network -Plattform teilen, und es ist auch für zukünftige Suchanfragen bequem. Bitte vergib mir das schlechte Schreiben dieses Artikels.
1. Effektanzeige
1. Der ursprüngliche Eingangstyp = 'Datei' ist so unerträglich, ihn anzusehen.
2. Bootstrap FileInput ohne Dekoration: (Primärentwicklung von Bootstrap FileInput)
3.. Erweiterte Entwicklung von Bootstrap FileInput: Chinesische Kultur, Drag & drop-Upload, Dateierweiterungsüberprüfung (wenn die Datei nicht erforderlich ist, wird sie nicht hochgeladen)
Ziehen und Drop -Upload
Hochladen
4. Bootstrap FileInput Ultimate Evolution: Ermöglicht, dass mehrere Dateien gleichzeitig von mehreren Threads hochgeladen werden.
Hochladen
Nach Abschluss des Uploads
2. Code Beispiele
Wie wäre es damit? Wie effektiv? Machen Sie sich keine Sorgen, wir werden die oben genannten Ergebnisse Schritt für Schritt erreichen.
1. CSHTML -Seite
Stellen Sie zunächst die erforderlichen JS- und CSS -Dateien ein.
// Bootstrap FileInputBundles.add (neuer Skriptbund ("~/content/bootstrap-fileInput/js"). Include ("~/content/bootstrap-fileInput/js/fileinput.min.js", "~/content/bootstrap-fileInput/js/fileinput_zh.js.j.js"); StyleBundle ("~/content/bootstrap-fileInput/css"). Include ("~/content/bootstrap-fileInput/css/fileInput.min.css");Definieren Sie dann das Eingabetyp = 'Datei' Tag
<form> <div id = "MYMODAL" tabIndex = "-1" rollen = "dialog" aria-labelledBy = "myModallabel"> <div rollen = "document"> <div> <button type = "button" data-dismiss = "modal" aria-label id = "myModallabel"> Bitte wählen Sie Excel -Datei </h4> </div> <div> <a href = "~/data/exceltemplate/order.xlsx" style = "border: Keine;> Download -Import -Vorlage </a> <Eingabe type =" Datei "name" name = "txt_file" id = "txt_file" multiple/> </ph> </ph> </> </</</</Divile> </</ph> </> </</</</</Divile> </ph> </> </</</</Divile>
Konzentrieren Sie sich auf diesen Satz:
<Eingabe type = "Datei" name = "txt_file" id = "txt_file" multiple />
Mehrere Mittel, dass mehrere Dateien gleichzeitig hochgeladen werden dürfen, und Class = "Dateiladung" bedeutet den Stil des Tags.
2. JS -Initialisierung
$ (function () {// 0. Initialize FileInputVar ofileInput = new FileInput (); Ofileinput.init ("txt_file", "/api/orderapi/importRoder");}); // InitialInputvar -Datei -Datei -Datei initialeinput initialisieren. Uploadurl) {var control = $ ('#' + Strlname); // Initialisieren Sie den Stil der Upload -Steuerung. showCaption: false, //Does the title browser browserClass: "btn btn-primary", //Button style//dropZoneEnabled: false, //Does the drag area//minImageWidth: 50, //MinimageWidth of the picture//minImageHeight: 50,//The minimum height of the picture//maxImageWidth: 1000,//The maximum width of the Bild // MaximageHeight: 1000, // Die maximale Höhe des Bildes // MaxFileSize: 0, // Das Gerät ist KB. Richtig, PreviewFileicon: "<i class = 'Glyphicon-Glyphicon-King'> </i>", msgFilestoomany: "Wählen Sie die Anzahl der hochgeladenen Dateien aus ({n}) überschreitet das maximal zulässige Wert {m}! PreviewID, Index) {$ ("#MyModal"). Modal ("Hide"); TableInit (); otable.init (data); $ ("#div_startimport"). Show ();});} return ofile;};veranschaulichen:
(1) Die Methode für FileInput () wird in einen JSON -Daten übergeben, der viele Attribute aufweist. Jedes Attribut repräsentiert die Eigenschaften bei der Initialisierung der Upload -Steuerung. Wenn keines dieser Attribute festgelegt sind, bedeutet dies, dass die Standardeinstellungen verwendet werden. Wenn Sie sehen möchten, welche Eigenschaften sich darin befinden, können Sie den Quellcode von FileInput.js öffnen, wie am Ende gezeigt:
Wenn diese Eigenschaften nicht spezifisch festgelegt werden, werden die Standardwerte verwendet.
(2) $ ("#txt_file"). On ("FileUploaded", Funktion (Ereignis, Daten, Vorschau, Index) {} Diese Methode registriert das Rückrufereignis nach dem Hochladen. Dh nach der Verarbeitung der hochgeladenen Datei am Tag nach dem Tag nach der Verarbeitung wird die Methode eingegeben, um sie zu verarbeiten.
3.. Methoden, die dem Hintergrund c# entsprechen
Erinnerst du dich daran, dass es in der Initialisierungssteuerungsmethode FileInput () in JS eine Parameter -URL gibt? Der entsprechende Wert dieser URL zeigt die entsprechende Verarbeitungsmethode von C# nach dem Tag an. Oder veröffentlichen Sie die Hintergrundverarbeitungsmethode.
[ActionName ("importorder")] public Object importRoder () {var ofile = httpcontext.current 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. Holen Sie sich das Arbeitsbuchobjekt über Stream iWorkbook Workbook = null; if (Ofile.FileName.endswith (". XSSFWORKBOOK (OFILE.InputStream);} if (workbook == null) {return New {};} // ............ Behandle Excel Logic //orderManager.Add(lstorder)LstOrderimport = lstorderimport.OrderBy (x => x.import_statu).Da das Projekt des Bloggers darin besteht, Excel hochzuladen, wird die NPOI -Logik hier verwendet. Wenn Sie Bilder und andere Dateien hochladen, können Sie mit GDI die Bilder verarbeiten.
4. Laden Sie mehrere Dateien gleichzeitig hoch hoch
Wenn gleichzeitig mehrere Dateien hochgeladen werden, sendet die Rezeption mehrere asynchrone Anforderungen an den Hintergrund. Das heißt, wenn gleichzeitig drei Dateien hochgeladen werden, wird die Import -Methode im Hintergrund dreimal eingegeben. Auf diese Weise können Sie drei Dateien gleichzeitig mit mehreren Threads verarbeiten.
3. Zusammenfassung
Die grundlegende Verwendung von Bootstrap FileInput wird grob eingeführt. Tatsächlich handelt es sich um eine hochgeladene Komponente und es gibt keine erweiterten Verwendungen. Der Schlüssel ist, die Benutzeroberfläche freundlicher zu gestalten und die Benutzererfahrung besser zu erhöhen.
Ich werde Ihnen so viel über die Verwendung von Bootstrap -Dateidatei -Upload -Komponenten vorstellen. Ich hoffe, es wird für Sie hilfreich sein!