Un upload multi fichiers en php : Upload multifiles php Par JarodxXx
le jeudi 28 février 2008, 10:02
Voila un script qui va en ravir plus d'un !! Un système d'upload de plusieurs fichiers à la fois avec la possibilité de choisir le type de fichier, le nombre maximal lors de l'upload, la destination et tout ça avec un script très simple à mettre en place. Pour vous simplifier la vie, j'ai revu le script en le rendant simple d'appel et utilisation ...
Étape 1 : l'appel du CSS dans la balise <head>:
<style type="text/css">
/**
* You don't need this css part, scroll down
*/
.halfsize{ width:48%; margin-right:5px; float:left; }
.halfsize2{ width:38%; margin-right:5px; float:left; }
form fieldset{ border:none; border-top:1px solid #888; margin:1em 0.5em 1em 0; padding:1em 0;}
form legend{ font-weight:bold; font-size:1.2em; color:#888; margin:auto; margin-left:0; padding:0 .25em 0 0;}
label.error{color:#ff0000;}
label span{ display:block; color:#888; font-size:0.85em; margin-bottom:0.5em;}
form div.label,form div.note,form div.footer{ clear:both; margin:1em 0 0 0; padding:0.1em 0.3em;}
form div.note{ margin-left:.5em}
/**
* Thats the basic css needed for the upload bars
*/
.photoupload-queue{ list-style: none;}
.photoupload-queue li{ background: url(js/upload/photo_upload.png) no-repeat 0 5px; padding: 5px 0 5px 22px;}
.photoupload-queue .queue-file{ font-weight: bold;}
.photoupload-queue .queue-size{ color: #aaa; margin-left: 1em; font-size: 0.9em;}
.photoupload-queue .queue-loader{ position: relative; margin: 3px 15px; font-size: 0.9em; background-color: #ddd; color: #fff; border: 1px inset #ddd;}
.photoupload-queue .queue-subloader{ text-align: center; position: absolute; background-color: #81B466; height: 100%; width: 0%; left: 0; top: 0;}
.photoupload-queue .input-delete{ width: 16px; height: 16px; background: url(js/upload/delete.png) no-repeat 0 0; text-decoration: none; border: none; float: right;
</style>
Étape 2 :
Inclure tous les fichiers javascript nécessaires dans la balise <head>
<script type="text/javascript" src="js/upload/build.js"></script>
<script type="text/javascript" src="js/upload/Swiff.Base.js"></script>
<script type="text/javascript" src="js/upload/Swiff.Uploader.js"></script>
<script type="text/javascript" src="js/upload/FancyUpload.js"></script>
Étape 3 :
Initialiser le script selon vos critères toujours dans la balise <head>:
<script type="text/javascript" language="javascript">
//<![CDATA[
window.addEvent('load', function(){
var input = $('photoupload-filedata-1');
var uplooad = new FancyUpload(input, { swf: 'js/upload/Swiff.Uploader.swf',limitFiles:'6', queueList: 'photoupload-queue',container: $E('h1') });
$('photoupload-status').adopt(new Element('a', { href: 'javascript:void(null);', events: { click: uplooad.clearList.bind(uplooad, [false]) } }).setHTML('Effacer les fichiers terminés'));
});
//]]>
</script>
Notez que le limitFiles:'6' limite le nombre de fichiers à uploader et peut être tout simplement supprimé pour rendre l'upload illimité.
Et dernière étape, le code HTML du formulaire qui (cela va sans dire) se place dans le <body>
<form action="js/upload.php" method="post" id="photoupload" enctype="multipart/form-data">
<div class="halfsize"><fieldset>
<legend>Upload</legend>
<div class="label emph">
<label for="photoupload-filedata-1">Upload Photos:<span>Sélectionnez vos photos puis cliquez sur UPLOAD.</span></label>
<input type="file" name="Filedata" id="photoupload-filedata-1" />
</div>
</fieldset></div>
<div class="halfsize2">
<fieldset>
<legend>File d'attente</legend>
<div class="note" id="photoupload-status">Vérifiez vos photos ...<br /></div>
<ul class="photoupload-queue" id="photoupload-queue"><li style="display: none"> </li></ul>
</fieldset>
</div>
<div class="clear"></div>
<div class="footer"><input type="submit" class="submit" id="profile-submit" value="UPLOAD"/>
</div>
</form>
Pour les plus sceptiques ou les plus fainéants ...
Le .rar contenant tout le script
Pour ceux qui souhaitent suivre l'évolution du projet ça se passe chez l'auteur (en anglais)


















Ziki
Dailymotion
Flickr
Technorati
Twitter
1. Le jeudi 28 février 2008, 10:42 par fozzy
Pas mal du tout, j'aime beaucoup ce script et je pense qu'il va bien me servir.
Merci Jarod
2. Le jeudi 28 février 2008, 14:15 par zipolo
ça gère merci
3. Le vendredi 29 février 2008, 10:08 par IdleMan
Ha le fameux FancyUpload ,le script maudit
il fait baver tout le monde mais perssonne n'arrive a l'installer correctement :D je l'avais adapté a une epoque mais je ne pouvais pas uploader des fichier de plus de 200 kb , merci pour cette version .
4. Le samedi 1 mars 2008, 14:05 par godjojo
Salut Jarod, merci pour ta traduction du script...
ca faisait un moment que je cherchais un truc dans le genre, a plus...
5. Le lundi 3 mars 2008, 19:58 par xwihec
LE LIEN DU .rar NE MARCHE PAS!!!
6. Le vendredi 7 mars 2008, 14:17 par Nérisson
Il marche impecc chez moi , il y a juste un petit soucis : je ne retoruve pas les imagesque j'ai uploadées sur mon ftp , dans quel dossier sont elles sensées atterir ?
7. Le mardi 11 mars 2008, 14:28 par Mac
Effectivement c'est un très bon script que j'ai testé dernièrement
8. Le mardi 11 mars 2008, 19:03 par Matt
Bonsoir,
où définit-on le répertoire qui recevra les fichiers uploadés ?
Merci.
9. Le mercredi 12 mars 2008, 12:40 par Jojo
Hello,
Pour ma part j'utilise ce script avec succès, j'en suis très content sauf que...(et oui !) j'arrive à insérer les informations des fichiers dans ma base de données sauf que je n'arrive pas à récupérer ma variable POST de mon formulaire ! Quelqu'un à une idée ? Merci.
10. Le jeudi 13 mars 2008, 15:44 par viktor lebelge
Salut, j'ai bidouillé aussi ce script, voici le lien : http://www.charlier-huy.be/viktorle...
ma version permet de choisir le dossier de destination, créer des miniatures, écrire dans une base de données (le script de création des tables se trouve dans le fichier « aide.txt »), et enfin, visualiser automatiquement les images envoyées.
N'oubliez pas de consulter le fichier « aide.txt », vous verrez, ce n'est pas compliqué à mettre en place et ça fonctionne.
11. Le jeudi 20 mars 2008, 21:54 par alexandra
tout d 'abord je dois te dire que c' est super!!
félicitations
par contre je ne trouve pas l' endroit pour indiquer le répertoire de destination de mon serveur sur le script.
Si quelqu' un peut m' éclairer je lui ferais de gros bisous....
12. Le vendredi 21 mars 2008, 21:57 par XoraX
euh... tant qua faire un truc qui utilise flash, autant le faire full flash...
13. Le samedi 22 mars 2008, 00:48 par Pierre
Je prend note et je le garde dans un coin en cas de besoin.
Merci,
Pierre
14. Le vendredi 4 avril 2008, 17:35 par Peek
Hello Viktor,
Ton script fonctionne parfaitement.
De mon côté je cherche à faire l'inverse, c'est à dire : insérer un champ upload de photo (avec la barre de progress) parmi d'autres champs dans un formulaire.
Aurais-tu une petite idée sur le structure des scripts à mettre en place?
Merci d'avance
15. Le jeudi 10 avril 2008, 13:28 par Steve
Tout fonctionne parfaitement bien avec IE. Cependant, des problèmes ont-ils déjà été remontés par rapport à l'utilisation de l'outil avec firefox ou safari?
Pour ma part, en dehors de l'utilisation sous IE, après avoir sélectionné les fichiers que je désire uploader et cliqué sur le bouton d'envois, les barres de progression m'indique que les fichiers sont uploadés mais rien n'est présent sur le serveur.
le fichier de script PHP target n'est pas accédé.
Quelqu'un pourrait-il me mettre sur la voie?
Merci.
16. Le samedi 26 avril 2008, 15:52 par MK
Bonjour!
Encore un site plein de merveilles comme je les aime!
Je voudrais envoyer une valeur id (la même pour toutes les fichiers envoyés) en même temps que l'envoi des fichiers mais je ne parviens pas trouver la solution...
L'id est donné par du php, il est donc variable et ne peut être placé dans un fichier js (il doit donc être placé sur la page du formulaire).
Merci!
17. Le dimanche 27 avril 2008, 18:28 par MK
Ah c'est bon, j'ai utilisé la dernière version du projet. Une pure merveille!
18. Le lundi 5 mai 2008, 10:44 par polothentik
Salut!
Merci pour ce débroussaillage du script ! J'aurais tout de même 2 petites question :
1- Dans quel fichier (et à quelle ligne) spécifie t-on l'éxécution du fichier 'upload.php' ?
2- Je souhaite utilisé ce sript pour uploader des fichiers pdf de différent matériels vers leur répertoire propre tel que le chemin répertoire : type_matériel/constructeur_materiel/reference_materiel/'*.pdf'
Je souhaiterais donc passer les 3 données :
type_materiel
constructeur_materiel
reference_materiel
vers le fichier 'upload.php'. Comment ajouteriez vous l'envoi de ces 3 données supplémentaire récupérées avec $_POST sans doute !
Merci beaucoup
En tous cas... excellent travail !
19. Le lundi 5 mai 2008, 11:02 par jarodxxx
si mes souvenirs osnt bons , c'est du coté de l'action du form que tu passe tes parametres ...
20. Le lundi 5 mai 2008, 11:04 par polothentik
OK pour la 1ère question, j'étais aveugle ! Le fichier appelé est spécifié dans l'attribut action de la balise form dans le fichier multifile.php
21. Le lundi 5 mai 2008, 13:38 par polothentik
Réponse synchro appremment... héhé !
J'aurais souhaité savoir si le nom du fichier était bien contenu dans 'fileList[i].name' pour i->[0;n] car j'essaye de poster les fichiers avec de l'AJAX
Merci
22. Le lundi 5 mai 2008, 14:14 par jarodxxx
la reponse est dans la question ^^
23. Le lundi 5 mai 2008, 15:13 par polothentik
OK! Du coup, si je passe par un Ajax.Request (prototype.js) le nom des fichiers à uploader avec le code contenu dans le fichier 'upload.php', saurais-tu comment les fichiers vont être envoyés dans le répertoire temporaire ?
24. Le vendredi 23 mai 2008, 17:17 par ahcene
Bonjour !
ce script est pas mal mais je cherche en vain l'endroit ou indiquer le dossier de destination...qqun pourrait m'accorder 2m et me repondre svp, je vous en serai reconnaissant.
merci d'avance.
25. Le mercredi 28 mai 2008, 17:44 par pat
Bonjour a tous,
merci pour ce supperbe script, cependant aprés upload des fichiers, la barre de tékéchargement affiche erreur 404, Auriez-vous SVP une réponse au bug?...
Voila la page en attente de mise en ligne:
http://www.kallistea.com/carnets/re...
Merci pour aide.@ plus
26. Le dimanche 8 juin 2008, 18:29 par Mickio
sympa ce script, il marche trés bien.
Pour info, il y a la version 2 qui est sortie
27. Le lundi 30 juin 2008, 19:10 par joseph
Salut,
Pour moi,progress bar nemache pas.
quelqu'un peut-til m'aider?
Merci.
28. Le vendredi 18 juillet 2008, 15:48 par joepento
Super script !! merci beaucoup pour ce tte contribution.
Petite question, y a t il un moyen de récupérer le nombre de fichiers uploader?
Merci d'avance.
29. Le jeudi 24 juillet 2008, 21:03 par funkyus
Super ce ptit billet en français.
Pour debut voici un bout de php pour faire l'envoi du fichier dans un repertoire cible.
Attention à coder les verifications de securité.
// Chemin du dossier cible
$path = "dropbox/";
// upload de l'image
$source_file = $path.($_FILES["Filedata"]["name"]);
move_uploaded_file($_FILES["Filedata"]["tmp_name"], $source_file);
30. Le jeudi 24 juillet 2008, 21:06 par funkyus
Suite au billet precedent =>
le code se place dans le fichier upload.php a la fin apres le else
else
{
/**
* UPLOAD SUCCESSFULL AND VALID
*
* Use move_uploaded_file here to save the uploaded file in your directory
*/
// Chemin du dossier cible
$path = "dropbox/";
// upload de l'image
$source_file = $path.($_FILES["Filedata"]["name"]);
move_uploaded_file($_FILES["Filedata"]["tmp_name"], $source_file);
}
die('Envoi reussi du fichier : '.$_FILES["Filedata"]["name"]);
}
31. Le lundi 28 juillet 2008, 18:19 par karlito
Bonjour à tous,
J'ai hébergé mon script chez free.fr.
Il fonctionne bien sur Mosilla mais sur IE 7.
Avez vous une idée ?
merci,
Charles.
32. Le samedi 2 août 2008, 18:13 par Vianney
Ce script est plus simple à installer que l'original. Toutefois j'ai toujours un problème pour le faire fonctionner.
J'ai donc quelque question :
Dans quel dossier les images sont elles uploadé ? et ou peut on le modifier dans le code ?
Il semblerai que les image soit "uploadé" sous Firefox alors que j'ai des erreurs "upload failled 404" sur internet explorer.
Pouvez vous eclairer ma lanterne ?
33. Le jeudi 21 août 2008, 20:20 par oscim
Juste un petit comentaire pour ne pas generer d'erreur de notice ,
modifier la lg 33 du upload.php et remplacer
les 2 $_FILES[Filedata][name]
par
".$_FILES['Filedata']['name']."
34. Le mardi 2 septembre 2008, 21:58 par Kapik
Génial !
Merci beaucoup voilà deux jours que je navigue pour trouver LA solution à ce script!
Merci de joindre un fichier! L'auteur aurait du faire pareil !
pat merci à toi pour ce petit plus.
J'ai pas eu le temps de le décortiquer mais ca me parait pas mal !
35. Le mardi 2 septembre 2008, 22:06 par Kapik
PAR CONTRE
Petit soucis!
J'inclus ce script dans une petite box (div qui vient pas dessus tout le site avec arrière plan foncé): moodalbox
Et le script ne marche plus!
Le champs où on voit l'adresse du fichier est présent et l'upload ne fonctionne pas...
Une solution?
36. Le lundi 8 septembre 2008, 23:49 par sebie
Merci sa déchire, par contre j'ai rajouté des champs dans le formulaire et impossible de récup les valeurs par post pkoi?? Ya t'il une quelquechose a faire de special?
37. Le vendredi 12 septembre 2008, 17:46 par salttaste
Idem que toi sebie
HELP
38. Le mercredi 17 septembre 2008, 13:42 par rd_9
Bonjour,
J'ai un petit problème avec le "new FancyUpload" :
Je télécharge upload.rar et tout marche bien. dans "new FancyUpload(input, { swf: 'js/upload/Swiff.Uploader.swf',limitFiles:'6', queueList: 'photoupload-queue',container: $E('h1') });", je change 6 en 99 et là , bug total, FancyUpload est inconnu, erreurs de caratères,...
je remet 6, et c'est pareil
39. Le samedi 7 mars 2009, 13:58 par yaxine
il marche pas dans le local
40. Le vendredi 28 août 2009, 15:24 par boubeur
ca ne fonctionne pas, je charge le nom et apres ...... plus rien, ci je reviend sur ma page index j ai le nom du dossier , mais rien.
Ma bdd ce charge bien les info rentrent dedans, les dossiers ce crés au niveau de mon serveur, mais pour de ce qui envoi de l'image ....
41. Le lundi 14 décembre 2009, 13:49 par superrefman
Merci pour le script
42. Le dimanche 3 janvier 2010, 22:04 par superrefman
top, merci
43. Le lundi 1 février 2010, 21:35 par Amel
Bonjour,
Chez ça marche très bien sauf sous fireFox quelqun a une idée SVP?