HTML5 Arquivo de implementação Função de upload assíncrona

A função de upload do arquivo de desenvolvimento nunca foi uma coisa agradável, e é ainda mais para o upload de uploads assíncronos. Este artigo usa brevemente o FormData do HTML5 para implementar o upload assíncrono de arquivos e também pode obter barras de entrada de upload e verificação do tamanho do arquivo. O servidor usa o esquema Springmvc para processamento.

 <Formulário de formulário = myform> <type de entrada = ID do arquivo = u_photo name = u_photo/> <tipo de entrada = botão id = submmit-btn value = upload/> </morm>

 $ (#Envie-se-btn) .on ('clique', function () {$ .ajax ({url:/test/upload, type: post, dados: new formData ($ (#myform) .get (0)) , // é muito importante.

O controle do tamanho do arquivo e do comportamento correspondente precisam ser processados ​​por si só, conforme necessário.

 $ ('#u_photo'). }}});

Adicione XHR ao método AJAX para controlar o progresso do upload. Mostrar e ocultar a barra de progresso precisa ser processada por si só.

 Xhr: function () {var myxhr = $ .ajaxSettings.xhr (); .attr ({value: e.loaded, max: e.total,});}}, false);} retornar myxhr;}

 <Depencency> <GroupId> Commons-Io </proupid> <TRAFACTID> Commons-Io </stifactId> <Versão> </version> </dependency> <voundid> Commons- FileUpload </foupid> <TRTIFACTID> Commons-FileUpload </ArtifactId> <versão> 1.3.2 </sisters> </pendencency>

 <ID do bean = multipartresolver class = org.springframework.web.multipart.commonsmonsmultipresolver />

O programa de exemplo não fornece o código correspondente para verificação, armazenamento e processamento de arquivos.

 @RequestMapping (Valor =/Test/Upload, Method = RequestMethod.Post) @ResponseBodyPublic String Upload (@RequestParam (u_photo) MultipartFile _photo) {System.out.println (u_photo =+u_photo.getsize ());

IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

Se você não estiver satisfeito com o plano acima, é recomendável usar as seguintes soluções:

Upload de arquivo jQuery

O acima é a função de upload assíncrona do arquivo de implementação HTML5 introduzido pelo Xiaobian. Muito obrigado pelo seu apoio ao site VevB Wulin!