Cela fonctionne vraiment bien pour moi:

<div class="image-upload">
    <label for="file-input">
        <img src="placeholder.jpg"/>
    </label>

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

avec style:

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

fondamentalement, l'attribut pour de l'étiquette fait en sorte que cliquer sur l'étiquette est la même chose que cliquer sur l'entrée spécifiée .

de plus, la propriété display définie à none la rend telle que l'entrée du fichier n'est pas rendue du tout, la cachant belle 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/

en fait, il peut être fait dans CSS pur et il est assez facile...

code HTML

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSS Styles

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

en positionnant le bouton, réglez l'alpha à 1. Lorsque vous avez fini de définir à 0 (donc vous pouvez voir ce que vous faites!)

assurez-vous de tester tous les navigateurs car ils vont tous rendre le bouton d'entrée de taille légèrement différente.

vous pouvez voir un exemple ici (Ajouter le bouton de piste): http://rakmastering.com/upload /

grande solution par @hardsetting, Mais j'ai fait 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>

j'ai utilisé" visibility: hidden, width:0 "au lieu de" display: none "pour la question safari et j'ai ajouté" pointer-events: none " dans la balise img pour la faire fonctionner si la balise input file type est dans la balise FORM. semble de travail pour moi dans tous les principaux navigateurs. Espérons que cela aide quelqu'un.

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

toute solution basée sur <input type="file"> qui tente de déclencher la boîte de dialogue" Ouvrir le fichier " par d'autres moyens que de cliquer sur le contrôle réel pourrait être retirée des navigateurs pour des raisons de sécurité à tout moment. (I penser dans les versions actuelles de FF et IE, il n'est plus possible de déclencher l'événement de la programmation.)

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>

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

mise en garde : Dans IE9 et IE10, si vous activez l'onclick dans un fichier entré via javascript, le formulaire est signalé comme "dangereux" et ne peut pas être soumis avec javascript, pas sûr qu'il puisse être soumis de manière traditionnelle.

        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>

exécuter SNIPPET ou simplement copier le code ci-dessus et exécuter. Vous obtiendrez ce que vous vouliez. Très simple et efficace sans javascript. Profitez-en!!!

l'entrée elle-même est cachée avec une visibilité CSS:cachée.

alors vous pouvez avoir n'importe quel élément que vous whish - ancre ou 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 ce n'est pas le cas dans FF4Beta

Code De Travail:

cache juste la partie entrée et fais 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>