web-dev-qa-db-fra.com

Remplacer le type d'entrée = fichier par une image

Comme beaucoup de gens, j'aimerais personnaliser le laid input type=file, et je sais que cela ne peut se faire sans quelques hacks et/ou javascript. Mais le problème, c’est que dans mon cas, les boutons de téléchargement de fichiers servent uniquement à télécharger des images ( jpeg | jpg | png | gif ), je me demandais donc. si je pouvais utiliser une image "clickable" qui agirait exactement comme un fichier de type d'entrée (affiche la boîte de dialogue et le même $ _FILE sur la page soumise).
J'ai trouvé une solution de contournement ici , et celui-ci est intéressant aussi (mais ne fonctionne pas sur Chrome = /).

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

cssimagefilebuttoninput
85
Nicolas

Cela fonctionne vraiment bien pour moi:

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

  <input id="file-input" type="file" />
</div>

Fondamentalement, l'attribut pour de l'étiquette permet à de cliquer sur l'étiquette comme si vous sélectionniez l'entrée spécifiée .

En outre, la propriété display définie sur none fait en sorte que l'entrée de fichier ne soit pas restituée du tout, en la cachant Belle et propre.

Testé dans Chrome mais, selon le Web, devrait fonctionner sur tous les principaux navigateurs. :)

EDIT: Ajouté JSFiddle ici: https://jsfiddle.net/c5s42vdz/

234
hardsetting

En fait, cela peut être fait en pure 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 la police de l'entrée sur quelque chose de grand, ce qui augmentera la taille du bouton "parcourir". Des essais et des erreurs sont ensuite nécessaires en utilisant les propriétés négatives gauche/haut pour positionner le bouton de navigation en entrée derrière votre étiquette.

Lorsque vous positionnez le bouton, définissez l'alpha sur 1. Lorsque vous avez terminé, réglez-le sur 0 (pour que vous puissiez voir ce que vous faites!)

Assurez-vous de tester tous les navigateurs, car ils donneront tous une taille légèrement différente au bouton d'entrée.

Vous pouvez voir un exemple ici (bouton Ajouter une piste): http://rakmastering.com/upload/

62
user210437

Excellente solution de @hardsetting, mais j'ai apporté quelques améliorations pour que cela fonctionne avec Safari (5.1.7) dans Windows

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}
<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 le numéro de safari et ajout de pointer-events: none dans la balise img pour que cela fonctionne si la balise de type de fichier en entrée est dans la balise FORM.

Semble travailler pour moi dans tous les principaux navigateurs.

J'espère que ça aide quelqu'un.

12
rishi

Ceci est ma méthode si j'ai eu votre point

[~ # ~] 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>
4
SystemDZ

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

Toute solution de contournement basée sur <input type="file"> Qui tente de déclencher la boîte de dialogue "Ouvrir le fichier" autrement que par un clic sur le contrôle réel peut être supprimée des navigateurs pour des raisons de sécurité à tout moment. (I pense dans les versions actuelles de FF et IE, il n'est plus possible de déclencher cet événement par programme.)

4
Pekka 웃

c'est vraiment simple, vous pouvez essayer ceci:

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

Vous pouvez mettre une image à la place et le 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 un clic dans un fichier saisi via javascript, le formulaire est signalé comme "dangereux" et ne peut pas être soumis avec javascript, non sûr si elle peut être soumise traditionnellement.

1
ParPar
        form input[type="file"] {
          display: none;
        }
<!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>

LANCEZ SNIPPET ou copiez simplement le code ci-dessus et exécutez-le. Vous obtiendrez ce que vous vouliez. Très simple et efficace sans JavaScript. Profitez-en!

1
Neocortex

L'entrée elle-même est masquée avec la visibilité CSS: hidden.

Ensuite, vous pouvez avoir l’élément souhaité - ancre ou image .. Lorsque vous cliquez sur l’ancre/image, cliquez sur le champ de saisie masqué - la boîte de dialogue permettant de sélectionner un fichier s’affiche.

EDIT: En fait, cela fonctionne dans Chrome et Safari, je viens de remarquer que ce n’est pas le cas dans FF4Beta

0
Petrunov

Code de travail:

juste cacher la partie entrée et faire comme ça.

<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>
0
user3400389