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) :
- IE 7
- IE 8
- Firefox 3
- Firefox 3.6
- Firefox 4
- Safari 4
- Safari 5
- Google Chrome
- Opera 10.60
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
Dans ce tuto AJAX en vidéo, nous verrons comment réaliser…
Formulaire de contact ajax
Dans ce tuto AJAX en vidéo, vous réaliserez un formulaire…
Message à la Twitter en AJAX…
Dans ce tuto Ajax en vidéo, vous apprendrez à réaliser un…
Détecter les requêtes AJAX…
Dans ce tuto Ajax en vidéo, vous apprendrez à détecter en…
Administration en AJAX et…
Dans ce tuto AJAX en vidéo, nous verrons comment ajouter, supprimer…
Formulaire de contact AJAX…
Dans ce tuto AJAX en vidéo, nous réaliserons un formulaire…
Espace membre en AJAX
Dans ce tuto Ajax en vidéo, nous verrons comment réaliser…
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 :
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 3D
Dans ce tuto Cinema4D nous allons créer un effet de transition entre 2 textes grâce…
Tracking 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 Effects
Boujou est un logiciel de tracking puissant qui permet à partir d'une vidéo de créer…
Notes attribuées par les utilisateurs (4 votes)
Les avis / Questions des utilisateurs (17)
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.












(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. =) "
(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 "
(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é. =) "
(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 ;) "
(a acheté ce tuto - 22 août 2011)
" Merci beaucoup ;)
5/5 bien entendu. "
(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. =) "
(a acheté ce tuto - 21 août 2011)
" Je viens aux nouvelles :) "
(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 :) "
(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 "
(a acheté ce tuto - 16 août 2011)
" Je viens aux nouvelles :) Avez-vous réussi à trouver la solution à mon problème? :)
Cordialement. "
(a acheté ce tuto - 15 août 2011)
" Super :) Merci beaucoup, j'attends avec impatience ;) "
(auteur de ce tuto - 15 août 2011)
" D'accord alors je vais voir pour faire un petit exemple. =) "
(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 :)
"
(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 =) "
(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 ;) "
(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/ "
(n'a pas acheté ce tuto - 12 avril 2011)
" Salut,
Dommage qu'on ne voit pas l'utilisation en upload dans ta démo ;)
@+ "