Dans ce tuto HTML5 en vidéo, nous verrons comment réaliser un système d'upload d'images multiples avec Drag and Drop, c'est à dire un glisser-déposer.

Nous verrons donc comment faire en sorte que lorsque l'utilisateur dépose ses images dans une zone de chargement, les images soit chargées sur le serveur et récupérées dans notre dossier d'upload.

Nous utiliserons pour cela un plugin Jquery, ainsi que PHP pour le traitement côté serveur, et bien sur un peu d'HTML5 pour mettre en place cette petite application.

Bon tuto!

Jetez un oeil à ces autres tuto HTML 5

Débuter en HTML5 - CSS3 - Javascript - Tome 1Débuter en HTML5 - CSS3 -…
Cette formation fait partie d'une série sur la programmation…

Apprendre HTML5 et CSS3Apprendre HTML5 et CSS3
Voici une formation HTML5 et CSS3 de près de 9h et découpée…

Introduction à l'animation dans le canvasIntroduction à l'animation…
Dans ce tuto HTML5 gratuit, en vidéo, nous vous proposons une…

Introduction à la balise CanvasIntroduction à la balise…
Dans ce tuto HTML 5, en vidéo, nous vous proposons de découvrir…

Administration en AJAX et HTML5Administration en AJAX et…
Dans ce tuto AJAX en vidéo, nous verrons comment ajouter, supprimer…

Formation Html5 et CSS3Formation Html5 et CSS3
Voici une formation à la découverte de l'HTML5 et du CSS3.…

Videojs : Player vidéo HTML 5 compatible tout navigateurVideojs : Player vidéo HTML…
Dans ce tuto HTML 5 et Jquery en vidéo, nous découvrirons…

HTML5 : Doctype, balises nouvelles et obselètesHTML5 : Doctype, balises nouvelles…
Dans cette première partie de cette formation HTML5, nous verrons…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto HTML 5 de 35 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

simpledev , formateur certifié



En savoir plus sur simpledev


Témoignage des clients de simpledev

Très bon formateur et surtout une incroyable diversité de tuto dans le domaine du développement de site web. J'ai commencé par les tutos concernant le html 5 et CSS3. Ces derniers proposent des sujets très utiles pour dynamiser mon site

Excellents tutos, très bien expliqués. Les tutos de Simpledev sont très utiles. L'une des choses qui fait la richesses des tutos est le "mélange des langages de programmation". On peut ainsi réaliser des systèmes complexes, avec plusieurs langages !

Bref j'ai pas besoin de préciser très bon formateur :)

Excellent Formateur, 5/5 tout y-est: application, contenu, bon son, pédagogie, bonne image, j'ai beaucoup appris en 2 jours de tuto. Parmi les quelques tutoriels que j'ai vu c'est celui qui se démarque. Simpledev. Bravo à lui j'en redemande.

Quoi dire d'autre ? merci pour tout ;).

Lire les autres témoignages

 

D'autres tuto de simpledev

Géolocalisation HTML5 : longitude et latitudeGéolocalisation HTML5 : longitude et latitude
Dans ce tuto HTML5 en vidéo, nous verrons comment utiliser la géolocalisation HTML5…

Découverte de RefineryDécouverte de Refinery
Dans ce tuto nous allons voir comment installer le CMS Refinery, un CMS basé sur du…

Créer un bouton style Apple en CSS3Créer un bouton style Apple en CSS3
Dans ce tuto vidéo CSS3, nous verrons comment créer un bouton et lui donner le style…

Installer Rails 3 sous Windows avec RailsinstallerInstaller Rails 3 sous Windows avec Railsinstaller
Dans ce tuto Ruby on Rails en vidéo, vous apprendrez à installer Rails 3 sous Windows…

voir tous les tuto de simpledev

Notes attribuées par les utilisateurs (2 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (2)

par simpledev
(auteur de ce tuto - 28 septembre 2011)

" @tinouche
Bonjour, ce dit être la limite du php.ini qui pose problème. Si tu es en local tu peux le modifier et changer la valeur de "upload_max_filesize" qui est par défaut à 2M. Ensuite tu redémarres wamp ou mamp et ça devrait fonctionner.
A+ "

par tinoucheà voté :
(a acheté ce tuto - 28 septembre 2011)

" Bonjour,
Je viens de voir votre tuto, et j'essaye de modifier le code des fichiers sources pour permettre l'envoi de fichier JPG d'environ 20 Mo.

J'ai modifié les fichiers javascripts (maxfilesize: 20), j'ai aussi multiplié par 20 le nombre d'octet au niveau de la ligne 161 du fichier jquery.filedrop.js.

Lorsque j'upload mon image, tout se passe bien ( à premiere vu lol), la barre d'upload progresse et la miniature de l'image apparait bien. Par contre une fois la barre d'upload terminée, je n'ai aucun message et l'image n'est pas copier dans le dossier uploads.

Avez vous une idée ?
Merci d'avance "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto HTML 5 d’une durée de 35 minutes a été acheté 52 fois et a reçu une note moyenne de 3/5.

Ce tuto a été publié le 27 septembre 2011 par simpledev, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,4/5 pour l’ensemble de ses vidéos.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !