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
[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA par cyril
Le deuxième keynote du mix fut très riche en contenu. Internet Explorer 9 Juste un après le lancement de Internet Explorer 8, Microsoft a dévoilé les nouveautés de Internet Explorer 9. Désormais, IE supportera HTML5, SVG et CSS3. L'élément ...
Cliquez pour lire la suite de l'article par cyril CERTIFICATIONS BETA .NET 4CERTIFICATIONS BETA .NET 4 par KooKiz
Les inscriptions pour les certifications beta .NET 4 ont commencé. L'inscription est offerte pour les examens suivants : - 71-511, TS: Windows Applications Development with Microsoft .NET Framework 4 - 71-515, TS: Web Applications Development with...
Cliquez pour lire la suite de l'article par KooKiz [MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2[MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2 par redo
J'imagine que la plupart d'entre vous connaissent bien et utilisent le service de traduction de Google, mais connaissez-vous celui de Microsoft . Microsoft Translator ? Effectivement, Microsoft nous annoncé le lancement version 2 de la Technologie Preview...
Cliquez pour lire la suite de l'article par redo LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010!LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010! par MPOWARE
Toutes les vidéos de ce lancement sont en ligne!
Partie I - Intro
http://www.youtube.com/watch?v=LkQzTQ8T6CA
Partie II - Démo 1
http://www.youtube.com/watch?v=drAhYQ7lqvo
Partie III - Démo 2
http://www.youtube.com/watch?v=c8KM_1Gqybc...
Cliquez pour lire la suite de l'article par MPOWARE
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|