明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
随笔 - 1274, 文章 - 0, 评论 - 214, 阅读 - 319万
  博客园  :: 首页  :: 管理
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

H5调用手机摄像头,完成拍照,实时上传

Posted on   且行且思  阅读(1373)  评论(0编辑  收藏  举报

项目开发中,偶尔会遇到网页中调用手机摄像头,通过相册选择或直接实时拍照的方式,完成图片上传的功能型需求。

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="statics/css/udy_css/mui.min.css">
    <link rel="stylesheet" href="statics/css/udy_css/change_info.css">
    <title>修改资料</title>
    <!--[if lte IE 8]>
        <script type="text/javascript">alert("您的浏览器版本较低,请升级版本以获得更好的体验!");</script>
    <![endif]-->
    <style>
        body{line-height: 0;}img{border: none;}
        .mui-input-group .mui-input-row.bd0:after{height: 0;}
        .mui-input-group .mui-input-row.bd0{border-bottom: #c8c7cc 1px solid;}
        .mui-card{position: relative;border:#c8c7cc 1px dotted;padding: 8px;-webkit-box-shadow:none;box-shadow: none;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin-bottom: 30px;}
        /*图片背景*/
        .mui-card-header:after{height: 0;}
        .camerabox{width: 100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
        .beforecamera{padding: 0;margin:0;margin-top: 20px;border:none;}
        .beforecamera .mui-card-header{width:100%;text-align: center;}
        .beforecamera .mui-card-header>div{width: 100%;height:100%;font-weight: normal;color: #09f;}
        /*提交按钮*/
        .mui-btn{height: 50px;box-sizing: border-box;line-height: 50px;padding: 0;font-size: 16px;}
        /*图形按钮*/
        .fileInpBtn{
            position:absolute;left:2;top: 0;
            width:100%;height:100%;
            cursor:pointer;
            filter:alpha(opacity:0);opacity:0;
            border-color: orange;
        }
        /*.camerabox{
            position:absolute;left:2;top: 0;
            border-color: red;
        }*/
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.go(-1);"></a>
        <h1 class="mui-title">修改资料</h1>
    </header>
    <div class="mui-content">
        <form class="mui-input-group" action="" method="post" name="">
            
            <div class="mui-input-row">
                <label>姓名</label>
                <input type="text" class="mui-input-clear" placeholder="仅限中文">
            </div>    
            <div class="mui-input-row">
                <label>手机号码</label>
                <input type="text" class="mui-input-clear" placeholder="输入11位手机号码">
            </div>
            <div class="mui-input-row bd0">
                <label>身份证号码</label>
                <input type="text" class="mui-input-clear" placeholder="输入15或18位身份证号码">
            </div>
            
            
            <div class="mui-card beforecamera">
                <div class="mui-card-header">
                    <div>请拍摄证件实体,并录入信息</div>
                </div>
            </div>
            <!--身份证主页-->            
            <div class="mui-card">
                <div class="mui-card-content">
                    <img class="camerabox" id="newImage" src="statics/images/udy_images/idcard_home.png" />
                    <input class="fileInpBtn" id="fileInpBtn" type="file"  onchange="showPicture(this)" accept="image/*"  multiple> 
                </div>
            </div>
            <!--身份证副页-->    
            <div class="mui-card">
                <div class="mui-card-content">
                    <img class="camerabox" id="newImage2" src="statics/images/udy_images/idcard_vice.png" />
                    <input class="fileInpBtn" id="fileInpBtn2" type="file"  onchange="showPicture2(this)" accept="image/*"  multiple> 
                </div>
            </div>
            <!--毕业证主页-->    
            <div class="mui-card">
                <div class="mui-card-content">
                    <img class="camerabox" id="newImage3" src="statics/images/udy_images/gradution_home.png" />
                    <input class="fileInpBtn" id="fileInpBtn3" type="file"  onchange="showPicture3(this)" accept="image/*"  multiple> 
                </div>
            </div>
            <!--其他证件-->    
            <div class="mui-card">
                <div class="mui-card-content">
                    <img class="camerabox" id="newImage4" src="statics/images/udy_images/othercard_home.png" />
                    <input class="fileInpBtn" id="fileInpBtn4" type="file"  onchange="showPicture4(this)" accept="image/*"  multiple> 
                </div>
            </div>
                        
            
            <div class="mui-button-row" style="height: auto;padding: 20px;">
                <!--提交按钮-->
                <button type="submit" class="mui-btn mui-btn-block mui-btn-primary" onclick="return true;">确认无误,立即修改</button>&nbsp;&nbsp;
                <button type="button" class="mui-btn mui-btn-block mui-btn-danger" onclick="javascript:history.go(-1);">取消</button>
                
            </div>
        </form>
    </div>
    
    
    <script src="statics/js/udy_js/mui.min.js"></script>
    <script>
        function showPicture(imgFile){
            alert("url地址:"+window.URL.createObjectURL(imgFile.files[0]));
            /*获取上传文件的路径,并赋给img标签*/
            document.getElementById("newImage").src = window.URL.createObjectURL(imgFile.files[0]);
        }
        
        function showPicture2(imgFile2){
            alert("url地址2:"+window.URL.createObjectURL(imgFile2.files[0]));
            /*获取上传文件的路径,并赋给img标签*/
            document.getElementById("newImage2").src = window.URL.createObjectURL(imgFile2.files[0]);
        }
        
        function showPicture3(imgFile3){
            alert("url地址3:"+window.URL.createObjectURL(imgFile3.files[0]));
            /*获取上传文件的路径,并赋给img标签*/
            document.getElementById("newImage3").src = window.URL.createObjectURL(imgFile3.files[0]);
        }
        
        function showPicture4(imgFile4){
            alert("url地址4:"+window.URL.createObjectURL(imgFile4.files[0]));
            /*获取上传文件的路径,并赋给img标签*/
            document.getElementById("newImage4").src = window.URL.createObjectURL(imgFile4.files[0]);
        }
    </script>
</body>
</html>
复制代码

 

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
历史上的今天:
2021-12-11 如何查看JDK是多少位的
2018-12-11 ASP.NET: Cookie会话丢失,Session超时配置
2009-12-11 C# :DataGridView中使按下Enter键达到与按下Tab键一样的效果?
2008-12-11 C# 2.0 :仿MSN提示框or仿迅雷提示框(.Net2.0).rar
2007-12-11 ASP.NET(C#)实现一次性上传多张图片(多个文件)
点击右上角即可分享
微信分享提示