web-dev-qa-db-fra.com

Comment puis-je télécharger un nouveau fichier en cliquant sur le bouton image

J'ai la tâche de télécharger un nouveau fichier en cliquant sur le bouton image. Mon code est

    <label>File</lable>
    <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>

En cliquant sur ce bouton, je souhaite télécharger un nouveau fichier, comment faire? Vous pouvez vérifier mon code à partir de Démo

javascriptjqueryhtmlcss3
19
Niths

Vous pouvez ajouter un champ de saisie de fichier caché, comme:

<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />

Et fait:

$("input[type='image']").click(function() {
    $("input[id='my_file']").click();
});

Démo :: Fiddle mis à jour

42
Sudhir Bastakoti

Il n'y a pas besoin de javascript, mettez simplement le <input> et le <img> à l'intérieur <label> assurez-vous de masquer le <input> ainsi:

   <label for="image">
      <input type="file" name="image" id="image" style="display:none;"/>
      <img src="IMAGE URL"/>
   </label>
5
Perlat Kociaj

Si vous recherchez une solution compatible avec plusieurs navigateurs, vous devriez vérifier plupload ( http://www.plupload.com ) il prend également en charge les boutons d'image de ce dont je me souviens.

2
Rasmus Bech

vous utilisez la mauvaise entrée, utilisez plutôt le fichier, si vous voulez que le bouton ressemble au cercle dans votre démo de code, vous devrez utiliser CSS pour changer la façon dont "soumettre" ressemble. Cela doit être sous une forme:

<form action="upload_file.php" method="post" enctype="multipart/form-data">
  <input type="file" name="myfile"/>
  <input type="submit" class="circle-btn"/>
<form>

Je ne sais pas quelle langue utilisez-vous côté serveur (PHP, ASP.NET, etc.) mais vous devrez créer une page (par exemple "upload_file.php" pour php). Vous pouvez facilement trouver des exemples dans google sur la façon de créer une page comme ça, copiez simplement pasete le code:

Un exemple en PHP: http://www.w3schools.com/php/php_file_upload.asp

J'espère que ça aide :)

2
Remo H. Jansen

Vous pouvez le faire en utilisant css.

Veuillez vérifier la 4ème réponse dans ce blog.

Comment puis-je personnaliser le bouton Parcourir?

Vous pouvez utiliser votre image comme image de fond de la classe . Button .

1
Supriti Panda

Supplément pour la réponse de DemoUser, ajoutez .focus () fonctionne pour moi.

  $("input[type='image']").click(function() {
    $("input[id='my_file']").focus().click();
  });
0
user1087079