Seja PHP ou outros scripts do lado do servidor, eles fornecem função de upload de arquivos, que é relativamente simples de implementar. Usando JavaScript para cooperar, o upload do arquivo AJAX pode ser realizado. Embora o próprio jQuery não forneça funções simplificadas, existem muitos plug-ins que podem ser implementados. Entre eles, ajaxfileupload.js fornecido pelo Phpletter.com é um plug-in leve, e o método de escrita é muito semelhante ao método global $ .post () fornecido pelo jQuery e é simples e fácil de usar.
No entanto, esse plug-in é muito simplificado. Além de fornecer o caminho para o upload de arquivos, ele não pode passar valores adicionais para o servidor em segundo plano. Então, modifiquei o script e adicionei um parâmetro de objeto de dados.
1. Princípio
Estou usando o PHP como um script do lado do servidor aqui. Quase todos os livros com menos PHP mencionarão como usar o método move_uploaded_file () para fazer upload de arquivos, não entrarei em detalhes aqui. O que eu quero dizer é usar o princípio do upload do Ajax.
Como tenho usado a biblioteca jQuery, quando penso no Ajax, minha primeira reação é experimentar o método $ .post (), usar cada seletor para obter o valor do valor na caixa de arquivos e enviá -lo ao servidor de segundo plano. Claro, aconteceu que isso não era possível. (Por causa desse problema, também verifiquei muitas informações e forneci muitos scripts, como asp na Internet. Eu realmente não sei o que dizer.)
De volta ao tópico, na verdade não é difícil fazer upload do Ajax e há muitos métodos. O plug -in AjaxfileUpload.js para phpletter.com mencionado neste artigo é a maneira de usar o iframes. Este também é um método comum ao fazer o upload sem atualizar a página sem usar scripts JavaScript. (Este método é usado para escrever logs no fundo do blog deste blog)
O plug-in AjaxFileUpload.js também é muito simples. Ele usa primeiro o seletor de jQuery para obter o valor do caminho do arquivo na caixa de upload de arquivos, depois criar um iFrame dinamicamente e criar uma nova caixa de arquivo dentro, fornecendo um método de postagem para enviá -lo ao plano de fundo. Finalmente, retorne aos resultados para a recepção.
2. Use
O uso do plug -in AjaxFileUpload.js é muito simples.
O código HTML da recepção é semelhante:
<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', // Retorno Tipo de dados: texto, xml, json, html, scritp, jsonp cinco sucessos: function (dados) {alert (data.file_infor); ajaxfileUpload (); "> upload </button>Antecedentes doajaxfileupload.php script:
<? php $ upFilePath = "../Attachment/";$ok=@move_uploaded_file($_files['iMg'thor'thy-'tmp_name'themonges. if ($ ok === false) {echo json_encode ('file_infor' => 'upload falhou'); } else {echo json_encode ('file_infor' => 'carregado com sucesso'); }?>Para testes, você pode salvar o valor variável passado de maneira semelhante ao seguinte:
$ file_info = var_export ($ _ arquivos, true);
$ ok = file_put_contents ("../ anexamento/file_info.txt", $ file_info);
if ($ ok) exit (json_encode ('file_infor' => 'carregado com sucesso');
saída (json_encode ('file_infor' => 'upload falhou'));
※ Perceber
Observe as marcas na caixa de arquivo de código HTML:
1. ID = 'IMG' é usado para identificar o FileElementId: 'IMG' do plug -in AjaxfileUpload.js. O seletor de jQuery usará esta string para obter o valor da caixa de texto;
2. Nome = 'img' é usado para ler os dados do arquivo carregado através de $ _files ['img'] ao enviá -los para um script de segundo plano através da postagem. Se esse valor não estiver disponível, a variável $ _Files estará vazia;
Portanto, esses dois valores são indispensáveis e não podem ser confundidos.
3. Apoie parâmetros adicionais
Às vezes, precisamos lidar com arquivos carregados com base em determinadas variáveis em segundo plano. Por exemplo, atualize o arquivo. Neste momento, você precisa passar alguns parâmetros adicionais para o mesmo estágio. Então, eu modifiquei o plugin AjaxfileUpload.js:
addotherRequestStoForm: function (form, dados) {// Adicione parâmetro extra var originalElement = $ ('<input type = "hidden" name = "" value = "">'); para (tecla var em dados) {name = key; valor = dados [chave]; var cloneElement = originalElement.Clone (); cloneElement.attr ({'nome': nome, 'value': value}); $ (CLONEELEMENT) .APNENDTO (form); } Return Form;}, AjaxFileUpload: funções {// TODO Introduzir configurações globais, permitindo que o cliente as modifique para todas as solicitações, não apenas o tempo limite s = jQuery.extend ({}, jQuery.ajaxSettings, s); var id = new Date (). getTime () var form = jQuery.createUploadform (id, s.fileElementId); if (s.data) forma = jQuery.adDotherRequestStoform (forma, s.data); var io = jQuery.createUploadiframe (id, s.secureuri);A parte de marcação vermelha é o que eu adicionei. Dessa forma, posso passar parâmetros adicionais na seção HTML em primeiro plano através do código como abaixo:
URL: 'doajaxfileupload.php', // o servidor onde você lida com arquivos de upload
Secureuri: false, // o valor de identificação correspondente ao arquivo no código de processamento da página
Dados: {'test': 'test', 'ok': 'ok'}, // passado em um objeto, e a parte do conteúdo pode inserir o valor variável do JavaScript
fileElementId: 'img',
O script de processamento de fundo é:
array_push($_FILES,$_REQUEST);$file_info = var_export($_FILES,true);$ok = file_put_contents("../attachment/file_info.txt",$file_info);if ($ok) exit(json_encode('file_infor'=>'Uploaded successfully')); saída (json_encode ('file_infor' => 'upload falhou'));Pode -se observar que o princípio é muito simples, que é adicionar o conteúdo adicional do objeto de dados ao formulário no iFrame, transmiti -lo para o script PHP em segundo plano e obter esses valores com variáveis como $ _Request.
O conteúdo file_info.txt retido na saída em segundo plano é o seguinte:
variedade (
'arquivo' =>
variedade (
'Nome' => 'Firefox-Java.txt',
'type' => 'texto/simples',
'tmp_name' => 'd: //tools//xampp//tmp//phped45.tmp',
'erro' => 0,
'tamanho' => 250,
),
0 =>
variedade (
'teste' => 'teste',
'ok' => 'ok',
'Phpsessid' => 'e379fd4fb2abca6e802a1302805a5535',
),
)
ajaxfileupload.js:
JQuery.Extend ({CREATEPLOADIFRAME: function (id, uri) {// Crie frameVar frameId = 'juploadframe' + id; if (window.activexObject) {var iO = document.createElement ('<ifram id = "' + frameId + 'name ="' + estrutura + " 'boolean') {io.src = 'javascript: false';} else if (typeof uri == 'string') {io.src = uri;}} else {var iO.st.Clocument.CreateElement ('ifRame'); io.id = estrutura; io.name = estrutura; = -1000px '; io.style.left =' -1000px '; + formID + '"id ="' + formid + '"Enctype =" Multipart/form-dados "> </morm>'); var OldElement = $ ('#' + fileElementId); var newElement = $ (OldElement) .clone (); $ (OldElement) .Attr ('id', fileid); $ (). $ (OldElement) .Appendto (form); $ (form) .css ('top', '-1200px'); $ (form) .css ('esquerda', '-1200px'); $ (form) .appendto ('corpo'); forma de retorno; }, addotherRequestStoform: function (form, dados) {// Adicione parâmetro extra var originalElement = $ ('<input type = "hidden" name = "" value = "">'); para (tecla var em dados) {name = key; valor = dados [chave]; var cloneElement = originalElement.Clone (); cloneElement.attr ({'nome': nome, 'value': value}); $ (CLONEELEMENT) .APNENDTO (form); } Retornar formulário; }, AjaxFileUpload: funções {// TODO Apresenta configurações globais, permitindo que o cliente as modifique para todas as solicitações, não apenas o tempo limite s = jQuery.extend ({}, jQuery.ajaxSettings, s); var id = new Date (). getTime () var form = jQuery.createUploadform (id, s.fileElementId); if (s.data) forma = jQuery.adDotherRequestStoform (forma, s.data); var io = jQuery.createUploadiframe (id, s.secureuri); var frameID = 'juploadframe' + id; var formID = 'juploadform' + id; // observe um novo conjunto de solicitações se (s.global &&! Jquery.active ++) {jquery.event.trigger ("ajaxstart"); } var requestDone = false; // Crie o objeto de solicitação var xml = {} if (s.global) jQuery.Event.Trigger ("Ajaxsend", [xml, s]); // aguarde a resposta voltar var uploadCallback = function (isTimeout) {var io = document.getElementById (frameId); tente {if (io.contentWindow) {xml.Responsext = io.contentwindow.document.bumphinin; 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, null, e); } if (xml || isTimeout == "timeout") {requestDone = true; var status; try {status = isTimeout! = "Timeout"? "Sucesso": "Erro"; // Verifique se a solicitação foi bem -sucedida ou não modificada (status! = "Error") {// Processe os dados (executa o XML através do httpdata, independentemente do chamada) var data = jQuery.uploadhttpdata (xml, s.datype); // Se um retorno de chamada local foi especificado, dispare -o e passe os dados (s.success) s.success (dados, status); // disparar o chamado de chamada global (slglobal) jQuery.Event.Trigger ("ajaxSuccess", [xml, s]);} mais; "Error"; jQuery.HandleError (S, xml, status, e);} // A solicitação foi concluída (s.global) jQuery.Event.Trigger ("AjaxComplete", [xml, s]); // lidera o Ajax Global Ajax (S.Global &&! --Jquery.active) jQuery.event.Trigger ("Ajaxstop"); // Resultado do processo (s.complete) s.complete (xml, status); jQuery (io) .unbind () setTimeout (function () {try {$ (io) .remove (); $ (form) .remove ();} catch (e) {jQuery.HandleError (s, s, xml, null, e);}}, (100) xml = nul. {setTimeout (function () {// Verifique para ver se a solicitação ainda está acontecendo (! requestDone) uploadCallback ("timeout");}, s.Timeout); } tente {// var io = $ ('#' + frameID); var form = $ ('#' + formid); $ (form) .attr ('ação', s.url); $ (form) .attr ('método', 'post'); $ (form) .Attr ('Target', 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) .ttachevent ('onload', uploadCallback); } else {document.getElementById (frameId) .addeventListener ('load', uploadCallback, false); } return {abort: function () {}}; }, uploadhttpdata: function (r, tipo) {var data =! type; dados = tipo == "xml" || dados ? R.Responsexml: R.SponseText; // Se o tipo for "script", avalie -o no contexto global se (tipo == "script") jQuery.globaleVal (dados); // Obtenha o objeto JavaScript, se o JSON for usado. if (type == "json") avaliar ("data =" + dados); // Avalie os scripts dentro de html if (type == "html") jQuery ("<div>"). html (dados) .evalcripts (); // alert ($ ('param', dados) .Each (function () {alert ($ (this) .attr ('value'));})); retornar dados; }})