file upload ajax
Par PlaceOweb le dimanche, janvier 15 2012, 12:33 - Outils Internet - Lien permanent
Comment faire un upload de fichier(s) en ajax/javascript ?
rfc1867, et PHP APC
- RFC 1867 : Form-based File Upload in HTML (Experimental)
- APC : Alternative PHP Cache (Cette extension PECL n'est pas intégrée à PHP)
- Barre de progression pour un upload en PHP Principes de base (Ajax inside) (apc.rfc1867_name : APC_UPLOAD_PROGRESS et uniqid())
- Upload via l'extension APC de PHP
- Barre de progression pour upload en PHP/AJAX/APC
- Upload de fichier avec progress bar
Autres exemples
- eaupload demonstrates how to upload files to a web server and display a status information of an upload process.
- jQuery Ajax uploader plugin (with progress bar!) (avec du flash SWFUpload)
- Ajax File Upload with Progress Bar (The progress bar feature is available in PRO Edition only.)
Autres ressources
- blueimp / jQuery-File-Upload File Upload widget with multiple file selection, drag&drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
- jQuery File Upload est un plugin basé sur jQuery et HTML5. Il ne nécessite aucun module pour votre navigateur comme c’est le cas pour les Uploaders réalisés avec Flash. Parmi ses fonctionnalités, jQuery File Upload, permet d’uploader des fichiers multiples en affichant une barre de progression pendant le téléchargement ainsi qu’une miniature si votre fichier est une image. jQuery File Upload utilise XMLHttpRequest ou une iframe selon les technologies disponibles sur le navigateur. Si javascript est désactivé, c’est un bouton input de type file qui prend la relève.
- jQuery File Upload - Un uploader de fichiers avancé avec Drag and drop
- upload file en AJAX : méthodes
- Ajax et Upload
Ressources PHP
Gestion des chargements de fichiers
Chargements de fichiers par méthode POST
Assurez-vous que votre formulaire de téléchargement de fichier contienne enctype="multipart/form-data", sinon, le fichier se sera pas téléchargé.
$_FILES['userfile']['name']; // Le nom original du fichier, tel que sur la machine du client web. $_FILES['userfile']['type']; // Le type MIME du fichier, si le navigateur a fourni cette information. Par exemple, cela pourra être "image/gif". Ce type mime n'est cependant pas vérifié du côté de PHP et, donc, ne prend pas sa valeur pour se synchroniser. $_FILES['userfile']['size']; // La taille, en octets, du fichier téléchargé. $_FILES['userfile']['tmp_name']; // Le nom temporaire du fichier qui sera chargé sur la machine serveur. $_FILES['userfile']['error']; // Le code d'erreur associé au téléchargement de fichier.
Les codes d'erreurs : Explication sur les messages d'erreurs de chargement de fichiers
- UPLOAD_ERR_OK : Valeur : 0. Aucune erreur, le téléchargement est correct.
- UPLOAD_ERR_INI_SIZE : Valeur : 1. Le fichier téléchargé excède la taille de upload_max_filesize, configurée dans le php.ini.
- UPLOAD_ERR_FORM_SIZE : Valeur : 2. Le fichier téléchargé excède la taille de MAX_FILE_SIZE, qui a été spécifiée dans le formulaire HTML.
- UPLOAD_ERR_PARTIAL : Valeur : 3. Le fichier n'a été que partiellement téléchargé.
- UPLOAD_ERR_NO_FILE : Valeur : 4. Aucun fichier n'a été téléchargé.
- UPLOAD_ERR_NO_TMP_DIR : Valeur : 6. Un dossier temporaire est manquant. Introduit en PHP 5.0.3.
- UPLOAD_ERR_CANT_WRITE : Valeur : 7. Échec de l'écriture du fichier sur le disque. Introduit en PHP 5.1.0.
- UPLOAD_ERR_EXTENSION : Valeur : 8. Une extension PHP a arrêté l'envoi de fichier. PHP ne propose aucun moyen de déterminer quelle extension est en cause.
Télécharger plusieurs fichiers simultanément
Le paramètre max_file_uploads limite le nombre de fichiers qui peuvent être envoyés en une requête. Vous devrez vérifier que votre formulaire ne tente pas d'envoyer plus de fichiers dans la requête que ne le tolère cette limite.
Concernant la limite de taille des fichiers uploadés, n'oubliez pas de configurer :
- upload_max_filesize définit la taille maximale en octets d'un fichier à uploader.
- post_max_size définit la taille maximale des données reçues par la méthode POST. (Sinon vous aurez des message du genre : PHP Warning: POST Content-Length of yyy bytes exceeds the limit of xxx bytes)
Ressources de soft d'upload
A la sauce MegaUpload, et autres, on retrouve des services gratuits d'upload français tels que :
- placeoweb.com/partage - Gratuit, fichiers de grande taille sur une durée limitée dans le temps de 90 jours.
- http://dl.free.fr/ - Service d'envoi de fichiers de FREE, Rétention minimale de 30 jours sans téléchargement
Également, on retrouve des hack de ces services, tels que :
- plowshare : Download and upload files from Megaupload, Rapidshare and other file-sharing websites
- module : dl_free_fr.sh
Ressources Javascript
- input:file element
- value property (input:file) file.name , file.size
- files property (input:file)
- MULTIPLE attribute (input:file)
- The multiple attribute (HTML 5 working draft)
File API
- FileList interface
- readonly attribute unsigned long length;
- Blob Interface
- readonly attribute unsigned long long size;
- readonly attribute DOMString type;
- File interface
- readonly attribute DOMString name;
- readonly attribute Date lastModifiedDate;