gérer input file avec fonction javascript

Version imprimable

salut j'ai un champ input de type file, je voudrais, lorsque le fichier choisi n'as pas la bonne extension, effacer le contenu du champ mais apparemment ce n'est pas possible, donc je voudrais que ça rouvre la fenêtre de choix(qui s'affiche en clikan sur parcourir).
j'ai ma fonction javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script language="JavaScript"> function recuperer_extension(fichier) { if(fichier!="") { nom=fichier; length=nom.length; extension=nom.substring(length-4, length); return extension; } } function verif_extension(fichier) { extension=recuperer_extension(fichier); if(extension!=".pdf") { alert("le fichier doit comporter l'extension .pdf"); } else alert("bon fichier"); }
après le alert("le fichier doit comporter l'extension .pdf"); je voudrais rouvrir la fenêtre.
merci d'avance

15/04/2009, 11h56
bigboomshakala

Salut

Code:

tonInput.click()

non ?
15/04/2009, 13h02
frboyer

non ça ne fonctionne pas
15/04/2009, 13h08
Bovino

Tu ne peux pas faire cela sur un input file. Pour des raisons de sécurité, la majorité des propriétés des input file sont en readonly.
Il me semble que tu peux néanmoins affecter le defaultValue :

Code:

mon_input.value = defaultValue;
15/04/2009, 13h29
SpaceFrog

je ne pense pas Beef ...
15/04/2009, 14h39
frboyer

non plus
15/04/2009, 17h02
Matthieu2000

Code:

form.reset();
15/04/2009, 17h13
SpaceFrog

le reset ne fera que vider le contenu du champs ...
pas de default pour un input file
15/04/2009, 17h25
Matthieu2000

par default on ne peut pas mettre de valeur. vider le formulaire reviens à vider le champ:aie::aie:...
16/04/2009, 09h23
frboyer

non marche pas non plus je crois que je vais trouver une autre solution
merci quand meme

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript" language="javascript">
function verif(file) {
	var regex = new RegExp("\\w+\\.pdf$", "i");
	if (!regex.test(file)) {
		alert("Ce fichier n'est pas au format PDF");
                document.forms['formTest'].fichier.value=""; //pour firefox
		resetFileInput(); //pour les autres
	}
}
function resetFileInput()
{
	var parent = document.getElementById('formTest'),
	newFileInput = document.createElement('input');
 
	parent.removeChild(document.getElementById('fichier'));
 
	newFileInput.setAttribute('type', 'file');
	newFileInput.setAttribute('id', 'fichier');
 
	parent.appendChild(newFileInput);
}
</script>
<form id="formTest" name="formTest">
<input name="fichier" type="file" onchange="verif(this.value);">
<input type="text">
</form>
</body>
</html>

Ce code marche : il ne fait rien si c'est un fichier PDF, il lance un alert et remet le champs à 0 sinon. Problème, comme on contourne le fait de ne pouvoir changer la valeur d'un input file, on l'enlève pour en mettre un nouveau, l'input file se retrouvant alors à la fin du formulaire.

16/04/2009, 13h11
SpaceFrog

et le fichier passe coté serveur ?

Hop j'ai trouvé mieux que ma première solution :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript" language="javascript">
function verif(file) {
	var regex = new RegExp("\\w+\\.pdf$", "i");
	if (!regex.test(file)) {
		alert("Ce fichier n'est pas au format PDF");
		resetFileInput();
	}
}
function resetFileInput()
{
	var valeurs = new Array();
	var i;
	for (i=0;i<document.forms['formTest'].length;i++) {
		if (document.forms['formTest'].elements[i].getAttribute('type') != 'file')
			valeurs[i] = document.forms['formTest'].elements[i].value;
	}
	document.forms['formTest'].reset();
	for (i=0;i<valeurs.length;i++) {
		if (document.forms['formTest'].elements[i].getAttribute('type') != 'file')
			document.forms['formTest'].elements[i].value = valeurs[i];
	}
}
</script>
<form id="formTest" name="formTest">
<input type="text"><br>
<input name="fichier" type="file" onchange="verif(this.value);"><br>
<input type="submit" value="ok">
</form>
</body>
</html>

C'est compatible tout navigateur, on ne change pas la structure du document, bref, c'est mieux :D

16/04/2009, 16h17
frboyer

ok merci beaucoup je testerai ça sous peu.
Pour ton premier exemple par contre le

Code:

document.forms['formulaire_cv'].cv.value=""; //pour firefox

ne fonctionnait pas ça ne faisait rien.
j'essairai la 2ème solution.

Citation:

SpaceFrog :et le fichier passe coté serveur ?

je ne fais pas d'upload encore donc je ne sais pas