Detaillierte Erläuterung der Schritte zur Verwendung von WebUploader in Bootstrap

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von WebUploader in Bootstrap ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von WebUploader in Bootstrap? Hier ist ein praktischer Fall.

In meinem Abschlussprojekt muss die WebUploader-Upload-Schaltfläche im Bootstrap-Unschärfefeld angezeigt werden. Der Effekt ist wie folgt:

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial】

Wir haben die hochgeladene Komponente direkt in die Unschärfebox von Bootstrap eingefügt:

Der tatsächliche Effekt besteht jedoch darin, dass beim Erscheinen des Unschärfefelds nicht auf die Schaltfläche zum Hochladen geklickt werden kann.

Nachdem ich jedoch F12 gedrückt hatte, um zu überprüfen, ob in der Konsole ein Fehler vorlag, konnte WebUploader tatsächlich das Dateiauswahlfeld öffnen und andere Funktionen waren normal.

Nachdem ich die Daten konsultiert hatte, stellte ich fest, dass der Grund für den Fehler darin liegt, dass die Länge und Breite der Schaltfläche [Datei auswählen] beide 0 sind und die Webseite neu gerendert werden muss und F12 passiert haben die Funktion, Webseiten neu zu rendern oder zu instanzen. Muss erneut instanziiert werden: uploader.refresh()

Die erste Idee besteht darin, das Klickereignis für die Schaltfläche des Unschärfefelds zu registrieren und dies zu tun, wenn das Unschärfefeld angezeigt wird uploader.refresh(); jedoch, wenn ich Es scheint, dass es nach der Änderung andere Fehler gibt.

Die endgültige Lösung besteht darin, das durch die Unschärfebox ausgelöste Ereignis abzuhören und dann die Komponente zu aktualisieren:

$('#updateModal').on('shown.bs.modal',function() {//提示框显示时候触发
    uploader.refresh();   //刷新当前webUploder
 });

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Inhalte finden Sie auf anderen chinesischen PHP-Websites. Verwandte Artikel!

Empfohlene Lektüre:

Vue implementiert die dynamische Aktualisierung der Echarts-Komponente

Verwenden Sie Selectpicker, um Dropdown-Box im Bootstrap zu implementieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von WebUploader in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!