gérer input file avec fonction javascript

**frboyer** · 15/04/2009, 11h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**bigboomshakala** · 15/04/2009, 11h56

Salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

tonInput.click()

non ?

**frboyer** · 15/04/2009, 13h02

non ça ne fonctionne pas

**Bovino** · 15/04/2009, 13h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

mon_input.value = defaultValue;

**SpaceFrog** · 15/04/2009, 13h29

je ne pense pas Beef ...

**frboyer** · 15/04/2009, 14h39

non plus

**Matthieu2000** · 15/04/2009, 17h02

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

form.reset();

**SpaceFrog** · 15/04/2009, 17h13

le reset ne fera que vider le contenu du champs ...
pas de default pour un input file

**Matthieu2000** · 15/04/2009, 17h25

par default on ne peut pas mettre de valeur. vider le formulaire reviens à vider le champ

...

**frboyer** · 16/04/2009, 09h23

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

**k1rby** · 16/04/2009, 12h59

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 16/04/2009, 13h11

et le fichier passe coté serveur ?

**k1rby** · 16/04/2009, 15h50

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**frboyer** · 16/04/2009, 16h17

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

SpaceFrog :et le fichier passe coté serveur ?

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

gérer input file avec fonction javascript

JavaScript

Discussions similaires

Partager

Partager