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. 洛谷 P3391 文艺平衡树

    题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 --b ...

  2. react 共享数据流

    层层传递Props 单向数据流层层传递,繁琐不好管理. Context 什么是context? context是react提供的组件通信api context有什么用? 解决{组件.js}中多层级组件 ...

  3. ISO14971-2007阅读

    1.什么是风险? 风险的概念,公认的组成有两部分: 损害发生的概率 损害的后果,即损坏的严重性 2.风险管理的适用范围? 适用于医疗器械生命周期所有阶段 不适用于临床判断 不要求具体的质量体系,但14 ...

  4. HW—词频统计

    第一次个人作业——词频统计 第一次做这种大作业,明显感觉陌生,各种规范和技能也是第一次使用,希望自己好运. 目录:一.基本要求 二.需求分析及时间估计 三.实现思路及过程 四.测试用例.时间性能分析及 ...

  5. 购物车redis存储结构

  6. 在centos6.x上安装teamviewer

    首先下载公钥: # wget http://www.teamviewer.com/link/?url=354858 # rpm --import TeamViewer_Linux_PubKey.asc ...

  7. android去应用市场升级

    private String getAppInfo() {   try {   String pkName = this.getPackageName();   String versionName ...

  8. 使用ifstream和getline读取文件内容[c++] ZZ

      假设有一个叫 data.txt 的文件, 它包含以下内容: Fry: One Jillion dollars.[Everyone gasps.]Auctioneer: Sir, that's no ...

  9. SQL查询一个表中类别字段中Max()最大值对应的记录

      SQL查询一个表中类别字段中Max()最大值对应的记录 SELECT A.id, A.name, A.version FROM   DOC A, (SELECT id, MAX(version)  ...

  10. configparser logging collections 模块

    configparser 模块: 这是一个写入的模块就是把你的信息给写入的模块 #这是一个把信息写入example文件内import configparserconfig = configparser ...