January 26, 2012

November 25, 2019

File input. Zastąpienie go własnym elementem za pomocą jquery

Dziś potrzebowałem zastąpić średnio wyglądający standardowy file input. Po nie całkiem udanych próbach z użyciem css postanowiłem sięgnąć po jquery. Tutaj obyło się bez problemów. Poniżej prosty przykład.

<div>
<input type="file" name="files[]" multiple="multiple" id="image_form" />
<button id="image_button">Dodaj zdjęcia.</button>
</div>

Teraz za pomocą jQuery powiążemy kliknięcie w button z kliknięciem w input.

<script>
$('button#image_button').click(function(event) {
event.preventDefault();
$('input#image_form').click();
});
</script>

Na koniec schowamy input za pomocą css.

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

Prosty i efektywny sposób, dzięki któremu można zastąpić file input dowolnym elementem.

© 2020 Przemysław Kołodziejczyk