Detaillierte Erläuterung der Schritte zur Verwendung von WebUploader in der Fuzzy-Box

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Verwendung von WebUploader in der Fuzzy-Box. Was sind die Vorsichtsmaßnahmen für die Verwendung von WebUploader in der Fuzzy-Box? sehen.

In meinem Abschlussprojekt muss die Schaltfläche Hochladen von WebUploader im verschwommenen Feld Bootstrap angezeigt werden. Der Effekt ist wie folgt:

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

Der eigentliche Effekt ist jedoch dieser Das Unschärfefeld fungiert als Unschärfefeld. Nachdem es angezeigt wurde, kann ich nicht auf die Schaltfläche „Hochladen“ klicken.

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 ; jedoch, wenn ich Es scheint, dass es nach der Änderung andere Fehler gibt. uploader.refresh()

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:

Wie Vue dynamisch aktualisierte Echarts-Komponenten verwendet

Detaillierte Erläuterung der berechneten Anwendungsfälle in Vue.js

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