Remplacer l'entrée type=fichier par une image

Question

Comme beaucoup de gens, j'aimerais personnaliser la vilaine input type=file et je sais que cela ne peut se faire sans quelques bidouilles et/ou javascript . Mais le problème est que dans mon cas, les boutons de téléchargement de fichiers ne servent qu'à télécharger des images ( jpeg|jpg|png|gif ), je me demandais donc si je pouvais utiliser un " clickable qui agirait exactement comme un fichier de type "input" (afficherait la boîte de dialogue et le même $_FILE sur la page soumise).
J'ai trouvé une solution de contournement aquí y cette intéressante aussi (mais ne fonctionne pas sur Chrome =/).

Que faites-vous lorsque vous souhaitez donner du style à vos boutons de fichiers ? Si vous avez un point de vue sur le sujet, cliquez sur le bouton réponse ;)

Answer 1

J'utiliserais SWFUpload o Uploadify . Ils ont besoin de Flash mais font tout ce que vous voulez sans problème.

Tous <input type="file"> qui tente de déclencher la boîte de dialogue "ouvrir un fichier" par des moyens autres que le clic sur le contrôle proprement dit, pourrait être supprimée des navigateurs à tout moment pour des raisons de sécurité. (I penser dans les versions actuelles de FF et IE, il n'est plus possible de déclencher cet événement par programme).

Answer 2

Voici ma méthode, si j'ai bien compris

HTML

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>

Answer 3

Au cours des dix dernières années, j'ai rencontré de nombreux problèmes liés à des entrées cachées ou non visibles ; parfois, les choses sont beaucoup plus simples qu'on ne le pense.

J'ai eu quelques soucis avec IE 5,6,7,8 et 9 qui ne supportait pas l'opacité et donc l'entrée du fichier couvrait l'image téléchargée mais le code css suivant a résolu le problème.

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);  

L'extrait suivant a été testé sur chrome, IE 5, 6, 7, 8, 9, 10. Le seul problème avec IE 5 est qu'il ne supporte pas la marge automatique.

Exécutez l'extrait, copiez et collez simplement le CSS et le HTML et modifiez la taille comme vous le souhaitez.

.file-upload{
    height:100px;
    width:100px;
    margin:40px auto;
    border:1px solid #f0c0d0;
    border-radius:100px;
    overflow:hidden;
    position:relative;
}
.file-upload input{
    position:absolute;
    height:400px;
    width:400px;
    left:-200px;
    top:-200px;
    background:transparent;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);  
}
.file-upload img{
    height:70px;
    width:70px;
    margin:15px;
}

<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>

Answer 4

C'est très simple, vous pouvez essayer :

$("#image id").click(function(){
    $("#input id").click();
});

Answer 5

Vous pouvez mettre une image à la place, en procédant de la manière suivante :

HTML :

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery :

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT : Dans IE9 et IE10, si vous déclenchez le onclick dans un fichier d'entrée via javascript, le formulaire est marqué comme 'dangereux' et ne peut pas être soumis avec javascript, pas sûr qu'il puisse être soumis traditionnellement.