Beim Hochladen von Bildern habe ich ein sehr nützliches Steuerelement gefunden, das das gleichzeitige Hochladen mehrerer Bilder unterstützt. Sie können ein Bild durch Klicken auswählen oder das Bild in das Upload-Feld ziehen und es direkt hochladen Und die Schnittstelle ist einfach. Sie können sie direkt in das Projekt einfügen.
Werfen wir zunächst einen Blick auf seinen Stil:
Nach Auswahl eines Bildes:
$(function(){ // Plugin initialisieren $(#demo).zyUpload({ width : 650px, // width height : 400px, // width itemWidth : 120px, // width of file item itemHeight : 100px, / / file Die Höhe der Element-URL: /upload/UploadAction, // Der Pfad der hochgeladenen Datei multiple: true, // Ob mehrere Dateien hochgeladen werden können DragDrop: true, // Ob die Datei gezogen und hochgeladen werden kann del: true, // Ob die Datei gelöscht werden kann finishDel: false, // Ob die Vorschau gelöscht wird, nachdem der Datei-Upload abgeschlossen ist /* Extern erhaltene Rückrufschnittstelle */ onSelect : function(files, allFiles){ //Callback-Methode zum Auswählen von Dateien console.info(Die folgenden Dateien sind derzeit ausgewählt:); allFiles); }, onDelete: function(file, surplusFiles){ // Callback-Methode zum Löschen einer Datei console.info (aktuell gelöschte Datei:); console.info(aktuell verbleibende Dateien:); ; }, onSuccess: function(file){ // Callback-Methode für erfolgreichen Datei-Upload: console.info(Diese Datei wurde erfolgreich hochgeladen:); Die Rückrufmethode für den Datei-Upload-Fehler console.info(Dieser Datei-Upload ist fehlgeschlagen:); console.info(file); }, onComplete: function(responseInfo){ // Die Rückrufmethode für den Upload-Abschluss console.info(Datei-Upload abgeschlossen) ; console .info(responseInfo});Ändern Sie die Konfiguration direkt in demo.js, URL: /upload/UploadAction und geben Sie Ihre Bild-Upload-Aktion ein. Dieses Steuerelement dient nur der Vordergrundverarbeitung, Sie müssen den Hintergrund-Upload selbst schreiben.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.