Tout le monde le reconnaîtra, s’il y a bien un contrôle dont le rendu est bien moche sur les navigateurs, c’est le champs d’ajout de fichier, le fameux <input type="file" />.
Proprement instylable, la tendance est de le masquer pour le déclencher à distance, surtout depuis que des API HTML5 permettent de faire des preview des fichiers en attente d’envoi.

Via jQuery, pour déclencher un input file, le simple bout de code suivant fait l’affaire :

$( "#my-input-file" ).trigger( "click" );

Et votre navigateur affichera la fenêtre de dialogue pour choisir le fichier à traiter.

Récemment, dans le cadre d’un projet client, j’ai implémenté ce comportement pour un upload d’images liées à un message, un truc très rigolo, avec des uploads de fichiers en parallèle via AJAX, bref, de l’amusement de codeur… :)

Ce site devant impérativement fonctionner sur mobile, je me suis attelé à mes tests pour me rendre compte que, si le déclenchement à distance d’un input file fonctionnait partout (sauf Android 2.3, qui de toutes façons ne supporte pas grand chose - dont l’upload tout court), il ne fonctionnait pas sur Android 4+, alors que dans les specs, il est bien indiqué que si !

Et en fait, c’est juste une bêtise : sur Android 4+, un input file ne peut être délenché à distance que s’il est visible. Jusque là, via css, mon input file était en display: none, mais ça ne marche pas avec Android 4+. J’ai essayé pas mal de combinaison, à base de visibility: hidden ou autre, mais au final, la seule qui marche bien, c’est celle-ci :

#my-input-file {
    position: absolute;
    top: 0;
    left: -9999px;
}

Avec ces styles, votre input file n’est pas visible à l’écran, mais reste déclenchable via javascrit avec tous les navigateurs du marché.

En espérant que ça serve à d’autres :)