1、accept="image/*" capture="camera" 自动调用手机端拍照功能

accept="image/*" capture="camera"

2、当表单提交时候有文件的时候，需要加上

var formData = new FormData($( "form" )[0]);

3、示例代码：

<!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=0">

        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

        <title>HTML5手机端拍照上传</title>

        <style>

             .list_box {

                display: -webkit-box;

                width: 90%;

                margin: 0px auto;

                border: 1px solid silver;

                padding: 3px;

                border-radius: 2px;

             }

            .list {

                width: 30%;

                height: 100px;

                border: 1px solid salmon;

                margin-left: 2%;

                display: block;

                border:1px solid #4cd964;

                border-radius: 2px;

                background-size:100% 100%;

                background-position: center center;

                background-repeat: no-repeat;

            }

            .list input {

                width: 100%;

                height: 100%;

                opacity: 0;

            }

            input[type='submit']{

                border: none;border-radius: 2px;

                padding: 6px 22px;

                display: block;

                margin: 10px auto;

                color: white;

                background: #008000;

            }

        </style>

    </head>

    <body>

      <form method="" action=""  enctype="multipart/form-data" role="form">

         <div class="list_box">

            <a class="list" id="img0" href="javascript:;">

                <input type="file" name="file1" accept="image/*" capture="camera" onchange="showImg(this)" />

            </a>

            <a class="list" id="img1" href="javascript:;">

                <input type="file" name="file2" accept="image/*" capture="camera" onchange="showImg(this)" />

            </a>

            <a class="list" id="img2" href="javascript:;">

                <input type="file" name="file3" accept="image/*" capture="camera" onchange="showImg(this)" />

                <!--accept="image/*" capture="camera"-->

            </a>

        </div>

        <input type="submit" name="" id="btn" value="提交" />

        </form>

        <script>

             function showImg(e) {

                var srcs0 = window.URL.createObjectURL(e.files[0]);

                var index = e.parentNode.id;

                if(srcs0){

                    $('#'+index+'').css({"background":"url(" + srcs0 + ") center no-repeat","background-size": "100% 100%"});

                }

            }

        $("#btn").click(function(){

         $("#btn").css({"opacity":"0.8","disabled":"disabled"});

        $("#btn").val("正在提交,请耐心等待.....");

        var formData = new FormData($( "form" )[0]);

             $.ajax({

                  url:"{php echo $this->createMobileUrl('dyfile', array('op' => 'fail'));}",

                  type: 'POST',

                  data: formData,

                  contentType: false,

                  processData: false,

                  success: function (returndata) {

                    window.location.href="{php echo $this->createMobileUrl('dyorder', array('status' => '6'))}";

                  }

             });

    });

        </script>

    </body>

</html>

运行效果：

选择文件之后：

HTML5手机端拍照上传的更多相关文章

  1. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  2. 手机端 H5上传头像

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 手机端图像编辑上传-cropper

    编辑头像,实现相册,照像功能,并能缩放裁剪功能,可自定义UI,引用'cropper.js', 'exif.js' /*初始化裁剪插件*/ var screenWidth = $(window).wid ...

  4. webAPP如何实现移动端拍照上传（Vue组件示例）？

    摘要:使用HTML5编写移动Web应用,主要是为了尝试一下“一套代码多处运行”,一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...

  5. 【Demo】HTML5 拍照上传

    本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...

  6. html5调用手机摄像头，实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  7. iOS拍照上传后，在web端显示旋转 Swift＋OC版解决方案

    问题描述: 手机头像上传,遇到一个怪现象,就是拍照上传时,手机端显示头像正常,但在web端查看会有一个左旋90度的问题. 并且照片竖怕才会有此问题,横拍不存在. 原因分析: 手机拍照时,用相机拍摄出来 ...

  8. php实现手机拍照上传头像功能

    现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,这个就不是post传递 也不是get函数传递, 这个另外一种数据格式传递,使用的是$GLOBALS ...

  9. php实现视频拍照上传头像功能实例代码

    如果要在php中实现视频拍照我们需要借助于flash插件了,由flash拍出的确照片我们再通过php的$GLOBALS ['HTTP_RAW_POST_DATA']接受数据,然后保存成图片就可以了,下 ...

随机推荐

  1. CSS(二）选择符

     2019-04-11 22:14:23 1.类型选择符(标签选择符)  html中所有的标签都可以直接对元素选择  p em i a html body.....   特点:对页面中所有当前类型的元 ...

  2. safari

    http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/ http://rawgit.com/zha ...

  3. Tarjan系列1

    tajan的dfs树系列算法: 求解割点,桥,强连通分量,点双联通分量,边双联通分量: tajan是一个dfs,把一个图变成一个dfs树结构, dfs树结构,本质是通过一个没有任何要求的dfs把图的边 ...

  4. C#-求int数组中连续偶数列的个数

    例如:[3, 3, 2, 2, 2, 4, 3, 5, 4, 6, 3]=>2,2,2,4;4,6 结果为2     [3, 3, 2,3, 2, 2, 4, 3, 5, 4, 6, 3]=&g ...

  5. Telnet初试（本地测试）

    win7下开启Telnet功能: 控制面板-程序和功能- 开启服务 然后回车 这样即可完成一次请求

  6. 微服务架构之spring cloud gateway

    Spring Cloud Gateway是spring cloud中起着非常重要的作用,是终端调用服务的入口,同时也是项目中每个服务对外暴露的统一口径,我们可以在网关中实现路径映射.权限验证.负载均衡 ...

  7. cacti 安装与 与不能显示图像故障解决方案

    on debian 7&8 apt-get install snmp snmpd apt-get install cacti cacti-spine apt-get install moreu ...

  8. Visual Studio 与 Visual C++ 关系

      Visual Studio .net Visual C++ .net Visual C++ _MSC_VER 备注 Visual Studio .net 2002 Visual C++ .net ...

  9. 初识WCF3

    http://www.cnblogs.com/xiangchangdong/p/3924030.html 第三篇 在IIS中寄宿服务 通过前两篇的学习,我们了解了如何搭建一个最简单的WCF通信模型,包 ...

  10. Jsp程序要在Tomcat下运行

    首先,回顾下jsp与servlet的区别与联系 JSP经过编译后就成了servlet JSP本质就是Servlet,JVM只能识别java类,不能识别JSP代码,Web容器将JSP代码编译成JVM能够 ...