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

Question

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

J'ai essayé de modifier le value mais ça ne marche pas. Comment personnaliser le texte du bouton ?

Answer 1

Utilisez Style de fichier Bootstrap 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 :

Inclure :

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

Answer 2

Vous pouvez mettre une image à la place, et 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 signalé comme 'dangereux' et ne pourra pas être soumis avec javascript, pas sûr qu'il puisse être soumis traditionnellement.

Answer 3

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, tel que swfupload .

Answer 4

EDIT : Je vois maintenant par les commentaires que vous demandez le texte du bouton, et non le chemin du fichier. C'est ma faute. Je vais laisser ma réponse originale ci-dessous au cas où quelqu'un d'autre qui tomberait sur cette question l'interpréterait de la même façon que moi.

2e EDIT : J'avais supprimé cette réponse car j'ai décidé que j'avais mal compris la question et que 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, alors je la supprime.

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

Cette fonction n'est pas prise en charge pour des raisons de sécurité . Le navigateur Opera prenait en charge cette fonctionnalité, mais elle a été supprimée. Pensez à ce qui serait possible si cette fonction était prise en charge ; vous pourriez 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 le javascript déclenché par la balise onload événement. Cela se produirait trop rapidement pour que l'utilisateur puisse faire quoi que ce soit.

Answer 5

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

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

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