Input type="file" et label

Résolu/Fermé
Sinistrus Messages postés 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 - 11 juin 2012 à 10:21
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 - 11 juin 2012 à 13:43
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 !

A voir également:

5 réponses

tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
11 juin 2012 à 11:18
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?
0
Sinistrus Messages postés 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 17
11 juin 2012 à 11:22
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>
0
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
11 juin 2012 à 11:34
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>
0
Sinistrus Messages postés 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 17
11 juin 2012 à 11:43
Super, ça marche, sauf qu'il me donne seulement un fichier, pas la liste complète des éléments sélectionnées...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
11 juin 2012 à 13:43
ç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>
0