web-dev-qa-db-fra.com

Bouton de téléchargement personnalisé

salut je me demandais simplement comment vous pouvez créer votre propre bouton de téléchargement de fichier personnalisé, car le mieux que je puisse faire est 

enter image description here

et ce que je veux réaliser est

enter image description here

s'il y a un moyen de le faire, je vous en serais très reconnaissant, et puis-je obtenir des réponses expliquant comment le faire avec du code et non avec des liens vers des sites Web vous permettant de télécharger un bouton ou quelque chose comme ça ,Je vous remercie :)

javascriptupload
15
daka

Bien que certaines de ces réponses créent quelque chose qui semble correspondre à votre souhait, elles s'effondrent lorsqu'elles tentent de donner les résultats escomptés. L’entrée de fichier ne donne pas directement le style et vous aurez du mal à l’essayer. Cependant, il y a un truc.

L'astuce consiste à régler l'opacité de l'entrée sur 0, puis de modifier l'arrière-plan situé au-dessous du style de bouton souhaité.

.file_button_container,
.file_button_container input {
     height: 47px;
     width: 263px;
 }

 .file_button_container {
     background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;
 }

 .file_button_container input {
     opacity: 0;
 }
<div class="file_button_container"><input type="file" /></div>

31
natedavisolds

Je pense que vous pouvez aussi essayer de le faire de cette façon:
Créer un élément <label for="X"></label> supplémentaire que vous pouvez styler facilement avec CSS 

<div class="container">
  <label for="upload" class="uploadButton">Upload</label>
  <input type="file" name="upload" id="upload">
</div>

comme

.container {
  position: relative;
}
.uploadButton {
  height: 25px;
  width: 66px;
  display: block;
  cursor: pointer;
  background: url('http://www.ifunia.com/images/christmas/youtube-upload-button.gif') center center no-repeat;
}
input[type="file"] {
  display: block;
  width: 66px;
  height: 25px;
  clip: rect(0px 0px 0px 0px);
  position: absolute;
  left: 0;
  top: 0;
}
<form>
  <div class="container">
    <label for="upload" class="uploadButton"></label>
    <input type="file" name="upload" id="upload" required />
  </div>
  <hr/>
  <button type="submit">Submit</button>
</form>

21
Alexandru Bangală

Utilisez CSS pour styliser le bouton en fonction de son identifiant ou de sa classe.

Cela pourrait aider: http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

1
Sam

La flèche n’est pas quelque chose que vous pouvez "manipuler avec du code" et les angles arrondis fonctionneraient bien sous Firefox, mais pas avec css ... si vous avez juste besoin d’utiliser une image personnalisée, c’est simple:

css:

#my_upload_button{
  background-image:url(path-to-file.png);
  border:none;
}
1
Trey

Voici une approximation du bouton que vous voulez avec css/html 

html 

<button class="upload">Choose a file to upload...</button>

css 

.upload{
    border:0;
    padding:10px 20px;
    -moz-border-radius:10px;
    border-radius:10px;
    background-color:#4488ee;
    color:white;
    font-size:16px;
}

démo http://jsfiddle.net/gaby/qdX5d/2/

pour les angles arrondis dans les versions antérieures à IE9, utilisez css3pie

1
Gabriele Petrioli

Je suis trop tard pour répondre mais quelqu'un trouvera sûrement cela utile dans le futur, inutile d'utiliser Javascript ou le champ masqué. Si vous utilisez Bootstrap, il est clair que btn CSS n'est pas non plus nécessaire.

#upload_file 
{
    display: none;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.btn {
    -moz-user-select: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    white-space: nowrap;
}
<label for="upload_file" class="custom-file-upload btn btn-primary"><i class="fa fa-cloud-upload"></i> File Upload</label>
<input class="margin" type="file" formnovalidate id="upload_file" name="file" accept="*">

0
Anup Yadav

Utilisez le libellé de l'entrée en tant que bouton de téléchargement personnalisé:

<label for="pic" class="uploadfilelabel" >upload </label>
<input type="hidden" name="MAX_FILE_SIZE" value="110000">
<input id="pic" name="pic" type="file" size="110000">

et CSS:

 label.uploadfilelabel{/*custom label here*/}
 input[type=file]{display:none;}

Notez que le bouton d’entrée principal n’a pas été affiché, sinon il occupera de la place.

0
Ormoz

Étape 1. Créez un balisage HTML simple

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

Étape 2. CSS: partie délicate

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

Pour une démonstration voir ici http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

0
Alex