web-dev-qa-db-fra.com

personnaliser le bouton de fichier pour le téléchargement d'image

Je suis placé sur un bouton pour télécharger des fichiers image. Je souhaite personnaliser ce bouton, je souhaite ajouter plusieurs fichiers image, quelle est la logique à atteindre.

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

Est-il possible de personnaliser le texte "no files choosen" sous le bouton choose.Meanwile est sage de conserver une image d'appareil photo avant le texte no files choosen.

Comment effectuer cela pour améliorer mon site.

Merci

javascriptjqueryhtmlcsshtml5
11
user2161650

Vous pouvez masquer l'entrée en la plaçant dans un div qui est height:0px et overwflow:hidden. Ensuite, vous ajoutez un bouton ou un autre élément HTML que vous pouvez styler à votre guise. Dans l'événement onclick, vous obtenez le champ de saisie à l'aide de javascript ou de jQuery et cliquez dessus:

<div style="height:0px;overflow:hidden">
   <input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" onclick="chooseFile();">choose file</button>

<script>
   function chooseFile() {
      $("#fileInput").click();
   }
</script>

Maintenant, la saisie est masquée, mais vous pouvez styler le bouton comme vous le souhaitez, le fichier sera toujours ouvert en cliquant.

Si vous ne souhaitez pas utiliser jQuery, remplacez la balise script par cette balise script:

<script>
   function chooseFile() {
      document.getElementById("fileInput").click();
   }
</script>
42
Sébastien Garmier

Essayez cette solution manipulée. (Je l'ai essayé aujourd'hui pour l'un de mes projets :))

HTML

  <div class="choose_file">
        <span>Choose File</span>
        <input name="Select File" type="file" />
    </div>

CSS

.choose_file{
    position:relative;
    display:inline-block;    
    border-radius:8px;
    border:#ebebeb solid 1px;
    width:250px; 
    padding: 4px 6px 4px 8px;
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
    color: #7f7f7f;
    margin-top: 2px;
    background:white
}
.choose_file input[type="file"]{
    -webkit-appearance:none; 
    position:absolute;
    top:0; left:0;
    opacity:0; 
}

D&EACUTE;MO

6
Sowmya

Vous pouvez le personnaliser en utilisant uniquement CSS. Passez par le lien ci-dessous. 

HTML

<label class="btn-upload">
   <input type="file" name="fileupload">
   <button class="btn">Browse</button>
</label>

.btn-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.btn-upload input[type=file] {
    position: absolute;
    opacity: 0;
    z-index: 0;
    max-width: 100%;
    height: 100%;
    display: block;
}
.btn-upload .btn{
    padding: 8px 20px;
    background: #337ab7;
    border: 1px solid #2e6da4;
    color: #fff;
    border: 0;
}
.btn-upload:hover .btn{
    padding: 8px 20px;
    background: #2e6da4;
    color: #fff;
    border: 0;
}

http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html

1
Debasis Panda
    <body>

    <style>
   .image{
  position:relative;
   display:inline-block;    
     width:3%; 
   padding: 0%;
    }
.image input[type="file"]{
-webkit-appearance:none; 
position:absolute;
    top:0; left:0;
    opacity:0; 
     }
   </style>

  <div class="image">
    <span><img src='admin/ico/fms.ico' class "image"></span>
    <input name="image" type="file" />
  </div>
</body>
0
J.Mbai