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?


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



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 / solution plutôt qu’un Flash ou Solution.

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


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>


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>


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


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.


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>

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


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>

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/


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.


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.


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>


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..*
}

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/popper.js@1.16.0/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>


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.


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.


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


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;" />

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.