<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
3.创建index.js