Comme beaucoup de gens, j'aimerais personnaliser le moche input type=file, et je sais que cela ne peut pas se faire sans quelques hacks et / ou javascript. Mais, le fait est que dans mon cas, les boutons de téléchargement de fichiers sont juste pour télécharger des images ( jpeg | jpg | png | gif ), donc je me demandais si je pourrais utiliser une clickableimage " " qui agirait exactement comme un fichier de type d'entrée ( afficher la boîte de dialogue, et même $ _FILE sur la page soumise).
J'ai trouvé une solution de contournement ici , et celle-ci intéressante aussi (mais ne fonctionne pas sur Chrome = /).

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

Cela fonctionne vraiment bien pour moi:

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

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

Fondamentalement, l' attribut for de l'étiquette fait en sorte que cliquer sur l'étiquette équivaut à cliquer sur l'entrée spécifiée .

De plus, la propriété display définie sur none fait en sorte que l'entrée du fichier ne soit pas rendue du tout, ce qui la masque de manière agréable et propre.

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

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

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". Il faut ensuite quelques essais et erreurs en utilisant les propriétés négatives gauche / haut pour positionner le bouton de navigation d'entrée derrière votre étiquette.

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

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

Excellente solution de @hardsetting, mais j'ai apporté quelques améliorations pour le faire fonctionner 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>

Je l' ai utilisé au visibility: hidden, width:0lieu de display: nonepour la délivrance safari et ajouté pointer-events: nonedans imgtag pour le faire fonctionner si balise de type de fichier d'entrée est dans la balise FORM.

Semble fonctionner pour moi dans tous les principaux navigateurs.

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

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

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

C'est ma méthode si j'ai 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>

c'est vraiment simple, vous pouvez essayer ceci:

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

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');
});

CAVEAT : Dans IE9 et IE10, si vous déclenchez le onclick dans un fichier entré via javascript, le formulaire est signalé comme «dangereux» et ne peut pas être soumis avec javascript, vous ne savez pas s'il peut être soumis traditionnellement.

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

Ensuite, vous pouvez avoir n'importe quel élément que vous souhaitez - ancre ou image .., lorsque vous cliquez sur l'ancre / l'image, déclenchez un clic sur le champ de saisie caché - la boîte de dialogue de sélection d'un fichier apparaîtra.

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

Code de travail:

cachez simplement la partie d'entrée et faites 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>

        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>

RUN SNIPPET ou Copiez simplement le code ci-dessus et exécutez. Vous obtiendrez ce que vous vouliez. Très simple et efficace sans javascript. Prendre plaisir!!!

J'ai eu beaucoup de problèmes avec des entrées cachées et non visibles au cours de la dernière décennie, parfois les choses sont beaucoup plus simples que nous ne le pensons.

J'ai eu un petit souhait avec IE 5, 6, 7, 8 et 9 pour ne pas prendre en charge l'opacité et donc l'entrée de fichier couvrirait l'image de téléchargement, mais le code css suivant a résolu le problème.

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

Ce qui suit est testé sur chrome, IE 5,6,7,8,9,10 le seul problème dans IE 5 est qu'il ne prend pas en charge la marge automatique.

Exécutez l'extrait de code, copiez et collez simplement le CSS et le HTML, modifiez la taille à votre guise.

.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>