Prefácio: Quando criamos páginas da web, muitas vezes precisamos fazer upload de imagens. Podemos escolher fotos ou tirar fotos para enviar. Se simplesmente usarmos <input type=file/> , embora esse método também possa realizar a função, a experiência do usuário pode. ser ruim. É um pouco diferente, então este artigo registra o uso de css + js para implementar as funções de visualização e upload compactado após a seleção da imagem. Algumas das informações vêm da Internet e são registradas e organizadas aqui.
Visualização do efeito:
1. Crie index.html<!DOCTYPE html><html> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1,0, escala máxima=1,0, escalável pelo usuário=não> <title>Tire fotos e envie</title> <link rel=stylesheet href=index.css/> <script type='text/javascript' src='index.js' charset='utf-8'></script> </head> <body> <form id=mainForm> <div class=content> <div class=label>Cartão de identificação</div> <div class=img-area > <div class=container> <input type=file id='id-face' name='face' accept=image/* /> <div id='face-empty-result'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>Foto frontal do cartão de identificação</p> </div > <img style='width: 100%' id='face-result'/> </div> <div class=container style='margin-top:0.5rem;'> <input type=file id='id-back' name='back' accept=image/* /> <div id='back-empty-result'> <img style='largura:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>Foto reversa do cartão de identificação</p> </div> <img style='width: 100%' id='back-result'/> </div> </div> </div> <div class = btn> enviar</div> </form> </body></html>2. Crie index.css
corpo{margem: 0}.content{ preenchimento:0,5rem display: flex;align-items: center; .container{ background-color:#e7e7e7; posição: relativa;}.container div{ text-align: center padding:0.5rem; 0}.container input{ opacidade:0; filtro:alfa(opacidade=0); altura: 100%; posição: topo absoluto: 0; p{ tamanho da fonte: 0,9rem cor:#999}.btn{ cor de fundo: #4363ab cor: #fff; preenchimento: 0,5rem 1rem largura:80%; raio da borda: 0,2rem margem: 2rem automático; peso da fonte: 600; 3. Crie index.js window.onload=function(){ document.getElementById(id-face).addEventListener(change, function(){ onFileChange(this,face-result,face-empty-result) }); .addEventListener(change, function(){ onFileChange(este,resultado de volta,resultado de volta vazio) }); document.getElementsByClassName(btn)[0].addEventListener(click, function(){ submit(); });};/** * Processamento quando a imagem é selecionada* @param {*} fileObj input file element * @param {*} el //O ID do elemento usado para exibir a imagem quando selecionado * @param {*} btnel //O ID da área do botão exibida quando a imagem não está selecionada */function onFileChange(fileObj,el,btnel){ var windowURL = window.URL || window.webkitURL var dataURL = document.getElementById(el); .display=bloco; if (arquivoObj && arquivoObj.arquivos && fileObj.files[0]) {dataURL = windowURL.createObjectURL(fileObj.files[0]); (sizingMethod=escala); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL }}/** * Retorna os dados no formato base64 após compactar a imagem* @param {*} image img element* @param {*} largura após compactação Largura da imagem* @param {*} altura Altura da imagem compactada* @param {*} qua //Qualidade da imagem 1-100 */função compressImageTobase64(imagem,largura,altura,qua){ var qualidade = qua ? qua / 100 : 0,8; h = imagem.naturalHeight; canvas.width = largura||w; ctx.drawImage(imagem, 0, 0, w, h, 0, 0, largura||w, altura||h); function submit(){ //1. Envio do formulário //document.getElementById(mainForm).submit() //2. face_data=compressImageTobase64(document.getElementById(resultado facial),200,100,90); ,dados_face); formData.append(back,back_data); //jQuery precisa ser introduzido $.ajax({ url:/address, type: 'POST', cache: false, data: formData, timeout:180000, processData: false, contentType: falso, sucesso:função(r){ }, erro:função(r){ } });}Código fonte: endereço do Github
ResumirO texto acima é o html+css+js introduzido pelo editor para implementar a função de tirar fotos, visualizar e enviar fotos. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor irá. responder a você a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!