web调用手机相册，并实现动态增加图片功能

注：经测试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/tandaxia/p/5125275.html

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

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

posted on 2018-06-23 18:19  爱吃柠檬不加糖  阅读(461)  评论(0)  编辑  收藏  举报

导航