Wie kann ich die HTML5-Dateieingabe mithilfe von CSS und JavaScript anpassen?

Anpassen der Komponente „Eingabedatei“ mithilfe von CSS3 und Javascript

Styling der Komponente mit CSS3 und JavaScript ist möglich. Alternativ können Sie ein formatiertes Div erstellen, das beim Klicken den Dateibrowser auslöst.

CSS3-Styling

Um die Eingabedateikomponente zu formatieren, können Sie CSS3 verwenden. Beispielsweise können die folgenden Stile angewendet werden:

input[type="file"] {
    display: none;
}

Dadurch wird die standardmäßige Dateieingabekomponente ausgeblendet.

JavaScript/jQuery-Implementierung

Mithilfe von JavaScript oder jQuery können Sie die Funktionalität des Komponente. Sie können beispielsweise ein Div erstellen, das beim Klicken den Dateibrowser auslöst:

<div>
<pre class="brush:php;toolbar:false">#file {
    display: none;
}

var wrapper = $('<div>').css({height: 0, width: 0, 'overflow': 'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function() {
    $this = $(this);
    $('#file').text($this.val());
});

$('#file').click(function() {
    fileInput.click();
}).show();<p>Dieses Skript verbirgt die ursprüngliche Eingabedateikomponente und erstellt ein anklickbares Div mit der Bezeichnung „Datei auswählen“. Wenn auf das Div geklickt wird, wird der Dateibrowser geöffnet.</p>
</div>