L'upload reste toujours une opération délicate sur un site WEB. Pour ceux qui rencontrent encore des problèmes avec ces manipulations, voici quelques exemples de ce que vous pouvez proposer à vos visiteurs.
Nombreux sont les messages de demande d'aide concernant l'upload sur les forums. Je vous propose donc de passer en revue quelques méthodes, à travers des exemples concrets, afin de vous aider à bien comprendre leurs fonctionnement.
Nous verrons ensemble :
- l'envoi multiple : un petit script JavaScript pour se mettre en bouche en dynamisant vos formulaires - l'envoi standard par formulaire : nous réaliserons un mini album photo - l'envoi de fichier par ftp : nous réaliserons un mini client ftp
Dans un soucis de clarté, j'ai essayé de ne pas trop encombrer ces exemples avec du code superflux. Neanmoins, pour obtenir des résultats plus contrôlés et plus agréables à l'oeil, vous devrez les agrémenter d'un petit peu de code supplémentaire de votre facture. Pour celà, pensez à lire les petits encadrés de suggestions, où je vous rappelerez ce qui peut être utile de rajouter dans le cas où vous souhaiteriez utiliser ces exemples sur vos sites.
L'envoi multiple
Un peu de JavaScript pour votre formulaire
Avant de se jeter gaiment dans les joies du PHP, je vous propose un petit script JavaScript pour rendre votre formulaire d'envoi un peu moins terne.
Ce script permet de générer des champs automatiquement à chaque fois que le visiteur en a sélectionné un. Il pourra ainsi envoyer plusieurs fichiers à la fois.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Document sans titre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
var Nb=1; // Cette variable nous permettra de compter le nombre de champs affichés
function AjoutChamps(LeParam){
Nb++; // On incrémente notre variable de nombre de champs
// On crée une copie de notre champs de fichier à l'aide de la fonction ClondeNode et on la renomme LeFile=document.getElementById("Champ"+(Nb-1)).cloneNode(true); LeFile.name="Champ"+Nb; LeFile.id="Champ"+Nb;
// On ajoute notre nouveau champ à notre formulaire document.getElementById("LesChamps").appendChild(LeFile);
// On crée un élément <br> que l'on rajoute pour faire un retour chariot, c'est plus élégant LeRetourChariot=document.createElement("br"); document.getElementById("LesChamps").appendChild(LeRetourChariot);
// On supprime la méthode onChange du champs du notre avant dernier champs pour qu'il ne crée // pas de nouveaux champs lorsque on le modifie (ce n'est que le dernier champs qui doit en rajouter) document.getElementById("Champ"+(Nb-1)).onchange="";
if(Nb==10){ // Ici on considère que l'on veut que que le visiteur puisse avoir que 10 champs maxi // Donc, si notre variable est à 10, on supprime la méthode onChange pour ne plus pouvoir // créer de champs supplémentaires document.getElementById("Champ"+(Nb)).onchange=""; } }
</script> </head> <body>
<p align="center"> <strong>UPLOADS</strong> </p>
<form action="uploadsjava.php" enctype="multipart/form-data" method="post" name="LeForm" id="LeForm"> <div id="LesChamps" align="center"> <input NAME="Champ1" TYPE="file" id="Champ1" onChange="AjoutChamps(this.Nb);" size="60"><br> <!-- C'est ici que seront rajoutés les champs supplémentaires --> </div> </form>
</body> </html>
Cet exemple ne contient volontairement pas de bouton d'envoi, tout simplement parce-que le but de celui-ci est de vous expliquer comment fonctionne ce script.
Forum |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Annuaire
