Vor kurzem schreibe ich meine persönliche Website, das Bootstrap -Framework, das am vorderen Ende verwendet wird. Als ich die Upload-Funktion von Bildern erreichte, fand ich ein Bootstrap-basierter Bild-Upload-Framework-Datei-Eingabed-Plug-In im Internet. Dieses Plug-In stimmt sehr überein mit meiner ästhetischen Ansicht, daher werde ich kurz die Verwendung dieses Plug-Ins aufzeichnen.
Stellen Sie zunächst Plugin -CSS- und JS -Dateien gemäß Ihrem Projektpfad ein
Beachten Sie, dass Lokal -Sprachdateien nach FileInput.min.js Datei eingeführt werden
<!-Dateieingabe-> <link href = "../../ CSS/fileInput.min.css" rel = "stylesheet"> <script src = "../../ js/fileInput.min.js"> </script> <script src = "../ JS/locales/zh.js" type
Dann gibt es den HTML-Code, weil ich kein professionelles Front-End bin, so
<!-Modal Box (modal)-> <span style = "White-Space: PRE"> </span> <div id = "myModal" tabindex = "-1" Rolle = "Dialog" aria-labelledBy = "MYMODALLABEL. style = "White-Space: PRE"> </span> <div> <span style = "White-Space: PRE"> </span> <div> <span style = "White-Space: PRE"> </span> <div> <span style = "White-Space: Pre"> </span> <button = "button" Data-Dismiss = "modal". style="white-space:pre"> </span></button> <span style="white-space:pre"> </span><h3 id="myModalLabel" align="center"> <span style="white-space:pre"> </span><b>Added music score information</b> <span style="white-space:pre"> </span></h3> <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><form id="addForm" role="form" enctype="multipart/form-data"> <span style="white-space:pre"> </span> <div> <span style="white-space:pre"> </span> <span> Score name</span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <input type="text" id="scoreName" name="scoreName" placeholder=""> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div style="display: inline-table; margin-top: 10px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span><span> Score type</span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style = "White-Space: PRE"> </span> <span style = "White-Space: PRE"> </span> <span style = "White-Space: Pre"> </span> </div> <span style = "weißer Raum: pre"> </span> <span Style = "White-Space: Pre"> </span> <span-table style-table; 10px; Rand-Links: 90px; "> <span style =" White-Space: PRE "> </span> <span style =" White-Space: PRE "> </span> <span style =" weißer Raum: pre "> </span> <span Style =" White-Space: Pre "> </span> <Eingabe-Typ". <span style = "White-Space: PRE"> </span> </div> <span style = "White-Space: pre"> </span> <div style = "margin-top: 10px;"> <span style = "weißer space: pre"> </span> <span> <span> <span> <span> < style = "White-Space: PRE"> </span> <Eingabe type = "text" id = "monde" name = "monde"> <span style = "weißer space: pre"> </span> </div> <span style = "White-Space: Pre"> </span> <div> <span Style = "White-Space: Pre"> </span> <inpa. </span> </div> <span style = "White-Space: PRE"> </span> </form> <span style = "White-Space: PRE"> </span> </div> <span style = "White-Space: PRE"> </span> </div> <span style = "White-Space: Pre"> </span> </span> <div> <span. data-dismiss="modal">Close<span style="white-space:pre"> </span></button> <span style="white-space:pre"> </span><!-- <span style="white-space:pre"> </span><!-- <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span></div><!-- /.
Dann initialisiert der JS-Code das Dateieingang
// Initialisieren Sie die Funktion "FileInput Control (First Initialisierung) initfileInput (Strlname, Uploadurl) {var control = $ ('#' + Strlname); contrel.FileInput ({Sprache: 'Zh', // Setzen Sie die Sprache Uploadurl: Uploadurl, // Hochgeladene Adresse erlaubte Fileextensionen: ['JPG', 'png', 'gif'], // empfangene Datei-Suffix ShowUpload: // Die Upload-Taste, die btn-btn btn: false, fehler- // // Der Titel brownbrowser, btn, btn, false, false, usw // Der Titel brownbrowser, btn, btn, fehler, der tital, der title brownbrowserclass: btn. // Button Style PreviewFileicon: "<i class = 'Glyphicon Glyphicon-King'> </i>", Uploadasync: Falsch, uploadextradata: function (previewID) {var obj = {}; $ (this) .val (); } // FileInput initFileInput ("FileUp", http: // localhost: 8080/web/guita/addguitainfo.action);Dieser Code ist der Kern des Plugins
Uploadurl ist der vom Hintergrund angegebene Zugriffspfad
Dies ist hier ein besonderer Absatz
uploadextradata: function (previewID, index) {var obj = {}; $ ('#Addform'). Find ('Eingabe'). Jede (Funktion () {var id = $ (this) .attr ('id'), val = $ (this) .val (); obj [id] = val;}); Rückkehr obj; }Dieser Code uploadextradata eignet sich zum Übergeben zusätzlicher Parameter, mit denen Formulare für andere Eingabefelddaten übermittelt werden können.
UPloadextradata: {Typ: "Typ", Tune: "Tune"}Im Allgemeinen können statische Daten direkt empfangen werden, wie in der obigen Abbildung gezeigt. Wenn Sie es jedoch so schreiben, erhalten Sie keine dynamischen Daten. Die Daten werden nur einmal während der Initialisierung generiert und ändern sich nicht.
Ich war über viel Zeit über dieses Problem verwirrt. Schließlich las ich die Diskussionen von ausländischen Freunden über Git und beziehe mich dann auf die API, um sie zu lösen.
Nach dem Schreiben können Sie die Renderings sehen
Der Stil ist immer noch sehr gut. Klicken Sie hier, um es hochzuladen, und die gesamten Daten werden in den Hintergrund übermittelt.
Viele der Plug-in-Anwendungen, die ich online gefunden habe, sind in PHP integriert. Ich habe es in Java geschrieben. Hier ging ich auch zu dem im Hintergrund erhaltenen Code. SpringMVC Framework ist sehr bequem, Daten zu empfangen.
Auf diese Weise werden die Datenparameter und Bildparameter übergeben, und der Hintergrund ruft den von der Datei hochgeladenen Code auf, um das Bild zu speichern
Es gibt viele Verwendungen, die es wert ist, für dieses Plug-In zu studieren. Hier spreche ich kurz darüber, wie man es benutzt und die Übertragung dynamischer Daten abschließt. Freunde, die gerade mit diesem Plug-In in Kontakt gekommen sind, können eine kurze Referenz machen.
Ich habe so viel über die Methode von Bootstrap vorgestellt, Bilder mithilfe des Dateieingabesteuers hochzuladen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!