注：经测试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: #333;
}
.role_info input {
width: 100%;
margin-top: 30px;
font-size: 26px;
color: #999;
padding-bottom: 15px;
border-bottom: 1px solid #F3F3F3;
}
.upload_img .img{
position: relative;
}
.close{
z-index: 666;
font-size: 30px;
right: 0;
width: 24px;
height: 24px;
background: #000000;
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="images/upload_img.png" class=‘img_view_0‘ mtype=‘1‘/>
<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[0];
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 == 1){
$(‘.img_view_‘+key).attr(‘mtype‘,2);
var keyR = key+1;
console.log(‘keyR:‘+keyR);
var imgStr = ‘<div class="img cimg_‘+keyR+‘">‘+‘<label class="limg_‘+keyR+‘"><img src="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/wanghaokun/p/9218314.html
时间： 2024-10-13 18:49:33