web-dev-qa-db-fra.com

Changer le texte par défaut dans type d'entrée = "fichier"?

Je veux changer le texte par défaut du bouton "Choose File" lorsque nous utilisons input="file".

enter image description here

Comment puis-je faire ceci? Aussi, comme vous pouvez le voir dans l'image, le bouton est à gauche du texte. Comment puis-je le mettre sur le côté droit du texte?

fileinputdefault-value
134
Harry Joy

Chaque navigateur a son propre rendu du contrôle et, en tant que tel, vous ne pouvez modifier ni le texte ni l'orientation du contrôle.

Vous voudrez peut-être essayer certaines sortes de "hacks" si vous voulez une solution html / css plutôt qu'une solution Flash ou silverlight .

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Personnellement, comme la plupart des utilisateurs s'en tiennent au navigateur de leur choix et sont donc probablement habitués à voir le contrôle dans le rendu par défaut, ils seraient probablement déroutés s'ils voyaient quelque chose de différent (en fonction du type d'utilisateur avec lequel vous traitez) .

42
Shiv Kumar

Utilisez l'attribut "for" de label pour input. 

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>


$("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label for="files" class="btn">Select Image</label>
      <input id="files" style="visibility:hidden;" type="file">
    </div>

116
algometrix

Cela pourrait aider quelqu'un à l'avenir, vous pouvez attribuer un style à l'étiquette de l'entrée, y insérer ce que vous voulez et masquer l'entrée sans affichage.

Cela fonctionne parfaitement sur cordova avec iOS

<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">

18
Paulo Mogollón

Je pense que c'est ce que vous voulez:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>

13
1Cr18Ni9

Ce n'est pas possible. Sinon, vous devrez peut-être utiliser le contrôle de téléchargement Silverlight ou Flash.

7
Anuraj

Voici comment vous pouvez le faire:

jQuery: 

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

css 

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}
.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Code HTML: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>
3
Tushar Shukla

Mise à jour 2017:

J'ai fait des recherches sur la façon dont cela pourrait être réalisé. Et la meilleure explication/tutoriel est ici: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

J'écrirai ici le résumé juste au cas où il deviendrait indisponible. Donc, vous devriez avoir HTML:

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

Puis masquer l'entrée avec CSS:

.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}

Puis coiffez l'étiquette:

.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}

Ensuite, vous pouvez éventuellement ajouter JS pour afficher le nom du fichier:

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label    = input.nextElementSibling,
    labelVal = label.innerHTML;

input.addEventListener( 'change', function( e )
{
    var fileName = '';
    if( this.files && this.files.length > 1 )
        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
    else
        fileName = e.target.value.split( '\\' ).pop();

    if( fileName )
        label.querySelector( 'span' ).innerHTML = fileName;
    else
        label.innerHTML = labelVal;
});
});

Mais vraiment, il suffit de lire le tutoriel et de télécharger la démo, c’est vraiment bien.

2
user3784950

En utilisant Bootstrap, vous pouvez faire comme ci-dessous le code.

<!DOCTYPE html>
<html lang="en">
<head>
<style>

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>
2
Rana Aalamgeer

J'ai fait un script et l'ai publié sur GitHub: get selectFile.js Facile à utiliser, n'hésitez pas à le cloner.


HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>


JS

var getFile = new selectFile;
getFile.targets('choose','selected');


D&EACUTE;MO

jsfiddle.net/Thielicious/4oxmsy49/

2
Thielicious

J'utiliserais une button pour déclencher la input:

<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />

Rapide et propre.

1
Sony Santos

Ok, c’est une manière très simple de créer votre fichier d’entrée personnalisé.

Utilisez des étiquettes, mais comme vous le savez grâce aux réponses précédentes, l'étiquette n'invoque pas onclick Function dans Firefox, cela peut être un bogue, mais cela n'a pas d'importance avec ce qui suit.

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

Qu'est-ce que vous faites, c'est que le style de l'étiquette ressemble à ce que vous souhaitez

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

maintenant, cachez simplement le bouton de saisie, mais vous ne pouvez pas le régler sur visability: hidden

Donc rendre invisible en mettant opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

maintenant, comme vous l'avez peut-être remarqué, j'ai la même classe sur mon étiquette que celle de mon champ de saisie, c'est-à-dire parce que je veux que les deux aient le même style, donc où que vous cliquiez sur l'étiquette, vous cliquez en fait sur l'invisible champ de saisie.

0
Jadin Hornsby

Cela devrait fonctionner:

input. className :: - webkit-file-upload-button { contenu du style .. }

0
Andrius

Vous pouvez utiliser cette approche, cela fonctionne même si beaucoup de fichiers sont entrés.

const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')

;[...buttons].forEach(function (btn) {
  btn.onclick = function () {
    btn.parentElement.querySelector('input[type="file"]').click()
  }
})

;[...fileBlocks].forEach(function (block) {
  block.querySelector('input[type="file"]').onchange = function () {
    const filename = this.files[0].name

    block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
  }
})
.btn-select-file {
  border-radius: 20px;
}

input[type="file"] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
  <button class="btn-select-file">Select Image 1</button>
  <input type="file">
</div>
<br>
<div class="file-block">
  <button class="btn-select-file">Select Image 2</button>
  <input type="file">
</div>

0
Илья Зеленько

Laissez-moi ajouter un hack que j'ai utilisé. Je voulais avoir une section qui vous permettait de glisser-déposer des fichiers et je voulais que cette section-là soit cliquable avec le bouton de téléchargement d'origine. 

Voici à quoi ça ressemblait quand j'ai eu fini (moins la capacité de glisser-déposer, il y a beaucoup de tutoriels sur la façon de le faire).

Et puis, j’ai créé une série d’articles de blog qui traitent principalement de boutons de téléchargement de fichiers.

0
Mr. Me
<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">

C'est toujours le meilleur jusqu'à présent

0
oroyo segun