Input type="file" et label
Résolu
Bonjour à tous !
Savez vous svp comment afficher le texte d'un input type="file" dans un label ?
Si je prends un fichier depuis un input, je souhaiterais afficher le contenu de ce input dans un <label></label>
Merci pour votre aide !
Savez vous svp comment afficher le texte d'un input type="file" dans un label ?
Si je prends un fichier depuis un input, je souhaiterais afficher le contenu de ce input dans un <label></label>
Merci pour votre aide !
5 réponses
-
Bonjour,
Je n'ai pas tout comprit..Vous voulez que le nom du fichier sélectionné apparaisse directement dans un champ label ou c'est le contenu du fichier qui doit s'afficher dans le label? -
Le nom du fichier sélectionné.
J'utilise un style css pour rendre mon input en bouton sans zone de texte.
Voici le code :
css:.ChampFichier {position:relative; overflow:hidden; float:left; margin-right:4px;} .ChampFichier input {position:absolute; top:0; left:0; right:-82px; margin:0; border:solid transparent; border-width:0 0 10px 10px; opacity:0; filter:alpha(opacity=0); -moz-transform:translate(-300px, 0) scale(4); direction:ltr; cursor:pointer; height:18px;}
html :<span class="Btn ChampFichier"><span>Parcourir...</span><input type="file" id="files" name="files[]" multiple /></span>
-
Peut être que (pas très doué en JS)...
<script language="JavaScript" type="text/javascript"> function choix(fichier) { document.getElementById('voir').innerHTML = fichier; } </script>
<label id="voir"></label> <span class="Btn ChampFichier"><span>Parcourir...</span><input type="file" id="files" name="files[]" multiple onChange="choix(this.value);"/></span>
-
Super, ça marche, sauf qu'il me donne seulement un fichier, pas la liste complète des éléments sélectionnées...
-
ça devrait le faire :
<script language="JavaScript" type="text/javascript"> function choix() { var selection = ""; var files = $('input[type="file"]')[0].files; for (var i = 0; i < files.length; i++) { selection += (files[i].name)+ '<br/>'; } document.getElementById('voir').innerHTML = selection; } </script>
<label id="voir"></label> <span class="Btn ChampFichier"><span>Parcourir...</span><input type="file" id="files" name="files[]" multiple onChange="choix(this.value);"/></span>
