注:经测试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. 源代码管理工具GIT

    01.GIT简介 svn是集中式的源代码管理工具,必须联网才能操作 git是分布式的. 有两中:一个是本地代码仓库,一个是远程代码仓库 分布式源代码管理工具 02.GIT - 本地代码仓库使用流程 1 ...

  2. Violet蒲公英

    传送门 题目要求求出给定区间内编号最小的众数,强制在线. 虽然说这是个黑题……不过我们可以用暴力分块解决它.首先先对所有数离散化,这个不影响众数.我们先预处理出每个数在前i个块内出现了多少次,再预处理 ...

  3. Watir: 右键点击实例(某些如果应用AutoIt来做会更加简单高效)

    require 'watir' module Watir class Element def top_edge assert_exists assert_enabled ole_object.getB ...

  4. bzoj3769

    树形dp %%%popoqqq 设dp[i][j]表示当前i个节点的树,深度小于等于j的树的个数 那么dp[i][j] = sigma(dp[k][j-1]*dp[n-k-1][j-1]) 比较好理解 ...

  5. Linux 常用命令二 pwd cd

    一.pwd命令 显示整个路径名: wang@wang:~$ pwd /home/wang 二.cd命令 切换到其他路径(相对路径方式): wang@wang:~$ cd workpalce/ wang ...

  6. 【BZOJ3625】【CF438E】小朋友和二叉树

    题目 传送门 思路&做法 我们可以用\(v_i\)表示\(i\)在\(c\)中出现了几次, 用\(f_i\)表示权值为\(i\)的神犇树的总数, 于是 \[ f_x = \sum_{i = 0 ...

  7. 51nod 1237 最大公约数之和 V3【欧拉函数||莫比乌斯反演+杜教筛】

    用mu写lcm那道卡常卡成狗(然而最后也没卡过去,于是写一下gcd冷静一下 首先推一下式子 \[ \sum_{i=1}^{n}\sum_{j=1}^{n}gcd(i,j) \] \[ \sum_{i= ...

  8. bzoj4758: [Usaco2017 Jan]Subsequence Reversal(区间dp)

    4758: [Usaco2017 Jan]Subsequence Reversal Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 76  Solved ...

  9. A+B Problem——经典中的经典

    A+B Problem,这道题,吸收了天地的精华,是当之无愧的经典中的经典中的经典.自古以来OIer都会经过它的历练(这不是白说吗?),下面就有我herobrine来讲讲这道题的各种做法. 好吧,同志 ...

  10. Linux之旅第一篇-目录结构及操作目录

    一.引言 Linux对java开发来说也是一项必备的技能,因为项目基本都是部署在Linux操作系统的服务器中,虽然项目不一定需要我们去部署,但不管是自己测试环境部署,还是一些生产环境中日志的查看,Li ...