Manipulation et fonctions pour les champs fichiers des formulaires (type=file)

Commenter

Contenu du snippet

Ce tutoriel vous explique comment manipuler les champs fichiers des formulaires html, en sachant que ceux-ci sont par raison de sécurité bloqués, il est difficile de les réinitilaiser par exemple.

Voilà quelques astuces pour eviter les saisies érronées dans ces champs, et guider au plus l'utilisateur.

Dans tous mes exemples de fonctions je considére que vous avez fait dans la page un formulaire contenant un champ file de nom et identifiant file, entre des balises label d'identifiant InputFile (le label est important !)

Exemple de code html :

<form>
<label id="InputFile">
<input type="file" name="file" id="file" onChange="CheckFormat();">
</label>
<form>

Source / Exemple : 


// Tout d'abord insérer le code de dreamweaver dans la page, car j'utilise ses fonctions

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
</script>

// ----- Fonction permettant de remettre à 0 le contenu du FILE -----
function RAZ_File() {
	var champ = MM_findObj("InputFile");
	champ.innerHTML = '<input type="file" name="file" id="file" onChange="CheckFormat();">';
}

// ---- Fonction permettant de retrouver le nom du fichier ------
function GetFileName() {
	var file = MM_findObj("file");
    var str = new String(file.value);
    var ar = str.split("\\");
    return ar[ar.length - 1];
}

// Fonction permettant de savoir si l'extension du fichier est correcte
function CheckFormat() {
	var format = '.jpeg|.gif|.jpg';
	var file = MM_findObj("file");
	var args = format.split("|");
	var ok = false;
	var arg_list = new String;
	for (i = 0; i < args.length; i++) {
		var valeur = args[i];
		var nom_fic = file.value.substr(file.value.length - valeur.length, valeur.length).toLowerCase();
		arg_list += "*"+valeur+"  ";
		if (valeur == nom_fic) {
			ok = true;
			return ok;
		} 
	}
	if (!ok) {
		alert("Le format de votre fichier n'est pas correct !\nLes formats acceptés sont : \n"+arg_list+"\n\nVeuillez selectionner un autre fichier.");
		RAZ_File();
	}
	return ok;
}

Conclusion :


J'ai pas fait de tableaux dans les entrées de mes scripts tout simplement car pour le gérer en php c'est plus simple de gérer une chaine à splitter.

Désolé si je n'explique pas plus mes fonctions mais le code est assez simple à comprendre.

Bonne prog à tous et j'éspére que ça aidera.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (akhenathon)