Accueil > > > 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
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
Sources de la même categorie
Commentaires et avis
|
Derniers Blogs
UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|