Este artigo compartilha três métodos de upload assíncronos Java para sua referência. O conteúdo específico é o seguinte
O primeiro método a ser enviado usando um plug-in do navegador requer uma determinada habilidade de codificação subjacente. Não vou falar sobre isso aqui, para não enganar os filhos das pessoas. Se você colocar isso em consideração, poderá Baidu por conta própria.
O segundo tipo usa um iframe oculto para simular uploads assíncronos . Por que estamos falando de simulação aqui? Como colocamos o resultado de retorno em um iframe oculto, por isso não fizemos o salto atual da página, o que parecia uma operação assíncrona.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> arquivo de upload iframe oculto action = "/upload2" ENCTYPE = "Multipart/Form-Data" Method = "Post" Target = "Frm" OnsubMit = "Carregamento (true);"> <P ID = "Upfile"> Anexamento: <input Type = "File" Name = "MyFile" Style = "Display: Inline"> </P> <p id = "Nome" " style = "preenchimento-esquerda: 50px; preenchimento-right: 50px;" type = "submite" value = "assíncrono upload"> <span id = "uptxt" style = "display: nenhum"> upload ... </span> </p> </morm> <div id = "flist" style = "borda: 1px escuro escuro; carregamento (falso); } função addToflist (fname) {var temp = ["<p id = '" + fname + "'>", fname ", <button onclick = 'delfile (/" " + fname +"/");'> excluir </butão>", "</p>"]; $ ("#flist"). Anexe (temp.join ("" "));} Função Carregando (ShowLoading) {if (ShowLoading) {$ ("#uptxt "). show (); } else {$ ("#uptxt"). hide; }} </script> </body> </html> Existem dois pontos -chave nesta tecnologia:
1. A forma especificará o destino e o resultado enviado será retornado ao iframe oculto. (ou seja, o destino do formulário é consistente com o atributo de nome do iframe).
2. Após a conclusão do envio, a página no iframe se comunica com a página principal. Como notificar o resultado do upload e as informações do arquivo do servidor se comunicarem com a página principal?
Depois de receber o arquivo, usamos o NodeJS para retornar um método definido pelo Window.parent. Página principal. Após a execução, podemos saber que o upload do arquivo foi concluído. O código é muito simples:
router.post ('/upload2', multipartmiddleware, function (req, res) {var fpath = req.files.myfile.path; var fname = fpath.substr (fpath.LastIndexof ('//') + 1); settimeout (função {var ret = ["<script>" "." "');", "</cript>"]; Após a execução, você pode abrir a opção Desenvolvedor e descobrirá que alguns dados retornados do iframe oculto são retornados.
O terceiro tipo usa xmlHttPrequest2 para uploads assíncronos reais .
Ou poste o código primeiro:
Após a execução, você pode abrir a opção Desenvolvedor e descobrirá que alguns dados retornados do iframe oculto são retornados. O terceiro tipo usa xmlHttPrequest2 para uploads assíncronos reais. Vamos postar o código primeiro:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> xhr nível2 upload assíncrono </titit> <script type = "text/javascript" src = "jQuery Path ..."> </script> </head> <body> <div> id = "myfile" style = "display: inline"> </p> <p id = "upbtn"> <input style = "preenchimento-left: 50px; preenchimento-right: 50px;" type = "botão" value = "assíncrono upload" onclick = "upload;"> <span id = "uptxt" style = "display: nenhum"> upload ... </span> <span id = "upprog"> </span> <butt> <butt id = "stopbtn" style = "tisão: nenhum; DarkGray; "> </div> <cript> função upload {// 1. Prepare formData var fd = new FormData; fd.append ("myfile", $ ("#myfile") [0] .Files [0]); // Crie o objeto xhr var xhr = novo xmlHttPrequest; // Ouça o status e responda em tempo real // xhr e xhr.Upload têm eventos de progresso, xhr.progress é o progresso do download, xhr.upload.progress é o progresso do upload xhr.Upload.OnProgress = function (event) {if Event.Lengthcomputable). console.log ('%d%', porcentagem); $ ("#upprog"). Texto (porcentagem); }}; // Evento de início de transmissão xhr.onloadstart = function (event) {console.log ('load start'); $ ("#upprog"). text ('start upload'); $ ("#stopbtn"). um ('clique', função {xhr.abort; $ (this) .hide ();}); carregamento (verdadeiro); }; // O processo AJAX concluiu com êxito o evento xhr.onload = function (event) {console.log ('load sucel'); $ ("#upprog"). Texto ('Sucesso de upload'); console.log (XHR.RESPONSETEXT); var ret = json.parse (xhr.ProSeText); addToflist (ret.fname); }; // Um evento de erro ocorreu no processo Ajax xhr.onerror = function (event) {console.log ('error'); $ ("#upprog"). Texto ('Ocorreu o erro'); }; // ajax é cancelado xhr.onabort = function (event) {console.log ('abort'); $ ("#upprog"). Texto ('Operação foi cancelada'); }; // A transmissão de carga termina e será acionada independentemente do sucesso ou falha xhr.onloadend = function (event) {console.log ('carregamento final'); carregamento (falso); }; // inicia uma solicitação de Ajax para transmitir dados xhr.open ('post', '/upload3', true); xhr.send (fd); } função addToflist (fname) {var temp = ["<p id = '" + fname + "'>", fname ", <button onclick = 'delfile (/" " + fname +"/");'> excluir </butão>", "</p>"]; $ ("#flist"). Anexe (temp.join ("")); } função delfile (fname) {console.log ('para excluir o arquivo:' + fname); // TODO: Por favor, implemente} Função Carregando (ShowLoading) {if (ShowLoading) {$ ("#uptxt"). Show (); $ ("#stopbtn"). show (); } else {$ ("#uptxt"). hide (); $ ("#stopbtn"). hide (); }} </script> </body> </html> Há muito código, mas é fácil de entender. Qualquer pessoa que tenha usado o AJAX sabe que os objetos XHR fornecem um método de retorno de chamada para ouvir o processo de retorno para ouvir todo o processo de solicitação/resposta. Existem vários outros eventos de progresso na especificação XMLHTTPREQUEST Nível 2. Existem 6 eventos abaixo:
1.LoadStart: acionado quando o primeiro byte dos dados de resposta é recebido.
2.Progress: é acionado continuamente durante a recepção da resposta.
3.Error: acionado quando ocorre um erro na solicitação.
4.Abort: acionado quando a conexão é encerrada devido a chamar o método de aborto.
5. Carregue: acionado quando os dados completos de resposta são recebidos.
6.Loadend: acionado após a conclusão da comunicação ou o erro, abortar, eventos de carga são acionados.
Desta vez, podemos interpretar o código: quando o evento de transmissão é iniciado, adicionamos um evento de clique no botão Stop Transmission e o método de aborto embutido pode interromper a transmissão. Se você não clicar, ele será carregado normalmente até que a transmissão seja concluída. Seu código de segundo plano é semelhante ao segundo método.
Os três métodos têm suas próprias vantagens e desvantagens, vamos fazer um resumo simples.
Os controles de terceiros têm boa interatividade e controlabilidade, porque estão próximos da camada inferior e seu desempenho também é excelente. No entanto, como é difícil escrever, você geralmente precisa instalar os plug-ins e, às vezes, pode precisar escrevê-los.
Pessoalmente, acho que o método oculto do iframe é um método muito atencioso. O Iframe pode nos ajudar a fazer muitas coisas. Essa abordagem possui uma extensa compatibilidade do navegador e não exige que os plugins sejam instalados. No entanto, possui baixa interatividade, processo de upload incontrolável e seu desempenho também é muito médio.
Para upload de Ajax puro de nível XHR2, ele deve ter um navegador com uma versão superior (IE9+). Mas tem uma interatividade muito boa, você pode ver o progresso do upload e é controlável.
O desenvolvimento pode ser feito de maneira diferente de acordo com os requisitos. Pessoalmente, acho que o upload desses arquivos, especialmente o segundo, fornece uma espécie de idéia, que utiliza totalmente as características de certas tags HTML, pode ser algo que nossos desenvolvedores precisam pensar mais.
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.