jQuery Meetups
Envoyer les données d'un input de type file avec jQuery.ajax() ?
J'utilise régulièrement la méthode ajax de jQuery pour effectuer des traitements en PHP et j'utilise l'option data pour les données à envoyer, seulement voilà, avec un champ de type file, je ne vois pas comment faire ?
Comment je peux faire en sorte d'envoyer avec jQuery.ajax() les données que l'on récupère dans PHP lorsque l'on fait le submit d'un formulaire avec un champ de type file :
- $_FILES["..."]["name"]
- $_FILES["..."]["tmp_name"]
- ...
?
Views: 3007
Replies to This Discussion
-
Permalink Reply by coco_des_bois on -
Il faut vérifier, mais normalement, si JQuery utilise les fonctions récentes, c'est natif avec FileAPI.
Il y a des exemples d'utilisation sur le site de Mozilla : http://hacks.mozilla.org/2010/07/firefox-4-formdata-and-the-new-fil...
Mais si JQuery n'implémente pas cette API, à la base, c'est impossible d'envoyer des fichiers en Ajax, alors il existe des plugins qui simulent ça, et ça se passe un peu comme ça :
https://developer.mozilla.org/en/using_files_from_web_applications
Bien entendu, FileAPI n'est pas compatible avec tous les navigateurs loin de là !
-
-
Permalink Reply by Arnauld Dombret on -
Utilise le plugin "form" de Mike Alsup.
-
-
Permalink Reply by Olivier Audard on -
Effectivement, la bonne méthode est sans doute celle présenté par @coco_des_bois. Néanmoins, cette méthode n'est pas compatible avec les anciens navigateurs...
Il reste toujours la méthode "à l'ancienne", qui utilise une iframe (cachée) comme target du formulaire:
<script language="javascript" type="text/javascript">
function formUploadCallback (result) {
console.log("Upload OK:", result);
alert('Upload OK');
}
</script>
<form target="upload_target" action="upload.php" enctype="multipart/form-data" method="post">
File: <input name="myfile" type="file" />
<input name="submitBtn" type="submit" value="Submit" />
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>Enfin, pour "émuler" la callback de retour, le serveur doit renvoyer une page HTML qui contient:
<script language="javascript" type="text/javascript">
window.top.window.formUploadCallback(<?php echo $result; ?>);
</script>
De cette façon, lorsque le fichier à été envoyé, la callback est appelée est on a simulé une requête AJAX.
En plus, ça fonctionne avec tous les navigateurs ;)
-
-
Permalink Reply by coco_des_bois on
-
Exact, je pense que pour l'instant il faut se contenter de "hack", quitte à se servir d'un plugin JQuery, autant savoir ce qu'il y a derrière.
Très bon résumé Olivier ! Super simple.
-
-
Permalink Reply by ROYER Thibault on -
Oh super, merci de vos réponses !!
J'ai adapté ta méthode Olivier et ça fonctionne très bien. J'avais voulu le faire comme ça mais je voyais pas comment avoir le retour, il me manquait le target (et l'iframe forcément).
Merci beaucoup Olivier et tous pour vos réponses rapides.
-
-
Permalink Reply by Ahamayed Moussa Aboubakar on -
ok quelqu'un peut-il poster le code pour la méthode de l'iframe? je ne veux pas utiliser un plugin. c'est dans un cadre pédagogique que j'aimerais comprendre la méthode SVP!
-
-
Permalink Reply by Olivier Audard on
-
@coco_des_bois : Merci, j'ai pas mal travaillé avec les envois de fichiers, d'où ma démarche pour trouver une solution simple. Ça se corse quand on veut faire la même chose en cross-domain... ;)
@Thibault : Content de t'avoir aidé. C'est souvent la méthode la plus simple qui donne les meilleurs résultats, la méthode d'envoi d'un formulaire avec une target est un bon exemple à mon avis.
@Aboubakar : Le code est fourni dans ma réponse précédente, ça devrait fonctionner tel quel. Tu dois juste t'assurer que le serveur renvoie une page HTML valide et pas seulement le script.
L'attribut target permet de définir dans quel contexte sera affiché le résultat de la requête (une page HTML). Par défaut, c'est dans la page courante. Dans notre cas, on choisit d'afficher ce résultat dans l'iframe cachée. Une fois la page chargée dans l'iframe, le script se contente d'appeler une fonction dans la page parente (via
window.top.window.nomDeLaFonction).Il faut évidement que cette fonction soit définie (dans le contexte window).
C'est plus clair?
-
-
Permalink Reply by Ahamayed Moussa Aboubakar on
-
Cool ! ça marche. merci beaucoup les gars !
Olivier Audard said:
@coco_des_bois : Merci, j'ai pas mal travaillé avec les envois de fichiers, d'où ma démarche pour trouver une solution simple. Ça se corse quand on veut faire la même chose en cross-domain... ;)
@Thibault : Content de t'avoir aidé. C'est souvent la méthode la plus simple qui donne les meilleurs résultats, la méthode d'envoi d'un formulaire avec une target est un bon exemple à mon avis.
@Aboubakar : Le code est fourni dans ma réponse précédente, ça devrait fonctionner tel quel. Tu dois juste t'assurer que le serveur renvoie une page HTML valide et pas seulement le script.
L'attribut target permet de définir dans quel contexte sera affiché le résultat de la requête (une page HTML). Par défaut, c'est dans la page courante. Dans notre cas, on choisit d'afficher ce résultat dans l'iframe cachée. Une fois la page chargée dans l'iframe, le script se contente d'appeler une fonction dans la page parente (via
window.top.window.nomDeLaFonction).Il faut évidement que cette fonction soit définie (dans le contexte window).
C'est plus clair?
-
© 2012 Created by jqueryadmin.
