Wie verstecke ich Dateieingabeelemente und ersetze sie durch „Durchsuchen'-Schaltflächen?

Dateieingabeelemente mit Schaltflächen zum Durchsuchen stilvoll verbergen

Die Standarddarstellung von <input type="file"> Elemente enthält ein Textfeld, das den ausgewählten Dateipfad anzeigt. In Situationen wie dem Hochladen mehrerer Dateien, in denen der Dateipfad nicht angezeigt wird, bevorzugen Sie jedoch möglicherweise eine optimierte Benutzeroberfläche mit nur einer sichtbaren Schaltfläche „Durchsuchen“.

Um dies zu erreichen, können Sie CSS und JavaScript nutzen:

<input type="file">

Dieses Code-Snippet erstellt ein verstecktes Dateieingabeelement mit der ID „selectedFile“ und einer sichtbaren Schaltfläche mit der Bezeichnung „Durchsuchen…“ mit einem Onclick-Ereignis-Listener. Wenn auf die Schaltfläche geklickt wird, wird das Klickereignis des versteckten Dateieingabeelements ausgelöst, wodurch die Dateiauswahl ohne das sichtbare Textfeld ermöglicht wird.

Zum Beispiel, wenn Sie den Multi-File-Upload-Code verwenden, den Sie von Morningz.com erwähnt haben , können Sie diese Technik integrieren, um die Benutzeroberfläche zu verbessern:

<input type="file">

Mit dieser Änderung verfügt Ihre Seite zum Hochladen mehrerer Dateien nur über die Schaltfläche „Durchsuchen…“, was eine benutzerfreundlichere und benutzerfreundlichere Oberfläche bietet optimierte Erfahrung.

Das obige ist der detaillierte Inhalt vonWie verstecke ich Dateieingabeelemente und ersetze sie durch „Durchsuchen'-Schaltflächen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!