Préface : Lorsque nous créons des pages Web, nous avons souvent besoin de télécharger des images. Nous pouvons choisir des images ou prendre des photos à télécharger si nous utilisons simplement <input type=file/> , bien que cette méthode puisse également remplir cette fonction, l'expérience utilisateur peut être affectée. être pauvre. C'est un peu différent, donc cet article enregistre l'utilisation de css+js pour implémenter les fonctions de prévisualisation et de téléchargement compressé après la sélection de l'image. Certaines informations proviennent d'Internet et sont enregistrées et organisées ici.
Aperçu de l'effet :
1.Créer index.html<!DOCTYPE html><html> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no> <title>Prendre des photos et télécharger</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>Carte d'identité</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>Photo recto de la carte d'identité</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='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>Photo inversée de la carte d'identité</p> </div> <img style='width: 100%' id='back-result'/> </div> </div> </div> <div class = btn> soumettre</div> </form> </body></html>2.Créer index.css
body{ margin: 0}.content{ padding:0.5rem; display: flex; align-items: center; border-bottom: 1px #999 solid}.label{ width:5rem;}.img-area{ flex:1} .container{ background-color :#e7e7e7 ; position : relative ;}.container div{ text-align : center ; 0}.container input{ opacity:0; filter:alpha(opacity=0); hauteur : 100 % ; position : haut : 0 ; p{ taille de police : 0,9rem ; couleur : #999}.btn{ couleur d'arrière-plan : #4363ab ; couleur : #fff ; remplissage : 0,5rem 1rem ; largeur : 80 % ; rayon de bordure : 0,2rem ; marge : 2rem auto ; 3.Créer index.js window.onload=function(){ document.getElementById(id-face).addEventListener(change, function(){ onFileChange(this,face-result,face-empty-result) }); .addEventListener(change, function(){ onFileChange(this,back-result,back-empty-result) }); document.getElementsByClassName(btn)[0].addEventListener(click, function(){ submit(); });};/** * Traitement lorsque l'image est sélectionnée* @param {*} élément du fichier d'entrée fileObj * @param {*} el //L'ID de l'élément utilisé pour afficher l'image lorsqu'il est sélectionné * @param {*} btnel //L'ID de la zone du bouton affiché lorsque l'image n'est pas sélectionnée */function onFileChange(fileObj,el,btnel){ var windowURL = window.URL || window.webkitURL; var imgObj = document.getElementById(el); .display=block; si (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src=dataURL; } else { dataURL = fileObj.style.filter = progid:DXImageTransform.Microsoft.AlphaImageLoader; (sizingMethod=échelle); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL; }}/** * Renvoie les données au format base64 après avoir compressé l'image* @param {*} élément img de l'image* @param {*} largeur après compression Largeur de l'image* @param {*} hauteur Hauteur de l'image compressée* @param {*} qua //Qualité de l'image 1-100 */function compressImageTobase64(image,largeur,hauteur,qua){ var qualité = qua ? qua / 100 : 0,8 ; var toile = document.createElement(canvas), ctx = toile.getContext('2d'); h = image.naturalHeight; toile.largeur = largeur||w; toile.hauteur = hauteur||h; ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h); var data = canvas.toDataURL(image/jpeg, qualité);}//Soumettre function submit(){ //1. Soumission du formulaire //document.getElementById(mainForm).submit( //2. face_data=compressImageTobase64(document.getElementById(face-result),200,100,90); var back_data=compressImageTobase64(document.getElementById(back-result),200,100,90); ,face_data); formData.append(back,back_data); //jQuery doit être introduit $.ajax({ url:/address, type : 'POST', cache : false, data : formData, timeout : 180000, processData : false, contentType : faux, succès:fonction(r){ }, erreur:fonction(r){ } });}Code source : adresse Github
RésumerCe qui précède est le html+css+js introduit par l'éditeur pour implémenter la fonction de prise de photos, de prévisualisation et de téléchargement de photos. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur le fera. vous répondrons à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !