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. Java 集合：迭代器（Iterator, Iterable）

    Iterator接口 public interface Iterator<E> { boolean hasNext(); E next(); void remove(); } 访问元素前需 ...

  2. swiper动态改变滑动内容

    假设当前显示的是1,往左滑动一个递减1,往右滑动一个递增1 body下面添加如下代码 <div class="swiper-container temp"> <d ...

  3. Android的第一个程序

    摘要:对于安卓的历史和安卓需要学习哪些东西以及怎么安卓环境,我就不在这里多说了,网上一大推. 我这里主要说的就是代码.一些基础的安卓知识.在接下来的每个月里我都会不定期写一些博客给初学者学习,我会尽量 ...

  4. [算法练习]Add Two Numbers

    题目说明: You are given two linked lists representing two non-negative numbers. The digits are stored in ...

  5. Android 退出app，后台推送的服务也停止了，怎么可以做到不停止后台服务呢?

    service粘性等的那4种方式试了,三星的可以,小米老款手机可以,新款不行,华为新款也不行,还有魅族什么的,都不行,新款的手机上都有一个安全中心,只有在安全中心里面添加上允许app自启动才可以 怎么 ...

  6. Java基础之StringBuffer和StringBuilder的区别

    StringBuffer是一个字符串的缓存类,属于一个容器,对于容器,我们可以进行增删改查. StringBuffer的容器长度是可变的,并且里面可以存放多种的数据类型.它跟其他容器,比如数组,是很不 ...

  7. 反射报错java.lang.IllegalArgumentException: wrong number of arguments

    class Person{ private String name ; private String sex ; public Person(){ System.out.println("c ...

  8. 高级mask应用

    高级mask应用 用mask做遮罩可以实现复杂的效果: 用来形成遮罩的图片: 原始图片: 如果你熟悉Photoshop,那这种效果绝对是你的菜,看代码你会秒懂...... // // RootView ...

  9. React学习笔记（六）事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  10. 第三次作业 史浩然 -assassin Talon