Changer le texte par défaut dans input type = "file"?

183

Je souhaite modifier le texte par défaut sur le bouton " Choose File" lorsque nous l'utilisons input="file".

entrez la description de l'image ici

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

html file input default-value Harry Joy
la source
Il existe une option pour obtenir ce texte en variable?
kicaj
1
La réponse de ParPar ici est probablement ce que vous recherchez: stackoverflow.com/questions/1944267/… .
Aniket Suryavanshi
duplication possible de Comment renommer le bouton HTML "parcourir" d'un type d'entrée = fichier? pour la partie texte, pour le style en général: stackoverflow.com/questions/572768/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Essayez cette solution: stackoverflow.com/a/30275263/1657573
Michael Tarimo
Double possible de Comment changer le texte du bouton de <input type = "file" />?
Bae

Réponses:

49

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

Il existe des "sortes de" hacks que vous voudrez peut-être essayer si vous voulez html/css solution plutôt qu’un Flash ou silverlightSolution.

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

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

Personnellement, parce que la plupart des utilisateurs s'en tiennent à leur navigateur de choix et sont donc probablement habitués à voir le contrôle dans le rendu par défaut, ils seraient probablement confus s'ils voyaient quelque chose de différent (selon les types d'utilisateurs avec lesquels vous avez affaire) .

Shiv Kumar
la source
177

Utilisez l' "for"attribut de labelfor input.

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>
Vous trouverez ci-dessous le code pour récupérer le nom du fichier téléchargé 

$("#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>
Développer l'extrait

algométrix
la source
20
display:nonepeut être utilisé sur INPUT afin de ne pas utiliser l'espace inutile.
Master DJon
2
Je vous remercie. Cela fonctionnait parfaitement et était exactement ce que je recherchais.
Chris - Jr
Fonctionne bien sur Mac avec Chrome, FF et Safari. S'il le fait également sur IE, c'est l'option la meilleure et la plus simple pour styliser le bouton d'entrée de fichier. Merci!
Pod
5
fonctionne bien, le seul petit inconvénient est que l'utilisateur ne peut pas voir le nom du fichier qui a été sélectionné lors de la sélection.
luke_mclachlan
2
@Mike a mis à jour le message pour récupérer le nom du fichier
algometrix
29

Je pense que c'est ce que tu veux:

<!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>
Développer l'extrait

1Cr18Ni9
la source
27

Cela pourrait aider quelqu'un à l'avenir, vous pouvez styliser l'étiquette de l'entrée comme vous le souhaitez et y mettre tout ce que vous voulez et masquer l'entrée avec display none.

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">
Développer l'extrait

Paulo Mogollón
la source
1
meilleure solution que j'ai trouvée jusqu'à présent! +1
danyo
7

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

Anuraj
la source
1
Ce qui n'est pas possible? Changer le texte ou placer le bouton à droite ou les deux?
Harry Joy
13
J'ai voté pour cela, car je pense qu'il est injuste de voter contre cette réponse. Il est fondamentalement impossible de modifier le texte du bouton d'entrée de fichier natif. Les «solutions possibles» sont tous des hacks ou des solutions de contournement.
Peter Lee
10
@PeterLee - Les hackers sont des solutions, certains suivent même les spécifications du W3C.
Derek 朕 會 功夫
3

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>
Tushar Shukla
la source
3 
<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

oroyo segun
la source
2

En utilisant Bootstrap, vous pouvez faire cette chose 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>
Rana Aalamgeer
la source
Ce code n'imprime pas sur la page Web le fichier choisi.
tale852150
2

J'ai fait un script et l'ai publié sur GitHub: obtenez 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');


DEMO

jsfiddle.net/Thielicious/4oxmsy49/

Thielicious
la source
2

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 un résumé ici au cas où il deviendrait indisponible. Vous devriez donc avoir du HTML:

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

Puis masquez l'entrée avec CSS:

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

Puis stylisez 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 juste lire le tutoriel et télécharger la démo, c'est vraiment bien.

user3784950
la source
1

J'utiliserais un buttonpour déclencher le input:

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

Rapide et propre.

Sony Santos
la source
1

Vous pouvez utiliser cette approche, cela fonctionne même si beaucoup d'entrées de fichiers.

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>
Développer l'extrait

Илья Зеленько
la source
J'aime cette approche, mais pour moi, le texte du fichier sélectionné ne s'affiche pas, aucune idée du problème. Je suis Google Chrome
N Khan
1

Cela devrait fonctionner:

input.*className*::-webkit-file-upload-button {
  *style content..*
}
Andrius
la source
1

Voici comment c'est fait avec bootstrap, seul u devrait mettre l'entrée originale quelque part ... idk dans la tête et supprimer le <br> si vous l'avez, car il est seulement caché et prend de la place de toute façon :)

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 
 <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label>
    
 <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;">
 
 
 <footer>
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 </footer>
Développer l'extrait

Léon Tanko
la source
0

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

Voici à quoi cela ressemblait lorsque j'avais terminé (moins la capacité de glisser-déposer, il existe de nombreux tutoriels sur la façon de le faire).

Et puis j'ai en fait créé une série d'articles de blog qui concernent principalement les boutons de téléchargement de fichiers.

wp-overwatch.com
la source
0

Ok donc façon très simple et pure css de créer votre fichier d'entrée personnalisé.

Utilisez des étiquettes, mais comme vous le savez d'après les réponses précédentes, l'étiquette n'invoque pas la fonction onclick dans Firefox, peut être un bogue mais 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>

Ce que vous faites, c'est styliser l'étiquette pour qu'elle ressemble à ce que vous voulez

    .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, masquez simplement le bouton d'entrée réel, mais vous ne pouvez pas le définir sur visability: hidden

Alors rendez-vous invisible en définissant 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 mon champ de saisie, c'est parce que je veux que les deux aient le même style, donc partout où vous cliquez sur l'étiquette, vous cliquez en fait sur l'invisible champ de saisie.

Jadin Hornsby
la source
0

Ma solution ...

HTML:

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

Jquery:

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

C'est juste du mal: D

bagatov88
la source
0 

$(document).ready(function () {
	$('#choose-file').change(function () {
		var i = $(this).prev('label').clone();
		var file = $('#choose-file')[0].files[0].name;
		$(this).prev('label').text(file);
	}); 
 });
.custom-file-upload{
  background: #f7f7f7; 
  padding: 8px;
  border: 1px solid #e3e3e3; 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
can you try this

<label for="choose-file" class="custom-file-upload" id="choose-file-label">
   Upload Document
</label>
<input name="uploadDocument" type="file" id="choose-file" 
   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />
Développer l'extrait

Rokive
la source