HTML5调用手机摄像拍照、相册等功能input[type=file]样式美化及demo

本文主要是介绍HTML5调用手机摄像拍照、相册等功能input[type=file]样式美化及demo，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近用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>