Was ist Bootstrap?
Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Webanwendungen und Websites. Bootstrap basiert auf HTML, CSS und JavaScript.
Geschichte
Bootstrap wurde von Mark Otto und Jacob Thornton von Twitter entwickelt. Bootstrap ist ein Open -Source -Produkt, das im August 2011 auf GitHub veröffentlicht wurde.
Inhalt des Bootstrap -Pakets
Grundstruktur: Bootstrap bietet eine Grundstruktur mit einem Gittersystem, einem Linkstil und einem Hintergrund. Dies wird im Abschnitt "Bootstrap" ausführlich erklärt.
CSS: Bootstrap verfügt über die folgenden Funktionen: Globale CSS -Einstellungen, Definition der grundlegenden HTML -Elementstile, erweiterbarer Klasse und eines erweiterten Gittersystems. Dies wird im Bereich Bootstrap CSS ausführlich erläutert.
Komponenten: Bootstrap enthält mehr als ein Dutzend wiederverwendbarer Komponenten zum Erstellen von Bildern, Dropdown-Menüs, Navigation, Warnboxen, Popup-Boxen und vielem mehr. Dies wird im Abschnitt Layoutkomponenten ausführlich erläutert.
JavaScript -Plugin: Bootstrap enthält mehr als ein Dutzend benutzerdefinierte JQuery -Plugins. Sie können alle Plugins direkt oder einzeln einfügen. Dies wird im Bootstrap-Plug-in-Abschnitt ausführlich erläutert.
Anpassung: Sie können Bootstrap-Komponenten, weniger Variablen und JQuery-Plug-Ins anpassen, um eine eigene Version zu erhalten.
Was oben eingeführt wird, steht nicht im Mittelpunkt dieses Artikels. Hier finden Sie , wie Sie Bilder nach dem Erstellen des Formulars hochladen. Sie können die Bilder rechtzeitig vorschauen.
Der Code ist wie folgt (Verbindungsadresse: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form3-ee-img.html):
• Wenn Sie sich auf das Jquery-Datei-Upload-Plugin verlassen
• Rufen Sie Global.fn.initplugin ('IMG', 'FormContainer') an;
Das Prinzip dieses Plug-Ins besteht darin, das Bild auf den Server hochzuladen, und dann gibt der Server den Pfad zum Bildspeicher zurück. Schließlich beim Senden des Formulars den Pfad zum Serverspeicher , Parameterbeschreibung:
ID: "Kann nach Belieben angegeben werden, hauptsächlich zur Unterscheidung"
Multiple: 'True', ob beim Hochladen mehrere Auswahldateien zulässig sind
Name: Der Schlüssel, der beim Hochladen einer Datei eingereicht werden muss
Extendattr:
Feld: Beim Speichern des Formulars wird der Schlüsselname gesendet: Optional [Single | Mutiple | null] Wenn es Single ist, bedeutet dies, dass das hochgeladene Bild das vorhandene Bild ersetzt, andernfalls wird es an das aktuelle Bild angehängt.
URL: Die URL, die durch Hochladen des Bildes eingereicht wurde, können Sie auch den Standardwert in global.fn.initUploadimage in der Datei global.js ändern
Hinweis: Das zurückgegebene JSON -Format standardmäßig lautet: {Ergebnis: 200, imgurl: '......'}, Ergebnis: 200 bedeutet, dass das Bild -Upload erfolgreich ist!
Laufen Screenshot:
Das obige ist die vollständige Beschreibung der Unterstützung für die Bootstrap Smart Form Practical Series (9) -Fotografie Upload, die der Editor Ihnen vorgestellt hat. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!