Tutoriel Vidéo jQuery : Plupload

Dans ce tutoriel vidéo vous découvrirez comment utiliser le plugin Plupload. Ce plugin permet de réaliser un système d'upload multiple de fichiers simple et supporté par tous les navigateurs.

Pour assurer ce support le plugin est capable de choisir la méthode d'upload adaptée aux capacités du navigateurs (HTML5, Flash, Gears...). En plus l'API vous permettra de personnaliser le fonctionnement pour le faire convenir à vos besoins, c'est d'ailleurs cette API que je vous propose de découvrir à travers la réalisation d'un gestionnaire d'image simplifié.


Télécharger la vidéo
(Réservé aux premiums)

Télécharger les sources
(Réservé aux premiums)


Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi

localStorage

localStorage
14m

Le localStorage vous permet de sauvegarder des informations directement...

jQuery UI Datepicker

jQuery UI Datepicker
28m

Dans ce tutoriel vidéo vous découvrirez comment utiliser le widget...

44 commentaires
Ajouter un commentaire

Alpha13 Il y a 1 mois Répondre

Il faut faire attention à la sécurité on peut meme faire page.php%00.jpg, le serveur croit que c'est un .jpg alors qu'il n'execute pas apres le %00

Anonbibi Il y a 2 mois Répondre

Pour la verif de l'extension en php j'ai fais un truc comme cela vous en pensez quoi




$type_file = $_FILES['file']['type'];

if( !strstr($type_file, 'jpg') && !strstr($type_file, 'jpeg') &&
!strstr($type_file, 'png') && !strstr($type_file, 'gif') )
{
/**
* Si extension non accepter
**/
die('{"error":true, "message": "Image trop grande"}');
}

Zpyke Il y a 3 mois Répondre

Salut j'aimerai savoir quel programme tu utilise pour coder... il me semble bien complet et l'auto completion est super dessus :D

Au passage super ce tuto

Qstakashi Il y a 3 mois - Répondre

Il utilise Sublime Text 2. (Regarde en haut à gauche ^^)

adsarts Il y a 3 mois Répondre

super tuto,une question est-il possible de créer un bouton de "download" comme celui de "supprimer", afin de permettre de récupérer les fichier uploader n'importe ou sans pour autant avoir son ordinateur avec soit.

jerem44 Il y a 3 mois Répondre

Excellent tuto mais il faut vraiment faire un tuto pour cakePhp! ca serait une tuerie!

Anonbibi Il y a 1 mois - Répondre

Pour Adapter Plupload a Cake


https://github.com/Grafikart/CakePHP-Media

On dit Merci Grafikart

TwiSka Il y a 3 mois Répondre

Salut,

Super tutoriel !
En attente du tutoriel sur les bandeaux d'erreur.

Encore merci Tigeek

pierrot Il y a 3 mois Répondre

Merci pour ce tuto!

zenkiai Il y a 4 mois Répondre

Merci pour ce tuto

moket Il y a 4 mois Répondre

super ce plugin et très bon tuto.
serait-il possible que tu en fasse un pour cakephp ?

gugul Il y a 4 mois Répondre

super sympa ce plugin !

alexyeah Il y a 4 mois Répondre

Salut à tous,

Ce tuto est au poil, d'autant que je réalise pour ma part un système de partage de photos privé. Aussi, grand merci.

Toutefois, j'ai été confronté à une difficulté : les conditions d'envoi des fichiers.
En effet, nous voyons dans la vidéo les vérifs client et server side...

Et une persiste dans la configuration de PHP : par défaut, le php.ini de wamp limite les fichiers à 2m.

En espérant avoir apporté mon cailloux à l'édifice...

Cdlt,
alex-

Eddyalmeida Il y a 4 mois Répondre

Très très bon tuto!

mzied Il y a 4 mois Répondre

merci pour ce tuto

drazik Il y a 4 mois Répondre

Est-ce que quelqu'un sait comment utiliser ce plugin conjointement avec Symfony? J'aimerais qu'à la place d'un fichier upload.php, ce soit une méthode d'un controleur qui s'occupe de bouger le fichier.
De plus, mon upload de fichier se fait au milieu d'un formulaire. Je voudrais d'abord que mon article soit bien créé dans ma base de données, pour ensuite terminer l'upload de mes fichiers, et les ajouter à leur tour dans la base.

Mon cas d'utilisation n'a pas vraiment l'air prévu par ce plugin, ou alors j'ai raté quelque chose.

En tous cas super boulot, comme d'habitude le tuto est rondement mené du début à la fin !

Bref si quelqu'un a une piste pour mes soucis, ça serait cool de m'en faire part. Merci d'avance!

zkiller Il y a 4 mois Répondre

Sympa mise à part quelques incompatibilités mais bon en "bidouillant" ont peu les fixé.

