web调用手机相册，并实现动态增加图片功能
Posted CIBLE
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于web调用手机相册，并实现动态增加图片功能的主要内容，如果未能解决你的问题，请参考以下文章
怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片