Die Startstrap-Datei-Upload-Plug-in-Dateieingabe ist eine gute Datei-Upload-Steuerung, aber es gibt nicht viele Fälle in der Suche und Verwendung. Wenn Sie es verwenden, überqueren Sie den Fluss auch, indem Sie den Stein Schritt für Schritt berühren. Diese Steuerung wird auf der Schnittstelle dargestellt, und das Uploadify, das ich zuvor verwendet habe, ist schöner und hat leistungsstärkere Funktionen. Dieser Artikel basiert hauptsächlich auf meinem eigenen Framework-Code-Fall, in dem die Verwendung von Dateieingaben, das Datei-Upload-Plug-In, eingeführt wird.
1. Einführung in die Dateieingabe für das Datei -Upload -Plugin
Die Homepage-Adresse dieses Plug-Ins lautet: http://plugins.krajee.com/file-input. Von hier aus können Sie viele Demo-Code anzeigen: http://plugins.krajee.com/file-basic-usage-demo.
Dies ist eine erweiterte HTML5-Dateieingabed-Steuerung, eine Erweiterung von Bootstrap 3.x, in der Datei-Upload-Vorschau, Multi-File-Upload und andere Funktionen implementiert werden.
Im Allgemeinen müssen wir die folgenden zwei Dateien einführen, damit das Plug-In normal verwendet werden soll:
Bootstrap-fileInput/CSS/fileInput.min.css
Bootstrap-fileInput/js/fileInput.min.js
Der einfache Schnittstelleneffekt ist wie folgt. Wie bei vielen Upload -Dateisteuerungen kann es verschiedene Arten von Dateien akzeptieren. Natürlich können wir auch den spezifischen Dateityp und andere angenommene Funktionen angeben.
Wenn die chinesische Kultur berücksichtigt werden muss, müssen Dokumente eingeführt werden:
Bootstrap-fileInput/js/fileInput_locale_zh.js
Auf diese Weise können wir basierend auf der Bündelsammlung von MVC die Dateien hinzufügen, die sie für die Sammlung benötigen.
// Unterstützung für Bootstrap-fileInput-Steuerung CSS_Meteronic.include ("~/content/myplugins/bootstrap-fileInput/css/fileInput.min.css"); js_meteronic.include ("~/content/myplugins/bootstrap-fileInput/js/fileInput.min.js"); js_meteronic.include ("~/content/myplugins/bootstrap-fileInput/js/fileInput_locale_zh.js"); js_meteronic.include ("~/content/myplugins/bootstrap-fileInput/js/fileInput_locale_zh.js");Auf diese Weise können wir die Beschreibung der chinesischen Schnittstelle und Eingabeaufforderungen auf der Seite vorstellen, wie in der folgenden Schnittstelle gezeigt.
2. Verwendung der Dateieingabe für das Datei -Upload
Im Allgemeinen können wir eine allgemeine JS-Funktion definieren, um diese Plug-in-Steuerung zu initialisieren, wie im folgenden JS-Funktionscode gezeigt.
// Initialisieren Sie die Funktion "FileInput Control (First Initialisierung) initfileInput (Strlname, Uploadurl) {var control = $ ('#' + Strlname); Control.FileInput ({Sprache: 'Zh', // Setzen Sie die Sprache Uploadurl: Uploadurl, // hochgeladene Adresse erlaubt fileextensionen: ['jpg', 'png', 'gif'], // empfangene Datei-Suffix ShowUpload: false, // Die Upload-Taste, die btn, btn: false, file, usw //. // Button Style PreviewFileicon: "<i class = 'Glyphicon Glyphicon-King'> </i>",});};Im Seitencode platzieren wir eine Datei -Upload -Steuerung, wie im folgenden Code gezeigt.
<div style = "Höhe: 500px"> <Eingabe-ID = "Datei-Portrait1" Typ = "Datei"> </div>
Auf diese Weise lautet der Initialisierungscode unseres Skriptcodes wie folgt:
// Initialisieren Sie die DateiInput-Steuerung (Erstinitialisierung) initFileInput ("Datei-Portrait", "/user/editPorTrait");Dadurch wird die Initialisierung der Kontrolle abgeschlossen. Wenn wir eine Datei hochladen müssen, benötigen wir auch JS -Code, um die vom Client hochgeladenen Ereignisse zu verarbeiten, und benötigen auch den MVC -Hintergrundcontroller, um den Dateispeichervorgang zu verarbeiten.
Zum Beispiel ist mein Code zum Speichern von Formulardaten wie folgt.
// Datensatzformvalidat hinzufügen ("ffadd", function (Form) {$ ("add"). Modal ("hide"); // Konstruktparameter an den Hintergrund var postdata = $ ("#ffadd"). Serializearray (); $. {// Porträt-Upload-Verarbeitung initortrait (Data.Data1); }). Fehler (function () {showtips ("Sie sind nicht berechtigt, diese Funktion zu verwenden, bitte wenden Sie sich an den Administrator, um sie zu verarbeiten.");}); });Unter ihnen haben wir den Teil des Dateispeichers festgestellt:
// Fügen Sie die Upload-Verarbeitung von Porträtinitortrait hinzu (data.data1); // Verwenden Sie die schriftliche ID, um $ ('#Datei-Portrait'). FileInput ('Upload') zu aktualisieren.Die erste Codezeile besteht darin, den hochgeladenen zusätzlichen Inhalt wie die ID -Informationen des Benutzers neu zu erstellen, damit wir zusätzliche Daten basierend auf diesen IDs zum Hochladen und Verarbeitung für den Hintergrund erstellen können.
Diese Funktion gibt die ID hauptsächlich zu, um den Erwerb der neuesten zusätzlichen Parameter beim Hochladen zu erleichtern. Dies entspricht dem Uploadify -Verarbeitungsmodus.
// Bildinformationsfunktion initialisieren InitorTrait (Strlname, id) {var control = $ ('#' + Strlname); var imageurl = '/picturealbum/getPortrait? id =' + id + '& r =' + math.random (); // Wichtig ist es erforderlich, den zusätzlichen Parameterinhalt der Steuerung und die Bildinitialisierung zu aktualisieren. }); }Wie wir bereits gesehen haben, lautet die von mir hochgeladene Adresse: "/user/editportrait". Ich werde auch diese Hintergrundfunktion bekannt geben, in der Hoffnung, Ihnen einen vollständigen Fallcode zum Lernen zu geben.
/// <summary> /// Benutzer Avatar Image hochladen /// </summary> /// <param name = "id"> Benutzer -ID </param> /// <returns> </returns> public actionResult EditPortrait (int id) {CommonResult -Ergebnis = new CommonResult (); try {var files = request.files; if (Dateien! = null && files.count> 0) {userInfo info = bllfactory <Benote> .instance.findbyId (id); if (info! result.success = Bllfactory <Beus> .Instance.UpdatePersonImageBytes (userImagetype.personPortrait, ID, fehlgefügt); }}} catch (Ausnahme ex) {result.errormessage = ex.Message; } return tojsonContent (Ergebnis); }Auf diese Weise haben wir die oben genannte Logik des Benutzerporträts und der Verarbeitung erstellt, und die Dateien können normal im Hintergrunddateisystem gespeichert werden, und gleichzeitig werden einige erforderliche Informationen in der Datenbank aufgezeichnet.
Natürlich können wir nicht nur zur Verarbeitung von Benutzerporträtbildern verwendet, sondern auch die Verarbeitungsvorgänge für Bildalbumbilder erstellen. Die spezifische Schnittstelle ist wie folgt.
Der Initialisierungscode für diesen Teil lautet wie folgt:
// Initialisieren Sie die DateiInput-Steuerung (Erstinitialisierung) $ ('#Datei-Portrait'). FileInput ({Sprache: 'Zh', // Setzen Sie die Sprache hochladen: "/FileUpload/Upload", // Upload-Adresse erlaubte Fileextens: ['JPG', PNG ', gif']. 'MultiPart/Formdata', showUpload: true, // Hat die Upload-Taste Showcaption: false, // macht der Titel Browser BrowserClass: "Btn Btn-Primary", // Button Style PreviewFileicon: "<i class = 'Glyphicon Glyphicon-King-King-King-Sely-King-Sely-King-King-ado-king-ado-addlowd. ({n}) überschreitet den maximal zulässigen Wert {m}! ",});Das obige ist die detaillierte Erläuterung der Erfahrung des vom Editor [fünf] vorgestellten Rahmenwerks für die metronische Entwicklung von Bootstrap-Metronikern. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie weitere Informationen wissen möchten, achten Sie bitte auf die Website wulin.com!