Guest 9804 Il y a 4 mois Répondre

Juste pour savoir, qu'arrive-t-il au gens qui ne paie pas leur licence?

Guicara Il y a 4 mois Répondre

Ayant testé Plupload pour une mise en production, je ne le trouve pas si bien que ça. Si vous cherchez une alternative à Plupload, regardez du côté de son concurrent : file-uploader de Valums.

Berlingot Il y a 4 mois Répondre

Bonjour, merci pour ce tuto, qui comme tjrs est concis et très bien expliqué.

J'ai constater un "bug" avec le système, en effet lorsque l'on fait un drag and drop d'un JPG et d'un .docx (par exemple) il upload les deux, ou sinon un des deux restes bloqué. N'y aurait t'il pas un moyen de rectifier cela ??

encore merci pour ce tuto

Franck55 Il y a 4 mois - Répondre

Salut,

Normalement ce code devrait faire l'affaire mais ce n'est pas le cas:

uploader.bind('Error',function(up, err){
alert(err.message);
$('#droparea').removeClass('hover');
$("#"+err.file.id).remove();
uploader.refresh();
});

comme si le code était exécuté avant d'avoir l'id correspondant; le uploader.refresh(); aussi devrait rafraîchir l'ensemble et supprimer l'affichage mais c'est pas pris en compte, si quelqu'un a mieux comme réponse je suis preneur.

ik Il y a 4 mois Répondre

Très bon tuto

deltackro Il y a 4 mois Répondre

Ceux qui sont sur IE ne meritent pas un truc joli x)
Je suis totalement d'accord

mzied Il y a 4 mois Répondre

bonjour c possible d'avoir la mémé chose pour cakephp
merci

Bs Il y a 4 mois Répondre

Mercii :D
j'attend toujours un tuto du meme systeme sur cakephp puisque Grafikart et notre reference pour cakephp

merci encore une fois

omar berrayti Il y a 4 mois Répondre

Merci bcp pour le tuto

DevAddict Il y a 4 mois Répondre

Tu l'appel comme si tu l'appelé par l'url :

url :'action',

ou

url : 'controller/action',

jponline Il y a 4 mois Répondre

lorsqu'on ulitise ce plugins sous cakephp dans la config de plupload var uploader = new plupload.Uploader({
url :'upload.php',
});
sous cakephp url si on veut appeler une fonction on l'appelle comment !

abdelakbirG Il y a 4 mois Répondre

merci pour ce super tuto !
j'aime votre template admin :d

jponline Il y a 4 mois Répondre

Merci pour ce génial tutoriel , une version en MVC est prévue ??

keskispas Il y a 4 mois Répondre

Terrible !
Vu le potentiel de l'API, pas étonnant que ce soit payant (la licence site unique reste abordable).

Thanks !

extrarox Il y a 4 mois Répondre

Merci pour ce tutoriel fort intéressant.

tontonrimka Il y a 4 mois Répondre

1h05 d'une pure tuerie

hellsingblack Il y a 4 mois Répondre

dommage j'aurais aimé qu'on ne passe pas par un plugin, car on ne maîtrise pas ses comportements.

Hirod Il y a 4 mois - Répondre

Il est parfaitement controlable et même très personalisbable :p

Hirod Il y a 4 mois Répondre

Merci, excellent script et très utile.

Divin Il y a 4 mois Répondre

Très beau tuto, merci
Moi j'utilise Uploadify, il n'a pas le drag en drop mais il est aussi vraiment simple à implanter

ladislas14 Il y a 4 mois Répondre

Merci pour ce super tuto !! Bonne continuation

avatarvb Il y a 4 mois Répondre

:) merci Grafikart

pierrot Il y a 4 mois Répondre

Vraiment sympa comme plugin. Merci pour le tuto

ipodtouchpro44 Il y a 4 mois Répondre

"Ceux qui utilisent IE 8 ne mérite pas d'avoir de belle chose", c'est juste tellement vrai ^^'

snap Il y a 4 mois Répondre

Pour une fois c'est un truc que j'avais déjà utilisé, je vais quand même regarder avec attention car je suis sûr d'apprendre plein de truc!!

romain25 Il y a 4 mois Répondre

Très bon système d'upload

abiamber Il y a 4 mois Répondre

exactement ce qu'il me fallait au bon moment !! merci !!

bahamut Il y a 4 mois Répondre

Très pratique oui dommage que la licence soit payante ...

galyb Il y a 4 mois Répondre

Faut que je me penche dessus, il y a pas mal de chose qui peuvent servir.

mikachu Il y a 4 mois Répondre

Non non, je suis entrain de regarder depuis 20min. Ca a l'air très pratique.

lepetitnico Il y a 4 mois Répondre

Je suis le premier sur le tutoriel on dirait.

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.