Qu'il s'agisse de PHP ou d'autres scripts côté serveur, ils fournissent une fonction de téléchargement de fichiers, qui est relativement simple à implémenter. En utilisant JavaScript pour coopérer, le téléchargement de fichiers AJAX peut être réalisé. Bien que JQuery lui-même ne fournit pas de fonctions aussi simplifiées, de nombreux plug-ins peuvent être implémentés. Parmi eux, ajaxfileupload.js fourni par PhPletter.com est un plug-in léger, et la méthode d'écriture est très similaire à la méthode globale $ .post () fournie par jQuery, et est simple et facile à utiliser.
Cependant, ce plug-in est trop simplifié. En plus de fournir le chemin d'accès pour télécharger des fichiers, il ne peut pas transmettre des valeurs supplémentaires au serveur d'arrière-plan. J'ai donc modifié le script et ajouté un paramètre d'objet de données.
1. Principe
J'utilise PHP comme script côté serveur ici. Presque chaque livre avec moins de PHP mentionnera comment utiliser la méthode move_uploaded_file () pour télécharger des fichiers, je n'entrerai pas dans les détails ici. Ce que je veux dire, c'est d'utiliser le principe du téléchargement de l'Ajax.
Parce que j'utilise la bibliothèque jQuery, lorsque je pense à Ajax, ma première réaction est d'essayer la méthode $ .post (), d'utiliser chaque sélecteur pour obtenir la valeur de valeur dans la zone de fichier, puis de le soumettre au serveur d'arrière-plan. Bien sûr, il s'est avéré que ce n'était pas possible. (En raison de ce problème, j'ai également vérifié beaucoup d'informations et fourni de nombreux scripts tels que ASP sur Internet. Je ne sais vraiment pas quoi dire.)
Retour au sujet, il n'est en fait pas difficile de télécharger Ajax, et il existe de nombreuses méthodes. Le plugin ajaxfileupload.js pour phpletter.com mentionné dans cet article est la façon d'utiliser des iframes. Il s'agit également d'une méthode courante lors du téléchargement sans rafraîchir la page sans utiliser de scripts JavaScript. (Cette méthode est utilisée pour écrire des journaux dans l'arrière-plan BO-Blog de ce blog)
Le plug-in ajaxfileupload.js est également très simple. Il utilise d'abord le sélecteur jQuery pour obtenir la valeur du chemin du fichier dans la zone de téléchargement de fichiers, puis créez dynamiquement un iframe et créez une nouvelle boîte de fichiers à l'intérieur, en fournissant une méthode de publication pour la soumettre à l'arrière-plan. Enfin, revenez aux résultats à la réception.
2. Utiliser
L'utilisation du plugin ajaxfileupload.js est très simple.
Le code HTML de la réception est similaire:
<script type = "text / javascript"> $ (# boutonUpLod) .click (function () {$ .ajaxfileupload ({url: 'doajaxfileupload.php', // le serveur où vous gérez le téléchargement du fichier est sécuré: false, // la valeur d'ID correspondant au fichier dans le fichier de traitement de la page TypeElementid: 'img', dataTy Texte, XML, JSON, HTML, SCRITP, JSONP Five Success: Function (Data) {alert (Data.File_Infor);}})}); </ Script> <Input id = "img" Type = "File" size = "45" Name = "IMG"> <Button ID = "ButtonUpload" OnClick = "RETOUR AJAXFILEUPLOLAGE (););Arrière-plan DoajaxFileUpload.php Script:
<? php $ upfilepath = "../attachment/" ;$ok=@move_uploaded_file($_files ·Img' de la dynamique. if ($ ok === false) {echo json_encode ('file_infor' => 'upload échoué'); } else {echo json_encode ('file_infor' => 'Uploaded réussi'); }?>Pour les tests, vous pouvez enregistrer la valeur variable passée de la même manière que ce qui suit:
$ file_info = var_export ($ _ files, true);
$ ok = file_put_contents ("../ pièce jointe / file_info.txt", $ file_info);
if ($ ok) quitter (json_encode ('file_infor' => 'téléchargé avec succès'));
exit (json_encode ('file_infor' => 'upload failli'));
※ Avis
Veuillez noter les marques dans la zone de fichier de code HTML:
1. Id = 'img' est utilisé pour identifier FileelementId: 'img' du plugin ajaxfileupload.js. Le sélecteur jQuery utilisera cette chaîne pour obtenir la valeur de la zone de texte;
2. Name = 'img' est utilisé pour lire les données de fichiers téléchargées via $ _files ['img'] lors de la soumission à un script d'arrière-plan via le post. Si cette valeur n'est pas disponible, la variable $ _files est vide;
Par conséquent, ces deux valeurs sont indispensables et ne peuvent pas être confondues.
3. Prise en charge des paramètres supplémentaires
Parfois, nous devons gérer les fichiers téléchargés en fonction de certaines variables en arrière-plan. Par exemple, mettez à jour le fichier. À l'heure actuelle, vous devez transmettre des paramètres supplémentaires à la même étape. J'ai donc modifié le plugin ajaxfileupload.js:
addOtHerRequestStoForm: function (form, data) {// Ajouter un paramètre supplémentaire var originalElement = $ ('<input type = "HIDDEN" name = "" value = "">'); pour (Var Key dans Data) {name = key; valeur = données [clé]; var cloneElement = originalElement.clone (); cloneElement.attr ({'name': name, 'value': value}); $ (cloneelement) .appendto (formulaire); } return form;}, ajaxFileUpload: function (s) {// todo introduire des paramètres globaux, permettant au client de les modifier pour toutes les demandes, pas seulement le délai d'attente S = jQuery.Extend ({}, jQuery.AjaxSettings, S); var id = new Date (). getTime () var form = jQuery.CreateUploadForm (id, s.fileElementId); if (s.data) form = jQuery.AddotherRequestStoForm (formulaire, s.data); var io = jQuery.CreateUploadIframe (id, s.secureuri);La partie de marquage rouge est ce que j'ai ajouté. De cette façon, je peux transmettre des paramètres supplémentaires dans la section HTML de premier plan via le code comme ci-dessous:
URL: 'DoajaxFileupload.php', // le serveur où vous gérez les fichiers de téléchargement
SecureUri: false, // la valeur d'ID correspondant au fichier dans le code de traitement de la page
Données: {'test': 'test', 'ok': 'ok'}, // passé dans un objet, et la partie de contenu peut entrer la valeur variable de JavaScript
FileelementId: «img»,
Le script de traitement d'arrière-plan est:
array_push ($ _ files, $ _ request); $ file_info = var_export ($ _ files, true); $ ok = file_put_contents ("../ jiretment / file_info.txt", $ file_info); if ($ ok) exit (json_encode ('file_infor' => 'upled a réussi à réussir')); exit (json_encode ('file_infor' => 'upload failli'));On peut voir que le principe est très simple, qui consiste à ajouter le contenu de l'objet de données supplémentaire au formulaire sous le nom IFRAME, à le passer au script PHP d'arrière-plan et à obtenir ces valeurs avec des variables telles que $ _request.
Le contenu file_info.txt conservé dans la sortie d'arrière-plan est le suivant:
tableau (
'file' =>
tableau (
'name' => 'firefox-java.txt',
'type' => 'text / plain',
'tmp_name' => 'd: //tools//xampp//tmp//phped45.tmp',
'error' => 0,
'Size' => 250,
),
0 =>
tableau (
'test' => 'test',
'ok' => 'ok',
'PhPSessid' => 'e379fd4fb2abca6e802a1302805a5535',
),
)
ajaxfileupload.js:
jQuery.extend ({createUploadIframe: function (id, uri) {// create framevar frameid = 'juploadframe' + id; if (window.activexobject) {var io = document.createelement ('<iframe id = "' + frameid + '" name = "+ frameid +'" /> '); if (type uri == 'booléen') {io.src = 'javascript: false';} else if (typeof uri == 'string') {io.src = uri;}} else {var io = document.createelement ('iframe'); io.id = frameid; io.name = frameid;} io.style.Position = 'Absolute'; io.style.top = '-1000px'; io.style.left = '-1000px'; Action = "Method =" Post "Name =" '+ Formid +' ID = "'+ FORMID +' $ (oldElement) .APPENDTO (form); $ (form) .css ('top', '-1200px'); $ (form) .css ('gauche', '-1200px'); $ (form) .appendto ('corps'); formulaire de retour; }, addOtherRequestStoForm: function (form, data) {// ajouter un paramètre supplémentaire var originalElement = $ ('<input type = "Hidden" name = "" value = "">'); pour (Var Key dans Data) {name = key; valeur = données [clé]; var cloneElement = originalElement.clone (); cloneElement.attr ({'name': name, 'value': value}); $ (cloneelement) .appendto (formulaire); } Retour Form; }, ajaxFileUpload: fonction (s) {// todo introduire des paramètres globaux, permettant au client de les modifier pour toutes les demandes, pas seulement le délai d'attente S = jQuery.Extend ({}, jQuery.AjaxSettings, s); var id = new Date (). getTime () var form = jQuery.CreateUploadForm (id, s.fileElementId); if (s.data) form = jQuery.AddotherRequestStoForm (formulaire, s.data); var io = jQuery.CreateUploadIframe (id, s.secureuri); var frameid = 'juploadframe' + id; var formid = 'juploadform' + id; // Surveillez un nouvel ensemble de demandes if (s.global &&! JQuery.active ++) {jQuery.event.trigger ("ajaxstart"); } var demandedone = false; // Créer l'objet de demande var xml = {} if (s.global) jQuery.event.trigger ("ajaxSend", [xml, s]); // attendez qu'une réponse revienne var uploadCallback = function (istimeout) {var io = document.getElementById (frameid); try {if (io.contentwindow) {xml.RespontentExt = io.contentwindow.document.body? Io.contentwindow.document.body.innerhtml: null; xml.responsexml = io.contentwindow.document.xmlDocument? io.contentwindow.document.xmldocument: io.contentwindow.Document; } else if (io.contentDocument) {xml.ResponSext = io.contentDocument.Document.body? io.contentDocument.Document.body.innerhtml: null; xml.responsexml = io.contentDocument.Document.xmlDocument? io.contentDocument.Document.xmlDocument: io.contentDocument.Document; }} catch (e) {jQuery.HandLeerror (s, xml, null, e); } if (xml || istimeout == "timeout") {requestDone = true; var status; try {status = istimeout! = "timeout"? "Success": "Error"; // Assurez-vous que la demande a été réussie ou NotModifiediF (status! = "Error") {// Traitez les données (exécute le XML via HttpData indépendamment de Callback) var Data = jQuery.uploadHttpData (XML, S.Datatype); // Si un rappel local a été spécifié, licenciez-le et transmettez-le le dataIF (s.success) s.success (data, status); // tire le callbackif global (s.global) jquery.event.trigger ("ajaxsuccess", [xml, s]);} elsejquery.handleerror (s, xml, statut);}. "Error"; jQuery.HandLeerror (s, xml, status, e);} // La demande a été complète (s.global) jQuery.event.trigger ("ajaxcomplete", [xml, s]); // Gérer le Global Ajax CounterIf (S.Global &&! --JQuery.active) jQuery.Event.trigger ("ajaxstop"); // Process Result (S .............. ce........ ce. jQuery (io) .unbind () setTimeout (function () {try {$ (io) .remove (); $ (form) .remove ();} catch (e) {jQuery.handleerror (s, xml, null, e);}}, 100) xml = null}} // timeout checker if (s.timeout> 0) {setTimeout (function () {// vérifier si la demande se produit toujours (! requestDone) uploadCallback ("timeout");}, s.timeout); } essayez {// var io = $ ('#' + frameid); var form = $ ('#' + formid); $ (form) .attr ('action', s.url); $ (form) .attr ('méthode', 'post'); $ (form) .attr ('cible', frameid); if (form.encoding) {form.encoding = 'multipart / form-data'; } else {form.enctype = 'multipart / form-data';} $ (form) .submit (); } catch (e) {jQuery.HandLeerror (s, xml, null, e); } if (window.attachevent) {document.getElementById (frameid) .Attachevent ('onload', uploadCallback); } else {document.getElementById (frameid) .addeventListener ('Load', uploadCallback, false); } return {abort: function () {}}; }, uploadHttpData: fonction (r, type) {var data =! type; data = type == "xml" || données ? R.Responsexml: R.ResponSeText; // Si le type est "script", évaluez-le dans un contexte global si (type == "script") jQuery.GlobaleVal (données); // Obtenez l'objet JavaScript, si JSON est utilisé. if (type == "JSON") eval ("data =" + data); // Évaluer les scripts dans html if (type == "html") jQuery ("<div>"). html (data) .eValScripts (); // alert ($ ('param', data) .each (function () {alert ($ (this) .attr ('value'));})); retourner les données; }})