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.