Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

MANIPULATION ET FONCTIONS POUR LES CHAMPS FICHIERS DES FORMULAIRES (TYPE=FILE)


Information sur la source

Catégorie :Tutoriaux Niveau : Expert Date de création : 22/10/2003 Vu : 11 006

Note :
6,33 / 10 - par 3 personnes
6,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note

Description

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

  • // 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;
  • }
// 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.
 

Commentaires et avis

signaler à un administrateur
Commentaire de iubito le 24/10/2003 13:49:14

je crois que ça va me servir :)
merci

signaler à un administrateur
Commentaire de Dragoum le 18/12/2003 12:42:44

Merci c'est super tu vas me faire gagner du temps
@+

signaler à un administrateur
Commentaire de fluminis le 07/07/2004 18:04:02

Hello,

je travail beaucoup sur IE et je ne regarde pas trop la compatibilité entre les navigateurs donc a vous de voir si vous voulez garder les fonctions de dreamweaver.

En tout cas pour la recherche de l'extensions il y a plus simple :

&lt;label id="LBLfichier"&gt;&lt;INPUT NAME="fichier" TYPE="file" onChange="verifExt();"&gt;&lt;/label&gt;

ça ça ne change pas (à part les noms que j'ai changé dsl)

et

&lt;script language="javascript"&gt;
// ----- Fonction permettant de remettre à 0 le contenu du FILE -----
function RAZ_File() {
var champ = document.getElementById("LBLfichier");
champ.innerHTML = '&lt;INPUT NAME="fichier" TYPE="file" onChange="verifExt();"&gt;';
}

// Fonction permettant de savoir si l'extension du fichier est correcte
function verifExt() {
  var format = '/(.jpeg|.gif|.jpg)$/';
  var file = document.fupload.fichier;
  
  if (file.value.search(format) == -1){
    alert("Le format de votre fichier n'est pas correct !\nLes formats acceptés sont : \n\nVeuillez selectionner un autre fichier.");
    RAZ_File();
  }
  return ok;
}
&lt;/script&gt;

l'utilisation des expressions régulieres simplifie le code.

bonne prog à tous

signaler à un administrateur
Commentaire de fluminis le 07/07/2004 18:16:31

Miles excuses j'ai voulu aller trop vite

function verifExt() {
  var file = document.fupload.fichier;
  
  if (file.value.search(/(.txt|.doc|.xls|.rar|.zip|.ace|.csv|.jpg|.jpeg|.gif|.png)$/) == -1){
    alert("Le format de votre fichier n'est pas correct !\nLes formats acceptés sont : \n\ntxt,doc,xls,rar,zip,ace,csv,jpg,jpeg,gif,png\n\nVeuillez selectionner un autre fichier.");
    RAZ_File();
  }
  return ok;
}

les expression regulieres en javascript ne peuvent pas etre des variables :-)
mais peut importe surtout comme dit Akenathon il genere ca en php...

signaler à un administrateur
Commentaire de kegi le 30/11/2004 00:41:04

comment faire pour demander un dossier ?

kevin (kegi@hotmail.com)

signaler à un administrateur
Commentaire de iubito le 30/11/2004 06:48:27

impossible directement.
- Soit tu veux avoir le nom d'un dossier et sur le onchange tu récupère dans un champ caché le nom du fichier auquel tu enlève la fin
- Soit tu veux tous les fichiers d'un dossier : impossible.

signaler à un administrateur
Commentaire de jeanpro46 le 02/05/2005 23:25:12

Salut, il est super ce code, mais il n'y a pas moyen que lorsque l'ont clique sur le bouton "Parcourir", ce soit seulement les fichiers du type que l'ont veux qui apparaissent. Par exemple que dans Type de fichier se soit écrit *.jpg, *.gif. Merçi d'avance pour la réponse.

signaler à un administrateur
Commentaire de Alore1207 le 16/08/2005 10:59:11

Hello,
excellent code, mais y a-t-il moyen de vérifier le poids du fichier ??

Merci d'avance

signaler à un administrateur
Commentaire de iubito le 16/08/2005 11:50:47

non, pas avant l'envoi

signaler à un administrateur
Commentaire de mortiis le 12/12/2005 03:14:51

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 à un administrateur
Commentaire de mehdi7604 le 25/11/2007 13:53:07

aligne tes cheuveux d'abord ,balai, vous allez arreter de décourager les gens ?!

signaler à un administrateur
Commentaire de aKheNathOn le 25/11/2007 16:15:10

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.

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,484 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.