O primeiro projeto foi finalmente lançado. É uma plataforma de crowdfunding de bem -estar pública chamada Qinqingchou. A maioria das interfaces do WeChat, do computador e do back -end foi concluída por mim. Depois de alguns meses, sinto que ganhei muito e acho que preciso resumir.
A primeira coisa que vem à mente é a questão de fazer upload de imagens. Quando os dados do formulário geralmente são carregados pelo Ajax, é estúpido usar formulários para fazer upload de imagens. Então, naquele momento, eu não pensei em usar o plug -in do formulário jQuery.
A solução fornecida por um colega em segundo plano é escrever um formulário em um iframe e fazer o upload da imagem e enviar o formulário automaticamente. Ele pulará para o endereço da imagem no servidor para o URL da página e eu a interceptarei.
Solução 1: Iframe+formulário
<form action = "/user/uploadIdcard.do" Enctype = "Multipart/form-data" Method = "post"> <input type = "FILE" id = "uploadpic" name = "FILE"> <Label para = "Uploadpic" id = "FileBtn">+<img src = ""/> </> <input "type =" typet = "FileBtn">+<img src = ""/> </> <input "=" $ (". Turnurl").Introduzir um iframe na interface em que a imagem precisa ser carregada, chame o método iframe na biblioteca pública, obtenha o URL da imagem e exiba a imagem no iframe
Extrair // Extrair o caminho na função iframe iframe (el) {var baseurl = ""; var code, filepath; var de lugar = $ (el) [0] .contentWindow.Location.Search; console.Oath (Place); if (spot) {code = place.match (/code =/d+/) [0]. {filepath = place.match (/filepath =/s+/) [0] .substr (9);} $ (el) .Contents (). Find (". com sucesso '); $ (el) .contents (). encontre (". "206": $ (el) .Contents (). Find (". Tip"). Text ('Arquivo muito grande'); quebra; caso "207": $ (el) .Contents (). Find (".Solução 2: Mais tarde, descobri que havia dois problemas com essa abordagem. Uma era que as fotos enviadas pelo usuário eram muito grandes e o plano de fundo não a comprime (os colegas em segundo plano estavam muito ocupados. Para acomodá -los, nós o comprimimos no front -end).
A segunda é que, após o upload da imagem ser bem -sucedido, a imagem será exibida no iFrame, o que requer um certo tempo de reação. Às vezes, o usuário informa que a imagem não pode ser carregada, mas na verdade é apenas que o plano de fundo ainda não retornou ...
Então eu decidi enviá -lo para o plano de fundo usando base64
<input type = "file" id = "uploadpic" name = "file"> <gravador para = "uploadpic" id = "filebtn">+<img src = ""/> </etiqueta </span> Envie a imagem, o tamanho está dentro de 2m <br/> (o tipo de imagem pode ser jpg, jened, png, gif, gif, bp, bp, bp). 640*400 </span> <input type = "text" name = "turnurl"> <canvas id = "uploadImg" style = "display: nenhum"> </lvas>
A estrutura é semelhante à original, mas há uma tela extra
$ ("#UPLOUPPIC"). (!/image /// w+/. test (file.type)) {alert ("o arquivo deve ser uma imagem!"); retorna false;} var reader = new FileReader (); reader.readasDataurl (file); reader.onload = function = function = {CreateCanVas (this.Result); document.getElementById ("uploadImg"); var cxt = canvas.getContext ('2d'); canvas.width = 640; canvas.Height = 400; var iMg = new Image (); img.src = src; img.onload = function () {/ var w. canvas.width = w; // canvas.Height = h; cxt.drawimage (img, 0, 0,640.400); // cxt.drawimage (img, 0, 0); $ (". "/front/uploadbybase64.do",Type:" post ", dados: {" imgstr ": canvas.todataurl (" image/jpeg ", 0.9) .split (',') [1]}, sucess: function (data) {console.log (dados); data.url);}});}}1. Primeiro, use as informações do arquivo de entrada para determinar o arquivo de tamanho de arquivo.size e se o arquivo é um arquivo de imagem.type
2. Em seguida, use a interface FileReader do HTML5 para obter os dados BASE64 desta imagem.
3. Passe esta base64 na tela e sirva como SRC de uma imagem. No momento, você pode definir o tamanho da resolução da imagem para garantir que as imagens carregadas tenham uma resolução unificada. Obviamente, ele também pode ser baseado no tamanho original da imagem.
4. Before ajax, directly display the processed base64 (so that the user can immediately see the uploaded image), and then pass canvas.toDataURL("image/jpeg", 0.9).split(',')[1] (the type is image/jpeg, you can use the second parameter to set the image quality) to the corresponding interface in the background
5. Em seguida, vincule o URL retornado em segundo plano à propriedade Data-URL da imagem e apenas obtenha o Data-URL quando o Ajax for enviado, para que o usuário possa vê-lo o mais rápido possível e o URL ainda esteja no processo de AJAX no plano de fundo.
PostScript: Há um problema com as duas soluções, que enviarão muitas imagens redundantes no plano de fundo. Mas os colegas em segundo plano parecem não ter objeção.
O efeito real é assim http://www.qqchou.org/qqcweb/pages/photoiframe.html
O exposto acima é a prática do projeto, o formulário de upload de imagem ou a compactação de imagem front-end BASE64 (compressão da imagem front-end) introduzida pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!