Remplacer l'entrée type=fichier par une image

Question

Remplacer l'entrée type=fichier par une image

Demandé el 18 de Mai, 2010: Quand la question a-t-elle été
314877 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Comme beaucoup de gens, j'aimerais personnaliser la vilaine input type=file et je sais que cela ne peut se faire sans quelques bidouilles et/ou javascript . Mais le problème est que dans mon cas, les boutons de téléchargement de fichiers ne servent qu'à télécharger des images ( jpeg|jpg|png|gif ), je me demandais donc si je pouvais utiliser un " clickable qui agirait exactement comme un fichier de type "input" (afficherait la boîte de dialogue et le même $_FILE sur la page soumise).
J'ai trouvé une solution de contournement aquí y cette intéressante aussi (mais ne fonctionne pas sur Chrome =/).

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

Demandé el 18 de Mai, 2010 par DevShark

Answer 1

5 Réponses

Answer 2

2voto

Petrunov Points 471

L'entrée elle-même est cachée avec le CSS visibility:hidden.

Vous pouvez alors disposer de l'élément de votre choix - ancre ou image - et, lorsque vous cliquez sur l'ancre/l'image, déclencher un clic sur le champ de saisie caché - la boîte de dialogue permettant de sélectionner un fichier s'affichera.

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

Répondu el 15 de Février, 2011 par Petrunov (471 Points )

Answer 3

2voto

user3400389 Points 144

Code de travail :

Il suffit de masquer la partie saisie et de procéder comme suit.

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

Répondu el 25 de Mars, 2014 par user3400389 (144 Points )

Answer 4

2voto

Neocortex Points 643

        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écutez 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. Bon appétit !!!

Répondu el 5 de Décembre, 2014 par Neocortex (643 Points )

Answer 5

0voto

SaraNa Points 7

J'ai eu le même problème et j'ai finalement réussi à le résoudre de cette manière :

Comme d'autres l'ont expliqué, IE9+ et d'autres navigateurs reconnaissent la balise label. Vous pouvez donc régler l'opacité de l'entrée du fichier sur 0, puis avoir l'icône de l'image dans la même balise d'étiquette :

<label class="fileinput-button">
    <img src="upload-icon.png" class="upload-icon"/>
    <input class="file-input" type="file" name="files[]">
</label>

Voici le style CSS :

.file-input {
    opacity: 0;
    filter: alpha(opacity=0);
    position: relative;
 }

Mais dans IE8 et les versions inférieures, la balise label ne se comporte pas comme prévu. Donc, la solution dans ce cas serait de positionner votre image au dessus du bouton de saisie de fichier (assurez-vous qu'ils se chevauchent). Au début, je pensais utiliser le z-index pour positionner un élément devant l'autre. Mais j'ai lu ce blog qui est extrêmement utile pour comprendre le z-index : Ce que personne ne vous a dit sur le z-index

Vous n'avez donc pas besoin de travailler avec le z-index tant que votre icône d'image n'est pas positionnée et que l'entrée de fichier est positionnée (c'est-à-dire qu'elle a une valeur de position autre que "statique"). Ainsi, dans le style CSS .file-input, vous devriez jouer un peu avec les positions gauche et droite pour que l'image recouvre le bouton d'entrée de fichier dans une certaine mesure. Dans mon cas, l'image n'était pas positionnée et se trouvait à gauche du bouton d'entrée de fichier, j'ai donc dû déplacer le bouton d'entrée un peu plus à gauche :

.file-input {
    opacity: 0;
    filter: alpha(opacity=0);
    position: relative;
    left: -50px;
}

Répondu el 24 de Juin, 2014 par SaraNa (7 Points )

Answer 6

0voto

Jigar K Points 1

<script type="text/javascript">
function upl() {
    var fileSelector = document.createElement('input');
    fileSelector.setAttribute('type', 'file');
    fileSelector.setAttribute('name', 'uploimg');
    fileSelector.setAttribute('accept', 'image/*');
    fileSelector.click();
    fileSelector.style.display = "none";

    fileSelector.onchange = function() {
        document.getElementById("indicator").innerHTML = "Uploaded";
    };

    document.getElementById("par_form").appendChild(fileSelector);

}
</script>

<form id="par_form">
    <img src="image_url" onclick="upl()"><br>
    <span id="indicator"></span><br>
    <input type="submit">
</form>

Répondu el 8 de Janvier, 2022 par Jigar K (1 Points )

Remplacer l'entrée type=fichier par une image

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Remplacer l'entrée type=fichier par une image

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: