来源: HTML5调用手机摄像拍照、相册等功能样式美化及demo – CSDN博客
最近用MUI做了个移动端项目,设计中涉及到调用手机摄像头拍照等功能需求,然而在PLUS环境下才能直接调用,这就让人有点头疼了,后经查询资料学习了解到有一个很简单的方法就是input:file标签,不需要复杂代码操作就能实现调用拍照、相册等功能。
//capture -- 设置选择需要调用的功能 //camera -- 照相机 //camcorder -- 摄像机 //microphone -- 录音 //accept -- 直接打开系统文件目录 <input type="file" accept="image/*" capture="camera"> <input type="file" accept="video/*" capture="camcorder"> <input type="file" accept="audio/*" capture="microphone"> //input:file标签还有一个属性multiple 用来支持多选 直接呼出原生选项 <input type="file" accept="image/*" multiple>
input [ type=file ] 按钮美化及上传demo
简单说就是:先将原按钮透明度opacity设为0,再外层用标签包裹,最终实现美化功能。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> <input[type=file]>上传demo </title> <style> .file { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 20px; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } .file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; } p.bottomTitlt{ margin: 0; letter-spacing: 2px; padding: 0; } </style> </head> <body> <a href="javaScript:;" class="file"> <p class="bottomTitlt">身份证正面</p> <img src="" alt=""/> <input type="file" placeholder="身份证正面" > </a> <p class="showFileName"></p> <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> <script type="text/javascript"> $(".file").on("change","input[type='file']",function(){ var filePath=$(this).val(); var fr= new FileReader(); var imgObj = this.files[0]; fr.readAsDataURL(imgObj); var obj = $(this).prev()[0]; if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("JPG")!=-1 || filePath.indexOf("PNG")!=-1 || filePath.indexOf("png")!=-1){ var arr = filePath.split('\\'); var fileName = arr[arr.length-1]; $(this).parent().next().html(fileName); fr.onload=function( ){ obj.src=this.result; }; }else{ $(this).parent().next().html("您未上传文件,或者您上传文件类型有误!").css("color","red"); return false } }); </script> </body> </html>
input[type=file]样式美化后效果图:
图片上传后效果图:
HTML5调用手机摄像拍照、相册等功能样式美化及demo - CSDN博客
相关推荐
- 百度地图web API定位不准,定位偏移问题处理_百度地图api定位不准解决-CSDN博客
- 解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.-CSDN博客
- chrome浏览器debugger失效_chrome debugger不生效-CSDN博客
- 工作中使用Redis的10种场景 - 苏三说技术 - 博客园
- 5分钟教会你如何在生产环境debug代码 - 欧阳码农 - 博客园
- 解决WordPress”无需升级 您的WordPress数据库已经是最新的了!” 关闭插件后无法登陆后台-腾讯云开发者社区-腾讯云
- Chrome(谷歌)浏览器跨域请求被阻止,CORS 头缺少‘Access-Control-Allow-Origin’的解决办法
- 在layui中使用 jquery 触发select 的 change事件无效(转载)-CSDN博客