web-dev-qa-db-fra.com

Comment changer le texte du bouton de <input type = "file" />?

<input type="file" value="Browse" name="avatar" id="id_avatar" />

J'ai essayé de modifier la value, mais cela ne fonctionne pas. Comment personnaliser le texte du bouton?

htmlinput
227
user198729

Utilisez Bootstrap FileStyle , utilisé pour styliser les champs de fichier des formulaires. C'est un plugin pour une bibliothèque de composants basée sur jQuery appelée Twitter Bootstrap

Exemple d'utilisation:

Comprendre:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Via JavaScript:

$(":file").filestyle();

Via les attributs de données:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
152
Fernando Kosh

Vous pouvez mettre une image à la place et le faire comme ceci:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

MISE EN GARDE: Dans IE9 et IE10, si vous déclenchez onClick dans un fichier saisi via javascript, le formulaire est signalé comme "dangereux" et ne peut pas être soumis avec javascript, vous ne pouvez pas le soumettre. traditionnellement.

102
ParPar

Masquer l'entrée du fichier. Créez une nouvelle entrée pour capturer un événement de clic et transmettez-le à l'entrée masquée:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
81
MushyPeas

Le texte "upload file ..." est prédéfini par le navigateur et ne peut pas être modifié. La seule façon de contourner ce problème consiste à utiliser un composant de téléchargement basé sur Flash ou Java, tel que swfupload .

45
Pekka 웃

Fonctionne parfaitement sur tous les navigateurs J'espère que cela fonctionnera pour vous aussi.

HTML:
<input type="file" class="custom-file-input">

CSS:

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Changez content: 'Select some files'; avec le texte que vous voulez dans ''

Si vous ne travaillez pas avec firefox, utilisez ceci à la place de l'entrée:

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

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
22
Code Black
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

plus http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

9
websky

This est un plugin JQuery permettant de modifier le texte du bouton d'un élément de fichier d'entrée.

Exemple HTML:

<input type="file" id="choose-file" />

Exemple JS:

$('#choose-file').inputFileText({
    text: 'Select File'
});

Résultat:

plugin result

8
datchung

Je pense que c'est ce que tu veux:

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

Simplement

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[Modifier avec extrait]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>
3
Ken Karlo

Utilisez <label> pour la légende

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

Cela fonctionne sans javascript. Vous pouvez décorer l'étiquette à n'importe quel degré de complexité, pour le contenu de votre coeur. Lorsque vous cliquez sur l'étiquette, le clic est automatiquement redirigé vers l'entrée du fichier. L'entrée de fichier elle-même peut être rendue invisible par n'importe quelle méthode. Si vous souhaitez que l’étiquette apparaisse comme un bouton, il existe de nombreuses solutions, par exemple:

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}
3
MKaama

EDIT: Je vois maintenant par les commentaires que vous demandez le texte du bouton, et non le chemin du fichier. Ma faute. Je laisserai ma réponse originale ci-dessous au cas où quelqu'un qui trébuche sur cette question l'interprète comme je l'avais fait à l'origine.

2nd EDIT: J'avais effacé cette réponse car j'avais décidé de ne pas comprendre la question et ma réponse n'était pas pertinente. Cependant, dans une autre réponse, les commentaires indiquaient que les gens voulaient toujours voir cette réponse, alors je l’annule.

MA RÉPONSE ORIGINALE (Je pensais que le PO posait des questions sur le chemin, pas sur le texte du bouton):

Ce n'est pas une fonctionnalité supportée pour des raisons de sécurité . Le navigateur Web Opera supportait cela, mais il a été supprimé. Pensez à ce qui serait possible si cela était soutenu. Vous pouvez créer une page avec une entrée de téléchargement de fichier, la pré-renseigner avec un chemin d'accès à un fichier sensible, puis soumettre automatiquement le formulaire à l'aide de javascript, déclenché par l'événement onload. Cela arriverait trop vite pour que l'utilisateur puisse faire quelque chose à ce sujet.

3
Asaph

Seulement CSS & bootstrap class

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>
2
mahmood kabi

Vous pouvez simplement ajouter un truc CSS. vous pas besoin de javascript ou plusieurs fichiers d'entrée et je garde attribut de valeur existant. vous devez ajouter only css. vous pouvez essayer cette solution.

.btn-file-upload{
     width: 187px;
     position:relative;
 }

.btn-file-upload:after{
    content:  attr(value);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;    
    width: 48%;
    background: #795548;
    color: white;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
 }
<input type="file" class="btn-file-upload" value="Uploadfile" />
1
Udara Kasun
  1. Avant cela <input type="file">, ajoutez une image et <input style="position:absolute"> il occupera l’espace de <input type="file">

  2. Utilisez le CSS suivant pour l'élément file

    position:relative;  
opacity:0;  
z-index:99;
1
Bibaswann Bandyopadhyay

si vous utilisez Rails et que vous avez des problèmes pour l'appliquer, j'aimerais ajouter quelques conseils de la réponse originale publiée par @Fernando Kosh

  • Téléchargez le fichier Zip et copiez le fichier bootstrap-filestyle.min.js ke folder app/assets/javascripts /

  • ouvrez votre application.js et ajoutez cette ligne ci-dessous

    // = nécessite bootstrap-filestyle.min

  • ouvrez votre café et ajoutez cette ligne

    $ (": fichier"). filestyle ({buttonName: "btn-primary", buttonAvant: true, buttonText: "Votre texte ici", icône: false});

0
widjajayd

Voici un moyen de "changer" le texte d'une entrée avec un type de fichier, avec du HTML pur et du javascript:

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>
0
IntelarX

pour moi, le texte personnalisé ne fonctionne pas avec bootstrap-filestyle. Cela aide avec la décoration des boutons mais le texte est bizarre à changer, avant de me lancer dans la lutte avec les CSS, j'essaie ce qui suit:

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap-filestyle rend le composant en tant que span avec une classe nommée butonText. Ainsi, lors du chargement du document, changez simplement le texte. facile à droite et cela doit fonctionner sur tous les navigateurs.

à votre santé

0
Boris Ch.F