Le système d'upload
Par le biais d'un formulaire et d'une iframe, créer un système d'upload n'est absolument pas compliqué. C'est même relativement simple ! Les éléments <form> possèdent un attribut enctype qui doit absolument contenir la valeur multipart/form-data. Pour faire simple, cette valeur indique que le formulaire est prévu pour envoyer de grandes quantités de données (les fichiers sont des données volumineuses).
Notre formulaire d'upload peut donc être écrit comme ceci :
<form id="uploadForm" enctype="multipart/form-data" action="upload.php" target="uploadFrame" method="post"> <label for="uploadFile">Image :</label> <input id="uploadFile" name="uploadFile" type="file" /> <br /><br /> <input id="uploadSubmit" type="submit" value="Upload !" /> </form> |
Ensuite, on place l'iframe, ainsi qu'un autre petit <div> que nous utiliserons pour afficher le résultat de l'upload :
<div id="uploadInfos"> <div id="uploadStatus">Aucun upload en cours</div> <iframe id="uploadFrame" name="uploadFrame"></iframe> </div> |
Et pour finir, une dose de Javascript :
function uploadEnd(error, path) { if (error === 'OK') { document.getElementById('uploadStatus').innerHTML = '<a href="' + path + '">Upload done !</a><br /><br /><a href="' + path + '"><img src="' + path + '" /></a>'; } else { document.getElementById('uploadStatus').innerHTML = error; } }
document.getElementById('uploadForm').addEventListener('submit', function() { document.getElementById('uploadStatus').innerHTML = 'Loading...'; }, true); |
Quelques explications s'imposent. Dès que le formulaire est envoyé, la fonction anonyme de l'événement submit est exécutée. Celle-ci va remplacer le texte du <div>#uploadStatus pour indiquer que le chargement est en cours. Car, en fonction de la taille du fichier à envoyer, l'attente peut être longue. L'argument error contiendra soit « OK », soit une explication sur une erreur éventuelle. L'argument pathcontiendra l'URL du fichier venant d'être uploadé. L'appel vers la fonction uploadEnd() sera fait via l'iframe, comme nous le verrons plus loin.
Le Javascript étant mis en place, il ne reste plus qu'à nous occuper de la page upload.php qui va réceptionner le fichier uploadé. Il s'agit d'un simple script d'upload :
<?php
$error = NULL; $filename = NULL;
if (isset($_FILES['uploadFile']) && $_FILES['uploadFile']['error'] === 0) {
$filename = $_FILES['uploadFile']['name']; $targetpath = getcwd() . '/' . $filename; // On stocke le chemin où enregistrer le fichier
// On déplace le fichier depuis le répertoire temporaire vers $targetpath if (@move_uploaded_file($_FILES['uploadFile']['tmp_name'], $targetpath)) { // Si ça fonctionne $error = 'OK'; } else { // Si ça ne fonctionne pas $error = "Échec de l'enregistrement !"; } } else { $error = 'Aucun fichier réceptionné !'; }
// Et pour finir, on écrit l'appel vers la fonction uploadEnd : ?>
<script> window.top.window.uploadEnd("<?php echo $error; ?>", "<?php echo $filename; ?>"); </script> |
Avec ce code, le fichier uploadé est analysé puis enregistré sur le serveur. Si vous souhaitez obtenir plus d'informations sur le fonctionnement de ce code PHP, n'hésitez pas à vous reporter au tutoriel « Upload de fichiers par formulaire » écrit par DHKold sur le Site du Zéro.
Avec ce script tout simple, il est donc possible de mettre en place un upload de fichiers sans « rechargement ». Il ne reste plus qu'à améliorer le système, notamment en sécurisant le script PHP (détecter le type MIME du fichier, pour n'autoriser que les images par exemple), ou en arrangeant le code Javascript pour afficher à la suite les fichiers uploadés s'il y en a plusieurs…
Si vous souhaitez essayer ce script en ligne, sachez que nous avons mis une version en ligne, mais que celle-ci n'enregistre pas les fichiers sur le serveur et que cela implique donc que l'affichage de l'image n'est pas effectué. Vous êtes en revanche prévenus lorsqu'un fichier a fini d'être uploadé, ce qui est, somme toute, le but principal de notre script.
Créé avec HelpNDoc Personal Edition: Écrire des livres électronique Kindle