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. BZOJ2568 [国家集训队2012]比特集合

    Description 比特集合是一种抽象数据类型(Abstract Data Type) ,其包含一个集合S,并支持如下几种操作: INS M : 将元素 M 插入到集合S中: DEL M : 将集 ...

  2. ZJOI2012 网络——LCT相关题目

    有一个无向图G,每个点有个权值,每条边有一个颜色.这个无向图满足以下两个条件: 对于任意节点连出去的边中,相同颜色的边不超过两条. 图中不存在同色的环,同色的环指相同颜色的边构成的环. 在这个图上,你 ...

  3. \n\r 转义字符

    转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) ,将当前位置移到前一列 008 \f 换页(FF),将当前位置移到下页开头 012 \n 换行(LF) ,将 ...

  4. C#-创建并添加TXT文件

    public static void WriteToText(string txtContent, string txtPath) { using (FileStream fs = new FileS ...

  5. C#代码处理网页关于登录的code

    作者:血饮狂龙链接:https://www.zhihu.com/question/49452639/answer/117294801来源:知乎著作权归作者所有,转载请联系作者获得授权. private ...

  6. volley4--RequestQueue

    源码: /* * Copyright (C) 2011 The Android Open Source Project * * Licensed under the Apache License, V ...

  7. python传递参数给shell

    #格式化字符 print "hello, %s" % ('mm') #传递参数 n="192.168.200.2" os.popen('ping %s -c 2 ...

  8. exchange 普通用户可以创建通讯组

    运维发现,通讯组多了好多未知名称的,经查为普通用户通过owa新建的,怎么阻止用户新建通讯组呢. 在搭建exchange后,系统会自动创建一个“Default Role Assignment Polic ...

  9. 编写VBA宏生成页面

    概述 依据详细设计中表设计,借用excel宏编写VBA生成页面. 特色 高定制.高效率.兼容所有生成要求.不依赖低耦合.任意Sheet适用 缺陷 不支持批量Sheet页生成 VBA源码 Sub lis ...

  10. Bearer Token的加密解密规则（OAuth中间件）

    在OAuthBearerAuthenticationMiddleware中使用Microsoft.Owin.Security.DataHandler. SecureDataFormat<TDat ...