Introdução ao upload da web
O WebUploader é um componente simples de upload de arquivos modernos, principalmente HTML5 e complementado pelo Flash desenvolvido pela equipe do Baidu Webfe (FEX). Nos navegadores modernos, podemos dar um jogo completo às vantagens do HTML5, sem abandonar os navegadores IE mainstream, e continuar a usar o tempo de execução do flash original e somos compatíveis com o IE6+, iOS 6+, Android 4+. Os dois conjuntos de tempo de execução, o mesmo método de chamada pode ser selecionado pelos usuários à vontade. O uso da fragmentação de arquivos grandes, o upload simultâneo, melhora bastante a eficiência do upload de arquivos.
Aqui usamos um exemplo do site oficial para fazer upload de nosso avatar pessoal.
Nosso foco está em como fazer upload de arquivos usando o WebUploader no projeto de inicialização da primavera, para que possamos implementar diretamente uma função simples apenas para referência.
Aqui está um exemplo baixado do site oficial: função de upload de imagens com o corte.
Usamos exemplos para remodelar os uploads de avatar no projeto.
O efeito se parece com o seguinte:
Primeiro, vamos remodelar nosso código de exemplo do WebUploader.
A seguir, alguns dos códigos do meu projeto:
(function (fábrica) {if (! window.jQuery) {alert ('jQuery é necessário. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Error ('WebPloader não suporta o navegador que você está usando.'); _.Deferred (); image.once ('complete', function () {var blob, size; // navegador de uc / qq móvel no modo sem imagem // ctx.getImagedata relatará uma exceção ao processar imagens grandes // index_size_err: dom. 'REMISTRA', Blob.size, tamanho); file._meta); Falso, se deve usar o modo de cultivo. $ .Trim ($ ("#base_url"). 'jpg, jpeg, png', // Resolva o Chrome do WebPloader Clique na caixa de seleção de arquivos de upload para atrasar alguns segundos antes que a resposta seja lenta mimetipos: 'Image/jpg, image/jpeg, image/png' // Modificar esta linha} //}; /Clunked: true, // shash // chunksize: 10 * 1024 * 1024, // shash size especifica // threads: 1, // número de threads // desabilleglobaldnd: true // desabilite (/4); }}); }); 'Uploadsuccess', função (arquivo) {ShowInfo ("Uploadsuccess"); file._info.width; ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- var btn = $ ('. upload-btn'); var isBase64Supported, retorno de chamada; $ image.cropper ({aspetratio: 4/4, visualizar: ".img-preview", feito: function (data) {// console.log (data);}}); função srcwrap (src, cb) {// precisamos verificar isso pela primeira vez. if (typeof isBase64Supported === 'Undefined') {(function () {var data = new Image (); var support = true; data.onload = data.onerror = function () {if (this.width! = 1 || this.height! }) (); } if (isBase64Supported) {cb (src); } else {// Caso contrário, precisamos de suporte ao servidor. // converte base64 em um arquivo. // $ .ajax ('', {// Método: 'post', // dados: src, // datatype: 'json' //}). done (function (resposta) {// if (resposta.result) {// cb (resposta.result); //}; }} btn.on ('click', function () {retorno de chamada && ($ image.cropper ("getData")); retorna false;}); Return {SetSource: function (src) {// manipulam base64 não suportado. // geralmente ocorre no IE6-II8 srcwrap (src, function (src) {$ image.cropper ("setImgsrc", src);}); container.RemoveClass ('webupLoader-element-invisible'); devolver isso; }, getImagesize: function () {var iMg = $ image.get (0); return {width: img.naturalwidth, altura: img.naturalheight}}, setCallback: function (cb) {chamada de chamada = cb; devolver isso; }, desativar: function () {$ image.cropper ("desabilitar"); devolver isso; }, habilitar: function () {$ image.cropper ("enable"); devolver isso; }}}}}) (); // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Uploader.crop (dados); Uploader.upload (); }); }); // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Existem também alguns códigos para a página:
Aqui está o código da parte do controlador:
@RequestMapping (value = "/student/studentImgfileUpload", método = requestmethod.post) @ResponsoBody String StudentImgfileUpload (@RequestParam MultipartFile File, httpServleTleTeQuest Solicy) {Logger.info ("AVATARENGAR AVATON ... Logger.info ("Nome do arquivo de upload:" + originalfilename) string realpath = request.getServletContext (). getRealPath ("/public/student/") string uploadFilename = System.currenttimemillis () + "_" + originalfilename logger.info ("get uP da" get uplroad " Arquivos RandomAccessFile RAFILE = NULL bufferInputStream inputStream = NULL Try {File Dirfile = new File (RealPath, UploadFilename) // Abra o arquivo de destino de uma maneira read-write rafile = novo RandomAccessFile (Dirfile, "RW") RAFILE.seek (Rafile.Ltra () (Dirfile, "RW") RAFILE.seek (Rafile.Ltra () (Dirfile, "RW") Rafile.seek (Rafile. byte [] buf = new byte [1024] int length = 0 while ((comprimento = inputStream.read (buf))! = -1) {rafile.write (buf, 0, comprimento)}}} (exceção) {flag = false logger.info "Erro de upload. (inputStream != null) { inputStream.close() } if (raFile != null) { raFile.close() } } catch(Exception e){ flag = false logger.info("Upload error:" + e.getMessage()) throw new IOException(e.getMessage()) } } }Isso simplesmente implementa a função de usar o WebUploader para upload de arquivo no projeto de inicialização da primavera.
Resumir
O exposto acima é a bota da primavera introduzida pelo editor. Ele usa o WebUploader para fazer upload de arquivos. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!