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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 710 fois - Téléchargée 28 fois

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

Ajouter un commentaire

Commentaires

Signaler
cs_belone
Messages postés
4
Date d'inscription
mercredi 6 novembre 2002
Statut
Membre
Dernière intervention
1 avril 2009
 -
function checkExtension(fieldvalue, t_ext) {
var thisext = fieldvalue.substr(fieldvalue.lastIndexOf('.'));
for(var i = 0; i < t_ext.length; i++){
if(thisext.toUpperCase() == t_ext[i].toUpperCase()){
return true;
}
}
return false;
}

appel
if(!checkExtension(document.forms[0].image.value, ['jpg','jpeg','gif','png'])) {
alert("Ce n'est pas une image");
}
Signaler
aKheNathOn
Messages postés
276
Date d'inscription
dimanche 22 juillet 2001
Statut
Modérateur
Dernière intervention
5 décembre 2013
 -
Je suis vraiment mort de rire... si si, mdr ! Mortis, tu devrais faire le commentaire sur le site de macromedia, moi j'y suis pour rien. Tu dois vraiment être un newbie dans le dév web ou tu n'utilise pas adobe, car toutes les fonctions MM_* c'est du macromedia - et pk c'est moche, car c'est condensé et ça passe plus vite sur le réseau.
Signaler
mehdi7604
Messages postés
120
Date d'inscription
jeudi 11 mai 2006
Statut
Membre
Dernière intervention
6 mars 2015
 -
aligne tes cheuveux d'abord ,balai, vous allez arreter de décourager les gens ?!
Signaler
mortiis
Messages postés
120
Date d'inscription
mardi 11 février 2003
Statut
Membre
Dernière intervention
9 mars 2008
 -
P-e que ce code fonctionne, mais je ne prend même pas la peine de le lire, car il est dégeulasse...

Aucun alignement, commentaires inexistant... on n'a qu'a regarder cette fonction pour s'appercevoir que ce code est dégeu...

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;
}


Désolé, mais du code qui fonctionne n'est pas nécessairement du bon code... faut penser à la lisibilitée du code aussi, sinon il devient impossible à réutiliser...
Signaler
cs_iubito
Messages postés
629
Date d'inscription
mercredi 3 juillet 2002
Statut
Membre
Dernière intervention
9 octobre 2006
 -
non, pas avant l'envoi
Afficher les 13 commentaires
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)