Dans ce tutoriel de 40 minutes nous allons apprendre à envoyer un fichier via Ajax (à l'uploader). Mais ce n'est pas tout, puisque nous allons ajouter à notre système une barre de progression qui nous indique l'avancement de l'envoi du fichier SANS FLASH ! Et oui vous avez bien lu, il est possible grâce à l'API File du HTML5 d'envoyer des fichiers et d'avoir un suivi de l'avancement de l'envoi.

La liste des navigateurs supportés par le script que nous allons utiliser (ajax upload de Valums) :

Pour résumer, après ce tutoriel vous serrez capable:

  • D'utiliser une librairie d'envoi de fichier via Ajax sans utiliser Flash.
  • De traiter la réception du fichier sur le serveur.
  • D'informer l'utilisateur sur l'avancement de l'envoie du fichier via des évènements.

Je suis à votre disposition si vous avez des questions, je tâcherai d'y répondre le plus vite possible. Bon tuto ! =)<:p>

Jetez un oeil à ces autres tuto Ajax, HTML 5

Notification instantanée Notification instantanée
Dans ce tuto AJAX en vidéo, nous verrons comment réaliser…

Formulaire de contact ajaxFormulaire de contact ajax
Dans ce tuto AJAX en vidéo, vous réaliserez un formulaire…

Message à la Twitter en AJAXMessage à la Twitter en AJAX…
Dans ce tuto Ajax en vidéo, vous apprendrez à réaliser un…

Détecter les requêtes AJAX en PHPDétecter les requêtes AJAX…
Dans ce tuto Ajax en vidéo, vous apprendrez à détecter en…

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

Formulaire de contact AJAX avec PHP et JqueryFormulaire de contact AJAX…
Dans ce tuto AJAX en vidéo, nous réaliserons un formulaire…

Espace membre en AJAXEspace membre en AJAX
Dans ce tuto Ajax en vidéo, nous verrons comment réaliser…

Notification instantanée Notification instantanée
Dans ce tuto AJAX en vidéo, nous verrons comment réaliser…

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

Partagez cet extrait

Lien vers cet extrait : Embed code :

dodo021 , Formateur

J'ai commencé ma formation d'informaticien il y a maintenant 3 ans. Passionner par le graphisme et le Web, je donne mes quelques connaissances et mes conseilles au travers de mes tutos. J'ai depuis toujours appris de moi même étant quelqu'un de très autodidacte. Je maitrise le PHP, xHTML/CSS, JavaScript avec jQuery. Je compte plus tard faire de ma passion pour le Web mon travail à plein temps. Bon tuto ! =)

En savoir plus sur dodo021


Témoignage des clients de dodo021

Son tuto Boujou est l'un des seuls et il est très instructif, il explique bien.

 

D'autres tuto de dodo021

Thrausi et Mograph pour une Transition destruction 3DThrausi et Mograph pour une Transition destruction 3D
Dans ce tuto Cinema4D nous allons créer un effet de transition entre 2 textes grâce…

Tracking 3D Boujou - 3ds MaxTracking 3D Boujou - 3ds Max
Boujou est un logiciel de tracking puissant qui permet à partir d'une vidéo de créer…

Tracking 3D Boujou - After EffectsTracking 3D Boujou - After Effects
Boujou est un logiciel de tracking puissant qui permet à partir d'une vidéo de créer…

voir tous les tuto de dodo021

Notes attribuées par les utilisateurs (4 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (17)

par dodo021
(auteur de ce tuto - 08 janvier 2012)

" Bonjour thelightprince,

Le problème viens de la configuration PHP. C'est une variable qu'il faut changer dans le fichier php.ini. Une fois modifié n'oubliez pas de redémarrer votre serveur web pour que les changement soit pris en compte.

Pour le nom du fichier lors de la réception la variable $_GET['qqfile'] contiens le nom du fichier envoyé. Il vous reste juste à faire le traitement classique pour enregistrer le nom dans la base de donnée.

Bonne journée et bonne année 2012. =) "

par thelightprince
(a acheté ce tuto - 07 janvier 2012)

" Bonjour,

j'ai une petite question

