Modifier le texte par défaut dans le type d'entrée= "file"?
je veux changer le texte par défaut sur le bouton qui est " Choose File "quand nous utilisons input="file" .
Comment faire? Aussi comme vous pouvez voir dans le bouton image est sur le côté gauche du texte. Comment puis-je le mettre sur le côté droit du texte?
14 réponses
chaque navigateur a son propre rendu de la commande et en tant que tel, vous ne pouvez pas changer le texte ou l'orientation de la commande.
il y a une sorte de" hacks "que vous pouvez essayer 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, 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).
utiliser "for" attribut 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>cela pourrait aider quelqu'un dans le futur, vous pouvez styliser l'étiquette pour l'entrée comme vous le souhaitez et mettre tout ce que vous voulez à l'intérieur et cacher l'entrée avec display none.
il 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">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>ce n'est pas possible. Sinon, vous pourriez avoir besoin D'utiliser Silverlight ou Flash upload control.
ici 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>
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>
j'ai fait un script et l'ai publié à github: get selectFile.js Facile à utiliser, n'hésitez pas à 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émo
mise à jour 2017:
j'ai fait des recherches sur la façon d'y parvenir. 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 ne serait pas disponible. Vous devriez donc 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 style l'étiquette:
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}
alors 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 télécharger la démo, il est vraiment bon.
j'utiliserais un button pour 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.
Cela devrait fonctionner:
"151900920 d'entrée". className :: - webkit-file-upload-button { style de contenu.. }Permettez-moi d'ajouter un hack que j'ai utilisé. Je voulais avoir une section qui vous permet de glisser et déposer des fichiers, et je voulais que le glisser-déposer pour être cliquable avec l'original bouton de téléchargement.
Voici comment il ressemblait quand j'ai été fait (moins la capacité de glisser-déposer, Il ya beaucoup de tutoriels sur la façon de faire cela).
et puis j'ai réellement créé une série de billets de blog qui sont principalement sur les boutons de téléchargement de fichiers.
Ok donc très simple CSS façon pure de créer votre fichier d'entrée personnalisé.
utilisez des étiquettes, mais comme vous le savez des réponses précédentes, étiquette n'invoque pas onclick fonction dans firefox, peut-être un bug, mais n'a pas d'importance avec le suivant.
<label for="file" class="custom-file-input"><input type="file" name="file" class="custom-file-input"></input></label>
Ce que vous faites est le style de l'étiquette de regarder la façon dont vous le 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 actuel, mais vous ne pouvez pas le définir à visability: hidden
donc rendez invisible en paramétrant 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 avez peut-être remarqué que j'ai la même classe sur mon étiquette que je fais mon champ d'entrée, c'est 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 le champ d'entrée invisible.
vous pouvez utiliser cette approche, elle 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>