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 le value, mais cela ne fonctionne pas. Comment personnaliser le texte du bouton?

Utilisez Bootstrap FileStyle , qui est utilisé pour styliser les champs de fichier des formulaires. Il s'agit d'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.">

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');
});

CAVEAT : Dans IE9 et IE10 si vous déclenchez le onClick dans une entrée de fichier via javascript, le formulaire sera marqué comme «dangereux» et ne pourra pas être envoyé avec javascript, vous ne savez pas s'il peut être soumis de manière traditionnelle.

Masquez l'entrée du fichier. Créez une nouvelle entrée pour capturer un événement de clic et transférez-le à l'entrée cachée:

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

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 est d'utiliser un composant de téléchargement basé sur Flash ou Java comme swfupload .

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

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 à l'intérieur''

SI NE FONCTIONNE PAS AVEC firefox, utilisez ceci au lieu de saisir:

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

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">

Il s'agit d'un plugin JQuery pour 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:

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

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 l'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>

Je pense que c'est ce que vous voulez:

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

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

2ème EDIT : J'avais supprimé cette réponse car j'ai décidé que j'avais mal compris la question et ma réponse n'était pas pertinente. Cependant, les commentaires dans une autre réponse ont indiqué que les gens voulaient toujours voir cette réponse, donc je la supprime.

MA RÉPONSE ORIGINALE (je pensais que l'OP demandait le chemin, pas le texte du bouton):

Ce n'est pas une fonctionnalité prise en charge pour des raisons de sécurité . Le navigateur Web Opera le supportait mais il a été supprimé. Réfléchissez à 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é-remplir avec un chemin d'accès à un fichier sensible, puis soumettre automatiquement le formulaire en utilisant javascript déclenché par l' onloadévénement. Cela se produirait trop rapidement pour que l'utilisateur puisse faire quoi que ce soit à ce sujet.

Utiliser <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é, à votre guise. 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;
}

Seule classe CSS et bootstrap

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

1. Avant cela <input type="file">, ajoutez une image et <input style="position:absolute">elle occupera l'espace de<input type="file">

2. Utilisez le CSS suivant pour l'élément de fichier

   position:relative;  
   opacity:0;  
   z-index:99;

si vous utilisez des rails et que vous rencontrez des problèmes pour l'appliquer, je voudrais 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 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

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

Vous pouvez simplement ajouter une astuce css. vous n'avez pas besoin de javascript ou de plusieurs fichiers d'entrée et je conserve l' attribut de valeur existant . vous devez ajouter uniquement 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" />

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>

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

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

bootstrap-filestyle rend le composant comme span avec une classe nommée butonText, donc lorsque le document se charge, changez simplement le texte. facile à droite et il doit fonctionner sur tous les navigateurs.

à votre santé

Je l'ai fait comme ça pour mon projet:

.btn-outlined.btn-primary {
  color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  color:#000;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">

Il s'agit d'une solution alternative qui peut vous être utile. Cela masque le texte qui apparaît hors du bouton, le mélangeant avec la couleur d'arrière-plan du div. Ensuite, vous pouvez donner au div un titre que vous aimez.

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>