Unabhängig davon, ob es sich um PHP- oder andere serverseitige Skripte handelt, bieten sie eine hochladende Datei-Upload-Funktion an, die relativ einfach zu implementieren ist. Mit JavaScript zum Kooperieren kann das Upload von AJAX -Dateien realisiert werden. Obwohl JQuery selbst keine solchen vereinfachten Funktionen liefert, gibt es viele Plug-Ins, die implementiert werden können. Unter ihnen ist AjaxFileUpload.js von Phpletter.com ein leichtes Plug-In, und die Schreibmethode ist der globalen Methode $ .post () von JQuery sehr ähnlich und ist einfach und einfach zu bedienen.
Dieses Plug-In ist jedoch zu vereinfacht. Zusätzlich zur Bereitstellung des Pfades zum Hochladen von Dateien können zusätzliche Werte nicht an den Hintergrundserver übergeben. Daher habe ich das Skript geändert und einen Datenobjektparameter hinzugefügt.
1. Prinzip
Ich verwende PHP hier als serverseitiges Skript. Fast jedes Buch mit weniger PHP wird erwähnt, wie Sie die Methode move_Uploaded_file () zum Hochladen von Dateien verwenden. Ich werde hier nicht in Details eingehen. Was ich sagen möchte, ist, das Prinzip des Ajax -Uploads zu verwenden.
Da ich die JQuery -Bibliothek verwendet habe, wenn ich an AJAX denke, wird meine erste Reaktion die Methode $ .Post () verwendet, um jeden Selektor im Feld Dateidatei zu erhalten und sie dann an den Hintergrundserver zu senden. Natürlich stellte sich heraus, dass dies nicht möglich war. (Aufgrund dieses Problems habe ich auch viele Informationen überprüft und viele Skripte wie ASP im Internet bereitgestellt. Ich weiß wirklich nicht, was ich sagen soll.)
Zurück zum Thema ist es eigentlich nicht schwierig, Ajax hochzuladen, und es gibt viele Methoden. Das in diesem Artikel erwähnte AjaxFileUpload.js -Plugin für Phpletter.com ist die Möglichkeit, IFrames zu verwenden. Dies ist auch eine gemeinsame Methode beim Hochladen, ohne die Seite zu aktualisieren, ohne JavaScript -Skripte zu verwenden. (Diese Methode wird verwendet, um Protokolle im BO-Blog-Hintergrund dieses Blogs zu schreiben)
Das AjaxFileUpload.js-Plug-In ist ebenfalls sehr einfach. Es verwendet zunächst den JQuery -Selektor, um den Dateipfadwert in dem Feld "Datei -Upload" zu erhalten, dann dynamisch ein Iframe erstellen und ein neues Dateifeld in der Datei in der Datei erstellen, um eine Postmethode zum Übermittlung des Hintergrunds anzugeben. Kehren Sie schließlich zu den Ergebnissen zur Rezeption zurück.
2. Verwendung
Die Verwendung von ajaxFileUpload.js -Plugin ist sehr einfach.
Der HTML -Code an der Rezeption ist ähnlich:
<script type="text/javascript">$(#buttonUplod).click(function () { $.ajaxFileUpload ({ url:'doajaxfileupload.php', //The server where you handle uploading the file is secureuri:false, //The ID value corresponding to the file in the page processing code fileElementId:'img', dataType: 'json', //Return data Typ: Text, XML, JSON, HTML, SCRITP, JSONP Fünf Erfolge: Funktion (Daten) {alert (Data.file_infor); ajaxFileUpload (); "> Upload </button>Hintergrund doajaxFileUpload.php Skript:
<? php $ upFilepath = "../attachment/";$ok=@move_Uploaded_file($_files?img'][''tmp_name'low $UpFilePath); if ($ OK === false) {echo json_encode ('file_infor' => 'Upload fehlgeschlagen'); } else {echo json_encode ('file_infor' => 'erfolgreich hochgeladen'); }?>Zum Testen können Sie den übergebenen variablen Wert auf ähnliche Weise wie Folgendes speichern:
$ file_info = var_export ($ _ Dateien, true);
$ OK = file_put_contents ("../ Attemment/file_info.txt", $ file_info);
if ($ OK) exit (json_encode ('file_infor' => 'erfolgreich hochgeladen));
exit (json_encode ('file_infor' => 'hochladen fehlgeschlagen'));
※ Beachten
Bitte beachten Sie die Markierungen im Feld HTML -Code -Datei:
1. ID = 'img' wird verwendet, um FileElementID: 'IMG' des AjaxFileUpload.js -Plugins zu identifizieren. Der JQuery -Selektor verwendet diese Zeichenfolge, um den Wert des Textfelds zu erhalten.
2. NAME = 'IMG' wird verwendet, um die hochgeladenen Dateidaten über $ _files ['img'] zu lesen, wenn sie sie über Post an ein Hintergrundskript senden. Wenn dieser Wert nicht verfügbar ist, ist die Variable $ _files leer.
Daher sind diese beiden Werte unverzichtbar und können nicht verwirrt werden.
3.. Unterstützen Sie zusätzliche Parameter
Manchmal müssen wir hochgeladene Dateien basierend auf bestimmten Variablen im Hintergrund verarbeiten. Aktualisieren Sie beispielsweise die Datei. Zu diesem Zeitpunkt müssen Sie einige zusätzliche Parameter in die gleiche Stufe übergeben. Also habe ich das AjaxFileUpload.js -Plugin geändert:
addotherRequestSTOFORM: Funktion (Form, Daten) {// zusätzliche Parameter var originalElement = $ ('<Eingabe type = "Hidden" name = "" value = "">') hinzufügen; für (var key in data) {name = key; value = Data [Schlüssel]; var kloneElement = originalElement.clone (); CloneElement.attr ({'name': name, 'value': value}); $ (Klonelement) .Appendto (Form); } return Form;}, ajaxFileUpload: Funktion (s) {// Todo Einführungen globalen Einstellungen einführen, sodass der Client sie für alle Anforderungen ändern kann, nicht nur mit s = jQuery.extend ({}, jQuery.ajaxsetings, s); var id = new Date (). getTime () var form = jQuery.creatEeuploadForm (ID, s.FileElementId); if (S.Data) Form = jQuery.addotherRequestStOform (Form, S.Data); var io = jQuery.creatEeuploadiframe (id, s.Secureuri);Der rote Markierungsteil ist das, was ich hinzugefügt habe. Auf diese Weise kann ich zusätzliche Parameter im HTML -Abschnitt vor dem Vordergrund über Code wie unten übergeben:
URL: 'doajaxFileUpload.php', // Der Server, auf dem Sie Upload -Dateien verarbeiten
Secureuri: Falsch, // der ID -Wert, der der Datei im Seitungsverarbeitungscode entspricht
Daten: {'Test': 'Test', 'OK': 'OK'}, // in einem Objekt übergeben, und der Inhaltsparteil kann den variablen Wert von JavaScript eingeben
FileElementId: 'IMG',
Das Hintergrundverarbeitungsskript lautet:
Array_push ($ _ Dateien, $ _ Anfrage); $ file_info = var_export ($ _ fateien, true); $ OK = file_put_contents ("../ beibehalten/file_info.txt", $ file_info); exit (json_encode ('file_infor' => 'hochladen fehlgeschlagen'));Es ist zu erkennen, dass das Prinzip sehr einfach ist, nämlich den zusätzlichen Datenobjektinhalt zum Formular unter dem Iframe hinzuzufügen, an das Php -Skript des Hintergrunds weiterzugeben und diese Werte mit Variablen wie $ _Request zu erhalten.
Der in der Hintergrundausgabe beibehaltene Inhalt von Datei_Info.txt ist wie folgt:
Array (
'Datei' =>
Array (
'name' => 'firefox-java.txt',
'type' => 'text/plain',
'tmp_name' => 'd: //tools//xampp//tmp//phped45.tmp',,
'Fehler' => 0,,
'Größe' => 250,
),
0 =>
Array (
'test' => 'test',
'ok' => 'ok',
'PhpSessid' => 'E379FD4FB2ABCA6E802A1302805A5535',,
),
)
ajaxFileUpload.js:
jQuery.extend ({crectroadiframe: function (id, uri) {// Frames FrameID = 'JuploadFrame' + id; if (window.activexObject) {var io = document.createelement ('<Iframe ID = "' + FrameID +" name = "' +'"))). 'boolean') {io.src = 'javaScript: false';} else if (typeof uri == 'String') {io.src = uri;}} else {var io = document.createelement ('iframe'); 'Absolute'; io.style.top = '-1000px'; action = "" method = "post" name = "' + formId +'" id = "' + filchId +'" engTyPe = "Multipart/Form-Data"> </Form> '); $ (OldElement) .Before (NewElement); $ (Form) .css ('Top', '-1200px'); $ (Form) .css ('links', '-1200px'); $ (Form) .AppendTo ('Körper'); Rückgabeform; }, addotherRequestSTOFORM: Funktion (Form, Daten) {// zusätzliches Parameter var originalElement = $ ('<Eingabe type = "Hidden" name = "" value = "">'); für (var key in data) {name = key; value = Data [Schlüssel]; var kloneElement = originalElement.clone (); cloneElement.attr ({'name': name, 'value': value}); $ (Klonelement) .Appendto (Form); } Rückgabeform; }, ajaxFileUpload: Funktion (s) {// Todo führt globale Einstellungen ein, sodass der Client sie für alle Anfragen ändern kann, nicht nur Timeout s = jQuery.extend ({}, jQuery.ajaxSettings, s); var id = new Date (). getTime () var form = jQuery.creatEeuploadForm (ID, s.FileElementId); if (S.Data) Form = jQuery.addotherRequestStOform (Form, S.Data); var io = jQuery.creatEeuploadiframe (id, s.Secureuri); var Framid = 'Juploadframe' + id; var formId = 'juploadform' + id; // nach einem neuen Satz von Anfragen achten, wenn (S.Global &&! JQuery.Active ++) {jQuery.event.trigger ("ajaxstart"); } var requestDone = false; // Erstellen Sie das Anforderungsobjekt var xml = {} if (s.global) jQuery.event.trigger ("ajaxSend", [xml, s]); // Warten Sie auf eine Antwort, um zu kommen var uploadCallback = function (isTimeout) {var io = document.getElementById (FrameID); Versuchen Sie {if (io.contentWindow) {xml.responsetext = io.contentWindow.document 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 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"? "Erfolg": "Fehler"; // Stellen Sie sicher, dass die Anforderung erfolgreich oder nicht modifiziert war (Status! // Wenn ein lokaler Rückruf angegeben wurde, feuern Sie ihn ab und bestehen Sie ihn über die DataIF (success) success (Daten, Status); // feuern den globalen Callbackif (s.global) jQuery.event.trigger ("ajaxsuccess", [xml, s]); "Fehler"; jQuery.HandleError (s, xml, Status, e);} // Die Anforderung war komplett (s.global) jQuery.event.trigger ("ajaxComplete", [xml, s]); // Handle mit dem globalen AJAX -Gegenfell (S.Global &&! -jquery.active) jQuery.event.trigger ("ajaxstop"); // Ergebnisergebnis (s.com plete) s.com plete (xml, Status); jQuery (io) .unbind () setTimeout (function () {try {$ (io) .remove (); {setTimeout (function () {// prüfen Sie, ob die Anforderung immer noch geschieht (! RequestDone) UploadCallback ("Timeout");}, S.TimeOut); } try {// var io = $ ('#' + Framid); var form = $ ('#' + formId); $ (Form) .Attr ('Aktion', S.Url); $ (Form) .Attr ('Methode', 'post'); $ (Form) .Attr ('Ziel', 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: function (r, type) {var data =! type; Data = type == "xml" || Daten? R. Responsexml: R. responsetext; // Wenn der Typ "Skript" ist, bewerten Sie ihn im globalen Kontext, wenn (type == "script") jQuery.globaleval (Daten); // Erhalten Sie das JavaScript -Objekt, wenn JSON verwendet wird. if (type == "json") eval ("data =" + data); // Skripte in html if (type == "html") jQuery ("<div>"). HTML (Daten) .evalscripts (); // alert ($ ('param', data) .each (function () {alert ($ (this) .attr ('value');})); Daten zurückgeben; }})