j'ai télécharger les fichier source inclus avec la vidéo, et lorsque j'envoie un fichier, a la fin, il m'ouvre un message : INCREASE POST_MAX_SIZE and upload max filezise to 10M

(le fichier fait (51ko)

Je ne comprend pas pourquoi ?

De plus, j'eesaye de recuperer le nom du fichier pour l'enregistrer dans la base de donnée, impossible. serais tu comment faire, ou cela se fait ?

merci "

par dodo021
(auteur de ce tuto - 11 septembre 2011)

" Bonjour il est possible de le faire mais je ne l'explique pas dans ce tutoriel désolé. =) "

par fritz93
(n'a pas acheté ce tuto - 10 septembre 2011)

" Bonjour,
Avant d'acheter ce tuto j'aimerai savoir si il est possible d'uploader un dossier (avec des fichiers dedans)?

Merci par avance ;) "

par Infoprogà voté :
(a acheté ce tuto - 22 août 2011)

" Merci beaucoup ;)

5/5 bien entendu. "

par dodo021
(auteur de ce tuto - 22 août 2011)

" Bonjour désoler pour le retard voila le fichier du tuto a été mis à jours vous pouvez alors le télécharger. =)

Bonne semaine. =) "

par Infoprogà voté :
(a acheté ce tuto - 21 août 2011)

" Je viens aux nouvelles :) "

par Infoprogà voté :
(a acheté ce tuto - 18 août 2011)

" Pas de soucis, j'ai déjà sympathique de s'occuper de mon problème =) A vendredi alors :) "

par dodo021
(auteur de ce tuto - 16 août 2011)

" Bonjour désolé j'ai beaucoup de travail cette semaine. Je m'en occupe vendredi. =)
Désoler de pas pouvoir le faire plus tôt. =S "

par Infoprogà voté :
(a acheté ce tuto - 16 août 2011)

" Je viens aux nouvelles :) Avez-vous réussi à trouver la solution à mon problème? :)

Cordialement. "

par Infoprogà voté :
(a acheté ce tuto - 15 août 2011)

" Super :) Merci beaucoup, j'attends avec impatience ;) "

par dodo021
(auteur de ce tuto - 15 août 2011)

" D'accord alors je vais voir pour faire un petit exemple. =) "

par Infoprogà voté :
(a acheté ce tuto - 15 août 2011)

" ça a l'air simple mais pour être honête mon niveau en javascript frôle le 0 et j'aurais aimé savoir si vous pouviez me faire un copié-collé d'un code avec par exemple 2 barres de chargements pour que je vois bien ce qu'il faut changer?

Merci d'avance :)

"

par dodo021
(auteur de ce tuto - 15 août 2011)

" Bonjour Infoprog oui il est possible de mettre plusieurs barre de chargement. =)
Il faut crée plusieurs objet fileuploader avec un ID différent en paramètre. Ensuite dans la fonction onProgress il suffit de récupérer la bonne barre de chargement (Avec une class pour chaque barre par exemple) et le tour est joué ! =)

J'espère vous avoir aidé.

Bonne journée =) "

par Infoprogà voté :
(a acheté ce tuto - 14 août 2011)

" Bonjour, très bon tuto ;) Cependant, j'ai essayé de mettre plusieurs boutton pour envoyer plusieurs fichiers sur la même page et ça ne marche pas :S C'est comme si on ne pouvait avoir cette barre de progression qu'une seule fois par page :/ J'aurais aimé savoir si vous saviez comment mettre plusieurs chargement sur la même page?

Merci d'avance ;) "

par dodo021
(auteur de ce tuto - 12 avril 2011)

" Salut j'y est pensé et j'ai mis un exemple en ligne.
Tu peux essayé à cette adresse. =)

http://savemycraft.com/tuto/upload/ "

par noob4ever
(n'a pas acheté ce tuto - 12 avril 2011)

" Salut,
Dommage qu'on ne voit pas l'utilisation en upload dans ta démo ;)
@+ "

 

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 Ajax, HTML 5 d’une durée de 39 minutes a été acheté 92 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié le 11 avril 2011 par dodo021, contributeur, ayant reçu une note moyenne de 3,7/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 !