Remplacer input type=file par une image

Comme beaucoup de gens, j'aimerais personnaliser le laid input type=file, et je sais qu'il ne peut pas se faire sans quelques hacks et/ou javascript. Mais, le truc, c'est que dans mon cas, le fichier de téléchargement boutons sont simplement de téléchargement d'images (jpeg|jpg|png|gif), donc je me demandais si je pouvais utiliser un "clickable" image qui agissent exactement comme un input type file (afficher la boîte de dialogue, et même $_FILE sur la page).

J'ai trouvé des solution de contournement ici, et cette intéressante trop (mais ne fonctionne pas sur Chrome =/).

Ce que les gars, vous ne le faites lorsque vous voulez ajouter un peu de style à votre fichier de boutons? Si vous avez un point de vue à ce sujet, il suffit de frapper le bouton réponse 😉

Pour tout le monde en débarquant ici, tympanus.net/codrops/2015/09/15/... pourrait également être en valeur un regard. (Non affilié à ce site, en aucune façon, la forme ou la forme.)
Vous pouvez consulter Comment faire de la photo pour le travail que l'entrée de type de fichier?.

InformationsquelleAutor Nicolas | 2010-05-18

231

Cela fonctionne vraiment bien pour moi:

CSS:
```
.image-upload>input {
  display: none;
}
```
HTML:
```
<div class="image-upload">
  <label for="file-input">
    <img src="placeholder.jpg"/>
  </label>

  <input id="file-input" type="file" />
</div>
```
Fondamentalement la pour attribut de l'étiquette qu'il fait en sorte que cliquant sur l'étiquette est la même que de cliquer sur l'entrée spécifié.

Aussi, la propriété display none fait en sorte que le fichier d'entrée n'est pas rendus à tous, en le cachant agréable et propre.

Testé dans Chrome mais d'après le web devrait fonctionner sur tous les principaux navigateurs. 🙂

