begin process at 2010 03 19 07:11:44
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Tutoriaux

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

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


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Tutoriaux Niveau :Expert Date de création :22/10/2003 Vu :12 633

Auteur : aKheNathOn

Ecrire un message privé
Site perso
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.


 Sources du même auteur

Source avec Zip SYSTÉME DE ZOOM SUR DES IMAGES
DYNAMISER LES PAGE HTML SANS EN RECHARGER LE CONTENU
Source avec Zip Source avec une capture PALETTE DE COULEURS RGB COMME CELLE DE WINDOWS

 Sources de la même categorie

Source avec Zip FAIRE UN CV EN HTML VIA XML ET DU XSL par antour
CONVERTISSEUR FRANC EURO TEMPS RÉEL SANS CLIC °CELSIUS °FAHR... par harlock59
Source avec Zip Source avec une capture DIFFÉRENCES EN JAVASCRIPT [DJ] par bultez
Source avec Zip Source avec une capture TRAITEMENT IMMÉDIAT DU CSS [TIC] par bultez
DESORGANISÉ UN TABLEAU : LA MÉTHODE SORT par jesusonline

Commentaires et avis

Commentaire de iubito le 24/10/2003 13:49:14

je crois que ça va me servir :)
merci

Commentaire de Dragoum le 18/12/2003 12:42:44

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

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

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...

Commentaire de kegi le 30/11/2004 00:41:04

comment faire pour demander un dossier ?

kevin (kegi@hotmail.com)

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.

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.

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

Commentaire de iubito le 16/08/2005 11:50:47

non, pas avant l'envoi

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...    

Commentaire de mehdi7604 le 25/11/2007 13:53:07

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

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...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,515 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales