Como implementar o upload assíncrono de imagens no Java WebApp, primeiro entenda os seguintes problemas:
1. Carregue a imagem;
2. Visualização de upload da imagem;
3. Carregue a imagem e altere o endereço e adicione -a ao banco de dados de forma assíncrona;
Conteúdo principal <Br /> Este exemplo usa principalmente o código de front-end HTML e JavaScript puro como ferramentas para consultar os exemplos de código de demos que implementam o upload de imagem:
(1) Clique no código DIV para fazer upload da imagem:
<div id = "div1"> <input type = "file" id = "escolha" aceite = "image/*" múltiplo> <a id = "upload"> faça upload da imagem </a> <a onclick = "selectphoto ();"> selecione na galeria </a> <a id = "back"> cancel
(2) Código JavaScript
<script type = "text/javascript"> // Obtenha o elemento de formulário de entrada da imagem carregada var filechooser = document.getElementById ("escolha"); // Crie tela para comprimir a imagem var tela = document.createElement ("tela"); // Obtenha o atributo visual de tela var ctx = Canvas.getContext ('2D'); // tela de telha var tcanvas = document.CreateElement ("Canvas"); var tctx = tcanvas.getContext ("2D"); // tamanho da tela var maxsize = 100 * 1024; // upload O evento de clique na imagem $ ("#upload"). On ("clique", function () {filechooser.click ();}) .on ("touchstart", function () {// adicionar o elemento atributo $ (this) .addclass ("touch");}). ("Touthend", function (). }); // O elemento altera o FileChooser.onchange = function () {// Se a seleção estiver vazia, retorne a operação se (! This.files.length) retornar; // Crie a matriz de imagens carregadas var arquivos = array.prototype.slice.call (this.files); // Quando o número é superior a 1 imagem, operação reversa, definida aqui de acordo com os requisitos; O lado do PC pode fazer upload de várias imagens de cada vez e selecionar uma no lado móvel, e apenas uma página pode ser visualizada. Como é um terminal móvel, esse julgamento é feito. if (files.length> 1) {alert ("apenas 1 imagem pode ser carregada por vez"); retornar; } // Transfira a matriz de arquivos de fotos carregadas, você pode apenas levá -lo sem atravessar. files.ForEach (function (arquivo, i) {// JULGE O formato da imagem se (! /// (?: jpeg | png | gif) /i.test (file.type)) return; var leitor = new FileReader (); var li = document.CreateElement ("li"); // obtenha o tamanho da imagem vars =.size/File 414; 1024))/10 + mb ": ~~ (file.size/1024) +" kb "; this.result; var img = new Image(); img.src = result; //The image display $(li).css("background-image", "url(" + result + ")"); //If the image size is less than 100kb, upload directly if (result.length <= maxsize) { img = null; upload(result, file.type, $(li)); return; }// Depois que a imagem é carregada, compacta -a e faça o upload de (IMG.COMPLE) {); }); }; // o seguinte está relacionado à compactação de imagem; // use tela para compactar (img) {var initsize = img.src.length; var largura = img.width; var de altura = img.Height; // Se a imagem for maior que quatro megapixels, calcule a taxa de compressão e pressione o tamanho para menos de 4 milhões de VAR; if ((razão = largura * altura / 4000000)> 1) {ratio = math.sqrt (razão); largura /= relação; altura /= razão; } else {ratio = 1; } canvas.width = width; canvas.Height = altura; // espalhe o plano de fundo ctx.fillstyle = "#fff"; ctx.fillRect (0, 0, Canvas.Width, Canvas.Height); // Se o pixel da imagem for maior que 1 milhão, use o ladrilho para desenhar contagem de var; if ((contagem = largura * altura / 1000000)> 1) {count = ~~ (math.sqrt (contagem) + 1); // calcule quantas ladrilhos a serem divididos em // calcule a largura e a altura de cada peito var nw = ~~ (largura /contagem); var NH = ~~ (altura / contagem); tcanvas.width = nw; tcanvas.Height = NH; para (var i = 0; i <contagem; i ++) {for (var j = 0; j <count; j ++) {tctx.drawimage (img, i * nw *, ratio j * nh *, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.drawimage (tcanvas, i * nw, j * nh, nw, nh); }}} else {ctx.drawimage (img, 0, 0, largura, altura); } // Execute a compressão mínima var ndata = Canvas.todataurl ('image/jpeg', 0.1); console.log ('antes da compressão:' + initsize); console.log ('Após a compressão:' + ndata.length); console.log ('taxa de compressão:' + ~~ (100 * (initsize - ndata.length) / initsize) + "%"); tcanvas.width = tcanvas.Height = Canvas.width = Canvas.Height = 0; retornar ndata; } // Carregar a figura, converta a imagem Base64 em um objeto binário, encha em formdados para fazer upload de upload da função (bashetSet, tipo, $ li) {var text = window.atob (bashetSet.split (",") [1]); var buffer = new uint8array (text.length); var prime = 0, loop = null; for (var i = 0; i <text.length; i ++) {buffer [i] = text.charcodeat (i); } var blob = getBlob ([buffer], tipo); var xhr = novo xmlHttPrequest (); var formData = getFormData (); formData.append ('upload', blob); // Solicitação assíncrona para fazer upload de imagens do plug -in do Kindeditor JSP Página xhr.open ('post', '<%= request.getContextPath ()%>/Kindeditor/jsp/upload_json.jsp'); xhr.onreadyStateChange = function () {if (xhr.readyState == 4 && xhr.status == 200) {// retorna o endereço da imagem no lado do servidor var face_img = xhr.roSponsetext; var id = $ ("#arid"). text (); // Assíncrona Adicione a imagem $ .ajax ({type: "post", // Solte de forma assíncrona a classe de ação de Struts para inserir o endereço da imagem no uRL do banco de dados: "add_article_faceurl.action", idatype: "json", dados: "faceurl ="+face_iMg+"& ids = idatype:" Relacionado à imagem no banco de dados e armazene -a na área oculta $ ("#ARID"). Texto (msg); }}; // OPRESSO DE ALGULO ENVIADO EXPERIGIDO DO ARJUSTO // Dados Enviando progresso, os primeiros 50% exibem o progresso xhr.upload.addeventListener ('Progress', function (e) {if (loop) return; prime = ~~ (100 * E. PET/E.Total)/2; $ li.Find (". Progress Span"). MockProgress ();}}, false); // Pesquise 50% da função de progresso da simulação de uso de dados Função MockProgress () {if (loop) return; loop = setInterval (function () {cement ++; $ li.find (". Progresso Span"). css ('width', prime+"%"); if (pecent == 99) {clearInterval (loop);}}, 100); } xhr.send (formData); } / ** * Obtenha a redação de compatibilidade dos objetos do blob * @param buffer * @param format * @returns { *} * / function getBlob (buffer, formato) {tente {return new Blob (buffer, {type: format}); } catch (e) {var bb = new (window.blobbuilder || window.webkitblobbuilder || window.msblobbuilder); buffer.foreach (function (buf) {bb.append (buf);}); retornar bb.getblob (formato); }} / ** * Obtenha formData * / function getFormData () {var isNeedShim = ~ Navigator.UserAgent.Indexof ('Android') && ~ Navigator.VENDOR.Indexof ('Google') &&! Navigator.UserAgent.Match (/AppleWebkit // (/d+)/). Pop () <= 534; retornar isneedshim? new FormDatashim (): new FormData (); } / *** FormData Patch, Patch Máquinas Android que não suportam formsData Upload Blobs* @Constructor* / função formDatashim () {console.warn ('usando formdata shim'); var o = this, partes = [], limite = matriz (21) .Join ('-') + ( + new Date () * (1e16 * math.random ())). this.append = function (nome, valor, nome do arquivo) {parts.push ('-' + limite + '/r/content-disposição: form-data; name = "' + name + '"'); if (Instância do valor de blob) {Parts.push ('; filename = "' + (nome do arquivo || 'blob') + '"/r/NContent-type:' + value.type + '/r/n/r/n'); parts.push (valor); } else {parte.push ('/r/n/r/n' + valor); } partes.push ('/r/n'); }; // Substituir xhr send () xmlhttprequest.prototype.send = function (val) {var fr, dados, oxhr = this; if (val === O) {// anexa as partes finais da sequência de limites.push ('-' + limite + '-/r/n'); // Crie os dados do blob = getBlob (partes); // Configure e leia o blob em uma matriz a ser enviada FR = new FileReader (); FR.ONLOAD = function () {OldSend.Call (oxhr, f.Result); }; FR.ONERROR = function (err) {tiro err; }; FR.ReReadasArrayBuffer (Data); // Defina o tipo de conteúdo multipart e Boudary this.setRequestHeader ('Content-Type', 'Multipart/Form-Data; limite =' + limite); XmlHttPrequest.prototype.send = OldSend; } else {Oldsend.call (this, val); }}; } </script>(3) O código relacionado à página JSP da imagem de upload do plug-in Kindeditor.
<%@ Page Language = "java" contentType = "text/html; charset = utf-8" pageEncoding = "utf-8"%> <%@ página import = "java.util.*, java.io.*"%> <%@ Page ("java.text.simpledAformat" import = "org.apache.commons.fileupload.*" %> < %@ página import = "org.apache.commons.fileupload.disk. import = "org.apache.struts2.dispatcher.multipart.multiparTreCestWrapper"%> <%@ página import = "org.json.simple. *"%> <%/** * Kindeditor JSP * * * Este programa JSP é um programa de demonstração e é recomendado para não usá -lo diretamente em projetos reais. * Se você tem certeza de usar este programa diretamente, confirme cuidadosamente as configurações de segurança relevantes antes de usá -lo. * * /// Arquivo Salvar caminho do diretório String string SalvePath = PageContext.getServletContext (). GetRealPath ("/") + "anexado/"; // String savepath = "http:///192.168.1.226:8080/ingslnbase/uploadfile/ alugfile; "D:/www/qslnadp/adp/webroot/Kindeditor/anexado/"; // Arquivo Salvar urlstring saveurl = request.getContextPath () + "/anexado/"; // define a extensão do arquivo que é permitida para ser carregada hashmap <string, exltmap = hashmap "GIF, JPG, JPEG, PNG, BMP, BLOB"); extmap.put ("Flash", "SWF, FLV"); extmap.put ("Media", "SWF, FLV, MP3, WAV, WMA, WMV, MID, AVI, MPG, ASF, RMM, RMVB") "Doc, docx, xls, xlsx, ppt, htm, html, txt, zip, rar, gz, bz2"); // tamanho máximo de arquivo maxsize = 1000000; resposta.setContentType ("text/html; charset = utf-8") se (! out.println (getError ("Selecione o arquivo.")); return;} // Verifique o arquivo do diretório uploaddir = novo arquivo (savePath); if (! uploaddir.isdirectory ()) {out.println (getError ("uploaddir.canwrite ())); return;} // Verifique as permissões de gravação do diretório se (! uploaddir.nonwrite ()) {out.println (getError (" uploaddir.no write ()) {out.println (getError ("uploaddir.no. request.getParameter ("dir"); return;} // Crie pasta salvath + = Dirname + "/"; saveurl + = Dirname + "/"; arquivo savedirfile = new File (savePath); if (! savedirfile.exists ()) {savedirfile.mkdirs ();} simpledEfformat sdf = new SimledateFormat ("yyyymmdd"); string ymd = sdf.format (new Date ()); salvespath (ymdPath + "/";; (! Dirfile.exists ()) {Dirfile.mkdirs ();} // struts2 Solicitar o wrapper Filtro multipartrechestwrapper wrapper = (multipartrechestwrapper) request; // obtê o nome do filtro de filtro de filtro do filtro do filtro); Tamanho do arquivo if (file.length ()> maxsize) {out.println (getError ("O tamanho do arquivo de upload excede o limite.")); return;} // Verifique a extensão String fileExt1 = FILENAME1.SUBSTRING (FILENAME1.LASTIndexOf (".") + 1) .TolowerCase (); // refactor o nome do arquivo de upload simpledEformat Df1 = new SimpledateFormat ("YyyyMyMMDDHHMMSSSs"; + novo aleatório (). nextInt (1000) + "." + FILEEXT1; BYTE [] buffer = novo byte [1024]; // Obtenha o arquivo de saída do arquivo FileOutputStream fos = new FileOutputStream (savePath + newFileName1); String url = SalvePath + NewFilename1; out.println (url); // obtiver o arquivo de entrada de corrente em Memory noputStream em = UPTSTream; while ((num = in.read (buffer))> 0) {fos.write (buffer, 0, num); }} catch (Exceção e) {e.printStackTrace (System.err);} finalmente {in.close (); fos.close ();}%> <%! Private String getError (string message) {jsonObject obj = new jsonObject (); obj.put ("erro", 1); obj.put ("mensagem", mensagem); retornar obj.tojSonstring ();}%> ( 4) O pacote JAR para fazer upload de fotos do Kindeditor é o seguinte
A.Commons-FileUpload -.2.1.jar
B.Commons-io-1.4.Jar
C.json_simple-1.1.jar
Não há código JS sobre Kindeditor usado aqui. Para obter detalhes, consulte: Informe: Função automática de upload de imagens automáticas.
(5) A div para fazer upload de fotos do Kindeditor é a seguinte
<div id = "div2"> <ul> <li id = "wy"> <img style = "altura: 100%; largura: 100%; posição: absoluto; topo: 0px;" src = "<%= request.getContextPath ()%>/shequ/imagens/index.png;" > </li> </ul> </div>
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.