注：经测试h5调用相册效果有兼容性问题，安卓仅能调用拍照功能（部分安卓可能会调不起来，所以建议用app原生调用），ios可调起拍照和相册功能。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

.role_info {

    margin-bottom: 30px;

}

.role_info label {

    display: block;

    font-size: 24px;

    color: #;

}

.role_info input {

    width: %;

    margin-top: 30px;

    font-size: 26px;

    color: #;

    padding-bottom: 15px;

    border-bottom: 1px solid #F3F3F3;

}

.upload_img .img{

    position: relative;

}

.close{

    z-index:  ;

    font-size: 30px;

    right:  ;

    width: 24px;

    height: 24px;

    background: #;

    opacity: 0.4;

    color: #ffffff;

    line-height: 24px;

    float: right;

    position: absolute;

}

</style>

</head>  

<body>

    <form id='upload_user_img'>

        <div class="role_info">

            <label for="product_force" class="border_left">上传资料</label>

            <div class="upload_img">

                <div class="img cimg_0" id="upload_btn">

                    <label class="limg_0">

                        <img src="data:images/upload_img.png" class='img_view_0' mtype=''/>

                        <input class="icimg_0" name="files" type="file" accept="image/*" value="" capture="camera" onchange="xmTanUploadImg(this,0)" style="opacity:0;visibility:collapse;" />

                    </label>

                </div>

            </div>

        </div>

    </form>

</body>

 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

//选择图片，马上预览

function xmTanUploadImg(obj,key) {

    var file = obj.files[];

    var reader = new FileReader();

    console.log('src:',this);

    //读取文件过程方法

    reader.onloadstart = function (e) {

        console.log("开始读取....");

    }

    reader.onprogress = function (e) {

        console.log("正在读取中....");

    }

    reader.onabort = function (e) {

        console.log("中断读取....");

    }

    reader.onerror = function (e) {

        console.log("读取异常....");

    }

    reader.onload = function (e) {

        console.log("成功读取....");

        $('.img_view_'+key).attr('src',e.target.result);

        var img_mytype =  $('.img_view_'+key).attr('mtype');

        $('.icimg_'+key).attr('name','files');

        $('.limg_'+key).before('<span class="close" onclick="del_img(\'cimg_'+key+'\')">x</span>');

        if(img_mytype == ){

            $('.img_view_'+key).attr('mtype',);

            var keyR   = key+;

            console.log('keyR:'+keyR);

            var imgStr = '<div class="img cimg_'+keyR+'">'+'<label class="limg_'+keyR+'"><img src="data:images/upload_img.png" class="img_view_'+keyR+'" mtype="1"/>'+

            '<input class="icimg_'+keyR+'" name="files" type="file" accept="image/*" value="" capture="camera" onchange="xmTanUploadImg(this,'+keyR+')" style="opacity:0;visibility:collapse;" />'+

            '</label></div>';

            $('.cimg_'+key).after(imgStr);

        }

    }

    reader.readAsDataURL(file)

}

</script>

</html>

效果图：

参考地址：

https://www.cnblogs.com/tandaxia/p/5125275.html

https://blog.csdn.net/github_38516987/article/details/77988182

https://blog.csdn.net/wmy94827/article/details/76222098

web调用手机相册，并实现动态增加图片功能的更多相关文章

  1. WebApp调用手机相册或摄像头、拨打电话

    WebApp调用手机相册或摄像头.拨打电话 一.总结 一句话总结:input标签,指定type为file,选择好对应的accept即可.camera——相机,相应的accept为image : cam ...

  2. ios最新调用手机相册选取头像(UIActionSheet过期)

    由于 UIActionSheet过期所以可以使用如下调用手机相册 前提不要忘记添加代理如下两个 UIImagePickerControllerDelegate,UINavigationControll ...

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

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

  4. Web调用安卓，苹果手机摄像头，本地图片和文件

    由于要给一个客户做一个记账WAP,里面有调用手机拍照功能,这里记录一下,以供需要的朋友,下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,我测 ...

  5. h5调用手机相册摄像头以及文件夹

    在之前一家公司的时候要做一个app里面有上传头像的功能,当时研究了好久,找到了一篇文章关于h5摄像头以及相册的调用的,所以就解决了这个问题了!!我这里记录一下以便后面有人需要,可以参考一下!!!! 下 ...

  6. HTML5 调用手机相册和摄像头的方法并上传微信下测试通过

    <input type="file" capture="camera" accept="image/*" id="camer ...

  7. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  8. HTML5调用手机摄像机、相册功能 <input>方法

    最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了 ...

  9. 手机web页面调用手机QQ实现在线聊天的效果

    html代码如下: <a href="javascript:;" onclick="chatQQ()">QQ咨询</a> js代码如下: ...

随机推荐

  1. PartialView中的页面重定向

    在MVC的每个action中,都可以指定一种返回页面的类型,可以是ActionResult,这表示返回的页面为view或者是一个PartialView,前台是一个全整页面,后台是页面的一部分. 在以A ...

  2. hdu 2059 龟兔赛跑 (dp)

    /* 把起点和终点比作加油站,那总共同拥有n+2个加油站了, 每次都求出从第0个到第j个加油站(j<i)分别在加满油的情况下到第i个加油站的最短时间dp[i], 终于的dp[n+1]就是最优解了 ...

  3. 鉴权应用服务器 app客户端 web服务端 安全令牌(SecurityToken)、临时访问密钥(AccessKeyId, AccessKeySecret)

    设置EndPoint和凭证 移动终端是一个不受信任的环境,把AccessKeyId和AccessKeySecret直接保存在终端用来加签请求,存在极高的风险.建议只在测试时使用明文设置模式,业务应用推 ...

  4. AngularJS 指令实践指南（二）

    这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...

  5. 【繁琐工作自动化】pandas 处理 excel 文件

    0. 一般处理 读取 excel 格式文件:df = pd.read_excel('xx.xlsx'),下面是一些简单查看文件内容的函数: df.head():展示前五行: df.columns:展示 ...

  6. BZOJ2283: [Sdoi2011]火星移民

    Description 在2xyz年,人类已经移民到了火星上.由于工业的需要,人们开始在火星上采矿.火星的矿区是一个边长为N的正六边形,为了方便规划,整个矿区被分为6*N*N个正三角形的区域(如图1) ...

  7. 小程序-demo：小程序示例-page/common

    ylbtech-小程序-demo:小程序示例-page/common 1.返回顶部 0.     1. 2. pages/common返回顶部 1. -lib --weui.wxss /*! * we ...

  8. Java多线程系列十——BlockingQueue

    参考资料:http://ifeve.com/java-synchronousqueue/http://www.cnblogs.com/jackyuj/archive/2010/11/24/188655 ...

  9. Ruby module里的self

    创建: 2018/03/15 更新: 2018/03/22 把标题ruby首字母大写 都知道def self.方法名 来定义类方法 class SampleClass def self.class_m ...

  10. Jedis线上的一个小坑：Redis有并发访问的数据错乱的问题

    问题现象: 业务数据有错乱,A的一些数据有好几个都是B的数据 这些业务数据在保存在Redis缓存中,怀疑是并发情况下Jedis错乱的问题 原因分析: JedisUtil里面在使用完Jedis 后释放资 ...