EDIT:
Ajouté JSFiddle ici: https://jsfiddle.net/c5s42vdz/
- je ne suis pas sûr si les gens jugent toujours un " major navigateur, mais cela ne semble pas fonctionner dans IE7
- cela n'a pas fonctionné pour moi dans IE8
- grande, mais il ne marche pas sous iOS 🙁
- il semble être de travailler sur les dernières versions de Safari (7+) quelle version utilisez-vous?
- iOS 8 bêta... 😉
- cela ne fonctionne pas dans IE9 Compat Vue
- Pour moi, c'est de travailler dans IE11, j'ai ajouté un JSFiddle de sorte que vous pouvez le vérifier ainsi.
- Vous avez raison! Désolé (j'étais Peut-être dans un autre mode de document, ie8 ou moins)
- désolé mais je pense que ce code doit être mis à jour avec le nom de fichier ou au moins un message indiquant que le fichier a été sélectionné avec succès. L'utilisateur n'a pas d'entrée visuelle sur ce qui s'est passé après qu'il a sélectionné le fichier. Cela pourrait-il être fait s'il vous plaît? Peut-être changer d'image, quand un fichier est choisi?
InformationsquelleAutor hardsetting
62

En fait, il peut être fait en pur css et c'est assez facile...

Code HTML
```
<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>
```
Styles CSS
```
label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}
```
L'idée est de positionner l'entrée absolument à l'intérieur de votre étiquette. définissez la taille de police de l'entrée à quelque chose de grand, qui va augmenter la taille du bouton "parcourir". Il prend alors quelques essais et d'erreur en utilisant le négatif à gauche /haut de la page des propriétés de la position de l'entrée bouton parcourir derrière votre étiquette.

Lors du positionnement de la touche, définir l'alpha à 1. Lorsque vous avez fini de définir à 0 (donc vous pouvez voir ce que vous faites!)

Assurez-vous de tester sur tous les navigateurs, car ils vont tous rendre sur le bouton input est légèrement différente de la taille.

Vous pouvez voir un exemple ici (Ajouter un bouton de Piste): http://rakmastering.com/upload/
- Merci Toby, pourquoi est-il " de gauche: -700 pixels;' ? Dans firefox, le fichier champ de saisie est en fait, flottant dans le côté gauche de la page...il ne colle pas à l'étiquette portée ... Si je supprimer " à gauche: -700 pixels;' il fonctionne très bien
- ne fonctionne pas pour moi... probablement perdre les commandes
- +1 Merci, @Sloin de gauche:-700 pixels parce qu'il voulait obtenir le bouton parcourir pour être au-dessus du bouton de sorte que le curseur sera un pointeur et pas le curseur de texte.
InformationsquelleAutor
12

Excellente solution par @hardsetting,
Mais j'ai fait quelques améliorations à faire le travail avec Safari(5.1.7) dans windows

CSS:
```
.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}
```
HTML:
```
<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>
```
J'ai utilisé visibility: hidden, width:0 au lieu de display: none pour safari question et a ajouté pointer-events: none dans img tag pour qu'il fonctionne si un fichier d'entrée type de balise en balise FORM.

Semble de travail pour moi dans tous les principaux navigateurs.

Espère que cela aide quelqu'un.
- il n'est pas nécessaire d'ajouter style="pointer-events: none" son créer le problème pour ouvrir le parcourir.
InformationsquelleAutor rishi
4

Je voudrais utiliser SWFUpload ou Uploadify. Ils ont besoin de Flash, mais faire tout ce que vous voulez sans problèmes.

Tout <input type="file"> base de solution de contournement qui essaie de déclencher l'ouverture du fichier boîte de dialogue" par d'autres moyens que de cliquer sur le contrôle réel pourrait être retiré de navigateurs pour des raisons de sécurité à tout moment. (Je pense dans les versions actuelles de FF et IE, il n'est plus possible de déclencher l'événement de la programmation.)
- Merci, j'ai vu autour de trop, mais je pense que les deux d'entre eux ont besoin d'un lecteur flash de travail, et je ne veux pas ajouter un autre obligatoire couche pour les utilisateurs. Plus êtes-vous sûr qu'ils vont envoyer exactement le même type de données que le fichier d'entrée n'? Je ne veux pas de tester à nouveau tous mes scripts PHP fait dans la soumission de la page. Des acclamations.
- non, ils fonctionnent différemment, ils ne sont pas des éléments de formulaire, mais envoyer le fichier à un récepteur de script sur leur propre, vous aurait probablement changer votre script de flux de travail. Si ce n'est pas une option, je pense que vous ne pouvez pas faire mieux que Shaun Inman a fait dans le post que vous avez un lien pour...
- Je crains donc, c'est vraiment une honte. N'est-ce pas là quelque chose à ce sujet dans l'avenir CSS de mise en œuvre? Merci pour les réponses en tout cas 🙂
- vous êtes les bienvenus. Bonne question au sujet de la CSS - je ne sais pas en fait, mais HTML 5 peut bien apporter de nouvelles choses ici. Découvrez appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload par exemple.
- Ouais, ça semble prometteur même si la démo appelsiini.net/demo/html5_upload/demo.html ne s'affiche pas avec mon FF 3.6.3 attendu qu'il dit que j'ai besoin FF 3.6.x de toute façon, pour revenir à mon problème, actuellement, HTML/CSS/Javascript (mais pas de flash) seulement permettez-moi de faire quoi? Certaines polices et la "couleur" de la personnalisation? Suis-je le droit alors? Des acclamations.
- voici une bonne vue d'ensemble sur les solutions de contournement: quirksmode.org/dom/inputfile.html avec la limitation qu'ils ne fonctionnent pas sur Chrome je ne sais pas quel est l'état de choses est là.
- Ouais j'ai oublié de mentionner que la page, ce qui pourrait être la meilleure solution dans mon cas, mais le problème avec l'effacement de l'image choisie ainsi que certaines limitations sur les vieux navigateurs me faire un peu réticent. Btw, je ne vois aucun problème sur Chrome 4.1 🙂
InformationsquelleAutor Pekka 웃

C'est ma méthode, si j'étais votre point de

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>

InformationsquelleAutor SystemDZ

2

son vraiment simple, vous pouvez essayer ceci:
```
$("#image id").click(function(){
    $("#input id").click();
});
```
InformationsquelleAutor Zicsus
1

Vous pouvez mettre une image à la place, et de faire comme ceci:

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');
});
```
Mise en garde:
Dans IE9 et IE10 si vous déclenchez le onclick dans un fichier d'entrée via javascript le formulaire est marqué comme "dangereuses", et ne peut pas être submmited avec javascript, pas sûr si elle peut être soumis traditionaly.
- Doesnot travail dans FF
InformationsquelleAutor ParPar

CSS:

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

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

EXÉCUTER EXTRAIT ou il suffit de copier le code ci-dessus et de les exécuter. Vous obtiendrez ce que vous vouliez. Très simple et efficace sans javascript. Profitez-en!!!

Malheureusement, ces méthodes ne fonctionne pas sous Safari pour moi 🙁

InformationsquelleAutor Neocortex

0

L'entrée est cachée avec CSS visibility:hidden.

Alors vous pouvez avoir tout ce que l'élément que vous désirez - ancre ou de l'image.., lorsque l'ancre/l'image est cliquée, déclencher un clic sur le champ caché - la boîte de dialogue de sélection de fichier apparaît.

EDIT: en Fait il fonctionne dans Chrome et Safari, je viens de remarquer que n'est pas le cas dans FF4Beta

InformationsquelleAutor Petrunov

Code De Travail:

vient masquer l'entrée de la partie et de faire comme cela.

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>

où sont readURL() la méthode?

InformationsquelleAutor user3400389

Vous devez vous connecter pour publier un commentaire.