Ya sea que se trate de PHP u otros scripts del lado del servidor, proporcionan la función de carga de archivos, que es relativamente simple de implementar. Usando JavaScript para cooperar, se puede realizar la carga de archivos AJAX. Aunque JQuery en sí no proporciona funciones tan simplificadas, hay muchos complementos que se pueden implementar. Entre ellos, AjaxFileUpload.js proporcionado por phpletter.com es un complemento ligero, y el método de escritura es muy similar al método global $ .post () proporcionado por jQuery, y es simple y fácil de usar.
Sin embargo, este complemento está demasiado simplificado. Además de proporcionar la ruta para cargar archivos, no puede pasar valores adicionales al servidor de fondo. Entonces, modifiqué el script y agregué un parámetro de objeto de datos.
1. Principio
Estoy usando PHP como un script del lado del servidor aquí. Casi todos los libros con menos PHP mencionarán cómo usar el método Move_uploaded_File () para cargar archivos, no entraré en detalles aquí. Lo que quiero decir es usar el principio de la carga de Ajax.
Debido a que he estado usando la biblioteca jQuery, cuando pienso en AJAX, mi primera reacción es probar el método $ .post (), usar cada selector para obtener el valor de valor en el cuadro de archivo de archivo y luego enviarlo al servidor de fondo. Por supuesto, resultó que esto no era posible. (Debido a este problema, también he revisado mucha información y proporcioné muchos scripts como ASP en Internet. Realmente no sé qué decir).
Volviendo al tema, en realidad no es difícil cargar AJAX, y hay muchos métodos. El complemento AjaxFileUpload.js para Phpletter.com mencionado en este artículo es la forma de usar iFrames. Este también es un método común al cargar sin actualizar la página sin usar scripts JavaScript. (Este método se usa para escribir registros en el fondo de Bo-Blog de este blog)
El complemento AjaxFileUpload.js también es muy simple. Primero utiliza el selector de jQuery para obtener el valor de la ruta del archivo en el cuadro de carga de archivos, luego crea dinámicamente un iframe y crea un nuevo cuadro de archivo de archivo dentro, proporcionando un método de publicación para enviarlo al fondo. Finalmente, regrese a los resultados a la recepción.
2. Use
El uso del complemento AjaxFileUpload.js es muy simple.
El código HTML de recepción es similar:
<script type = "text/javaScript"> $ (#buttonuplod) .click (function () {$ .AJAXFileUpload ({{url: 'doajaxFileUpload.php', // El servidor donde se le permite a SecureUri: False, // el valor de identificación correspondiente al archivo en el archivo de procesamiento de la página. // Tipo de datos de retorno: Text, XML, JSON, HTML, SCRITP, JSONP FINCOS: function (data) {alert (data.file_infor); ajaxfileUpload (); "> cargar </boton>Background doajaxfileUpload.php script:
<? Php $ UpFilePath = "../attachment/";$ok=@move_uploaded_file($_files['img'font> •'tmp_name'font>thmontables,$upfilepath); if ($ ok === false) {echo json_encode ('file_infor' => 'cargar fallido'); } else {echo json_encode ('file_infor' => 'cargar con éxito'); }?>Para las pruebas, puede guardar el valor variable aprobado de manera similar a lo siguiente:
$ file_info = var_export ($ _ archivos, true);
$ OK = FILE_PUT_CONTENTS ("../ SCUNTMENT/FILE_INFO.TXT", $ FILE_INFO);
if ($ ok) exit (json_encode ('file_infor' => 'cargar con éxito'));
EXIT (JSON_ENCODE ('FILE_INFOR' => 'FUENTA DE LA COMPACIÓN'));
※ Aviso
Tenga en cuenta las marcas en el cuadro de archivo de código HTML:
1. ID = 'IMG' se usa para identificar FileElementId: 'IMG' del complemento AJAXFILEUPLOAD.JS. El selector de jQuery usará esta cadena para obtener el valor del cuadro de texto;
2. Name = 'img' se usa para leer los datos de archivo cargados a través de $ _files ['img'] al enviarlos a un script de fondo a través de la publicación. Si este valor no está disponible, la variable $ _files está vacía;
Por lo tanto, estos dos valores son indispensables y no pueden confundirse.
3. Soporte de parámetros adicionales
A veces, necesitamos manejar archivos cargados basados en ciertas variables en segundo plano. Por ejemplo, actualice el archivo. En este momento, debe pasar algunos parámetros adicionales a la misma etapa. Entonces, modifiqué el complemento AjaxFileUpload.js:
addotherRequeststoForm: function (form, data) {// Agregar parámetro adicional var originaleLement = $ ('<input type = "Hidden" name = "" valor = "">'); for (clave var en datos) {name = key; valor = data [clave]; var cloneElement = originaleLement.clone (); cloneElement.Attr ({'name': name, 'value': valor}); $ (cloneLement) .appendto (formulario); } formulario de retorno;}, ajaxFileUpload: function (s) {// toDo introducir configuraciones globales, permitiendo al cliente modificarlas para todas las solicitudes, no solo el tiempo de espera s = jQuery.extend ({}, jQuery.AJAXSETTINGS, S); var id = new date (). getTime () var form = jQuery.createuploadform (id, s.FileElementId); if (s.data) form = jQuery.AdDoTherRequestStoForm (form, s.data); var io = jQuery.CreateUploadiframe (id, S.Secureuri);La parte de marcado rojo es lo que agregué. De esta manera, puedo pasar parámetros adicionales en la sección HTML en primer plano a través del código como a continuación:
URL: 'doajaxfileupload.php', // El servidor donde maneja la carga de archivos
Secureuri: falso, // El valor de identificación correspondiente al archivo en el código de procesamiento de la página
Datos: {'test': 'test', 'ok': 'ok'}, // pasado en un objeto, y la parte de contenido puede ingresar el valor variable de JavaScript
FileElementId: 'IMG',
El script de procesamiento de fondo es:
array_push ($ _ archivos, $ _ request); $ file_info = var_export ($ _ archivos, true); $ ok = file_put_contents ("../ adjunte/file_info.txt", $ file_info); if ($ ok) exit (json_encode ('file_infor' => '' ibitado ')));)));)));)););)); EXIT (JSON_ENCODE ('FILE_INFOR' => 'FUENTA DE LA COMPACIÓN'));Se puede ver que el principio es muy simple, que es agregar el contenido adicional del objeto de datos al formulario bajo el iframe, pasarlo al script PHP de fondo y obtener estos valores con variables como $ _Request.
El contenido file_info.txt retenido en la salida de fondo es el siguiente:
matriz (
'Archivo' =>
matriz (
'Nombre' => 'Firefox-Java.txt',
'type' => 'Text/Plain',
'tmp_name' => 'd: //tools//xAMPP//tmp//phped45.tmp',
'Error' => 0,
'tamaño' => 250,
),
0 =>
matriz (
'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 (typefeFi 'boolean') {io.src = 'javaScript: false';} else if (typeof uri == 'string') {io.src = uri;}} else {var io = document.createElement ('iframe'); io.id = io.name = frameID;} io.style.position = 'iframe'); io.id = io.name = frameID;} io.style.position = 'iframe'); io.id = io.name = frameid;} iO.style.position = 'iframe'); io.id = IO. IO.NAME = FrameID;} Io.Style.position = 'Abshive'; '-1000px'; io.style.left = '-1000px'; formid + '"id ="' + formid + '"enctype =" multipart/form-data "> </form>'); var OldElement = $ ('#' + fileElementId); var newelement = $ (Oldelement) .Clone (); $ (Oldelement) .attr ('id', fileID); $ (Oldelement) .BeFore (NewElement); $ ((Oldelement) .attr ('id', fileID); $ (Oldelement) .BeFore (Newelement); // establecer atributos $ (form) .css ('posición', 'absoluto'); $ (formulario) .css ('top', '-1200px'); $ (formulario) .css ('izquierda', '-1200px'); $ (formulario) .appendTo ('cuerpo'); formulario de retorno; }, addotherRequestStoForm: function (form, data) {// Agregar parámetro adicional var originaleLement = $ ('<input type = "Hidden" name = "" valor = "">'); for (clave var en datos) {name = key; valor = data [clave]; var cloneElement = originalElement.clone (); cloneElement.Attr ({'name': nombre, 'valor': valor}); $ (cloneLement) .appendto (formulario); } formulario de retorno; }, AjaxFileUpload: function (s) {// toDo introducir configuraciones globales, permitiendo al cliente modificarlas para todas las solicitudes, no solo el tiempo de espera s = jquery.extend ({}, jquery.ajaxsettings, s); var id = new date (). getTime () var form = jQuery.createuploadform (id, s.FileElementId); if (s.data) form = jQuery.AdDoTherRequestStoForm (form, s.data); var io = jQuery.CreateUploadiframe (id, S.Secureuri); var frameID = 'Juploadframe' + id; var formid = 'Juploadform' + id; // Esté atento a un nuevo conjunto de solicitudes if (s.global &&! JQuery.active ++) {jquery.event.trigger ("AjaxStart"); } var requestdone = false; // Cree el objeto de solicitud var xml = {} if (s.global) jquery.event.Rigger ("ajaxsend", [xml, s]); // Espere una respuesta para volver var uploadCallback = function (isTimeout) {var io = document.getElementById (frameID); try {if (io.contentwindow) {xml.responsetext = io.contentwindow.document.body? Io.contententwindow.document.innerhtml: neoul xml.Responsexml = io.contentwindow.document.xmlDocument? io.contentwindow.document.xmlDocument: io.contentwindow.document; } else if (io.contentDocument) {xml.responsetext = 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, nulo, e); } if (xml || iStimeOut == "Tiempo de espera") {requestDone = true; var; var; try {status = isTimeOut! = "timeout"? "éxito": "Error"; // Asegúrese de que la solicitud fuera exitosa o noModifiedif (status! = "Error") {// Procese los datos (ejecuta el XML a través de httpdata independientemente de la devolución de llamada) var data = jQuery.uploadhttpdata (XML, s.datateType); // Si se especificó una devolución de llamada local, la dispare y lo pase el DataIf (S.Success) S.Success (Data, Status); // dispara la llamada global (s.global) jquery.event.Rigger ("ajaxsuccess", [xml, s]);} elsejquery.handleerrer (s, xml, status);} captura (status) {status = {status = {status = {status = {status] "Error"; jQuery.handleError (s, xml, status, e);} // La solicitud fue completa (s.global) jquery.event.trigger ("ajaxcomplete", [xml, s]); // manejar el contador global Ajax (s.global &&! --Jquery.active) jquery.event.trigger ("ajaxstop"); // Resultado del proceso (s.complete) s.complete (xml, status); 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 () {// verifique si la solicitud todavía está sucediendo (! SolicDDone) uploadCallback ("timeout");}, s.timeout); } try {// var io = $ ('#' + frameID); var form = $ ('#' + formid); $ (formulario) .attr ('Action', s.url); $ (formulario) .attr ('método', 'post'); $ (formulario) .Attr ('objetivo', frameId); if (form.encoding) {form.encoding = 'multipart/form-data'; } else {form.enctype = 'multipart/form-data';} $ (form) .submit (); } catch (e) {jQuery.handleerror (s, xml, nulo, e); } if (window.attachevent) {document.getElementById (frameID) .attachevent ('onload', uploadCallback); } else {document.getElementById (frameId) .adDeventListener ('load', uploadCallback, falso); } return {abort: functer () {}}; }, uploadHttpData: function (r, type) {var data =! type; data = type == "xml" || datos ? R.Responsexml: R.Responsetext; // Si el tipo es "script", evalúoelo en contexto global if (type == "script") jQuery.globaleval (datos); // Obtener el objeto JavaScript, si se usa JSON. if (type == "json") eval ("data =" + data); // Evaluar los scripts dentro de html if (type == "html") jQuery ("<div>"). html (data) .evalscripts (); // alert ($ ('param', data) .each (function () {alert ($ (this) .attr ('value'));})); devolver datos; }})