<input type="file"/>
这种方式虽然也能实现功能，但用户体验上可能会差了一些，所以本文记录了使用css+js实现图片选中后的预览及压缩上传功能，部分带来来源于网络，此处做了记录整理。
效果预览：
1.创建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>拍照上传</title> <link rel="stylesheet" href="index.css"/> <script type='text/javascript' src='index.js' charset='utf-8'></script> </head> <body> <form id="mainform"> <p class="content"> <p class="label">身份证</p> <p class="img-area"> <p class="container"> <input type="file" id='id-face' name='face' accept="image/*" /> <p id='face-empty-result'> <img style='width:4rem' src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt=""> <p>身份证正面照</p> </p> <img style='width: 100%' id='face-result'/> </p> <p class="container" style='margin-top:0.5rem;'> <input type="file" id='id-back' name='back' accept="image/*" /> <p id='back-empty-result'> <img style='width:4rem' src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt=""> <p>身份证反面照</p> </p> <img style='width: 100%' id='back-result'/> </p> </p> </p> <p class="btn"> 提交 </p> </form> </body> </html>
2.创建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 p{ text-align: center; padding:0.5rem 0 } .container input{ opacity:0; filter:alpha(opacity=0); height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 9; } .container p{ font-size: 0.9rem; color:#999 } .btn{ background-color: #4363ab; color: #fff; text-align: center; padding: 0.5rem 1rem; width:80%; border-radius: 0.2rem; margin: 2rem auto; font-weight: 600; font-size: 1.2rem }
3.创建index.js
window.onload=function(){ document.getelementbyid("id-face").addeventlistener("change", function(){ onfilechange(this,"face-result","face-empty-result") }); document.getelementbyid("id-back").addeventlistener("change", function(){ onfilechange(this,"back-result","back-empty-result") }); document.getelementsbyclassname("btn")[0].addeventlistener("click", function(){ submit(); }); }; /** * 选中图片时的处理 * @param {*} fileobj input file元素 * @param {*} el //选中后用于显示图片的元素id * @param {*} btnel //未选中图片时显示的按钮区域id */ function onfilechange(fileobj,el,btnel){ var windowurl = window.url || window.webkiturl; var dataurl; var imgobj = document.getelementbyid(el); document.getelementbyid(btnel).style.display="none"; imgobj.style.display="block"; if (fileobj && fileobj.files && fileobj.files[0]) { dataurl = windowurl.createobjecturl(fileobj.files[0]); imgobj.src=dataurl; } else { dataurl = fileobj.value; imgobj.style.filter = "progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=scale)"; imgobj.filters.item("dximagetransform.microsoft.alphaimageloader").src = dataurl; } } /** * 将图片压缩后返回base64格式的数据 * @param {*} image img元素 * @param {*} width 压缩后图片宽度 * @param {*} height 压缩后图片高度 * @param {*} qua //图片质量1-100 */ function compressimagetobase64(image,width,height,qua){ var quality = qua ? qua / 100 : 0.8; var canvas = document.createelement("canvas"), ctx = canvas.getcontext('2d'); var w = image.naturalwidth, h = image.naturalheight; canvas.width = width||w; canvas.height = height||h; ctx.drawimage(image, 0, 0, w, h, 0, 0, width||w, height||h); var data = canvas.todataurl("image/jpeg", quality); return data; } //提交 function submit(){ //1、form提交 //document.getelementbyid("mainform").submit(); //2、压缩后ajax提交 var face_data=compressimagetobase64(document.getelementbyid("face-result"),200,100,90); var back_data=compressimagetobase64(document.getelementbyid("back-result"),200,100,90); var formdata = new formdata(); formdata.append("face",face_data); formdata.append("back",back_data); //需引入jquery $.ajax({ url:"/地址", type: 'post', cache: false, data: formdata, timeout:180000, processdata: false, contenttype: false, success:function(r){ }, error:function(r){ } }); }
相关推荐：
利用javascript实现不刷新页面预览上传图片方法教程
javascript预览上传图片发现的问题的解决方法_图象特效
jquery实现本地预览上传图片功能_jquery
以上就是html+css+js 实现拍照预览上传图片功能实例分享的详细内容。