web調用手機相冊，並實現動態增加圖片功能
阿新 • • 發佈：2018-06-23
ogr capture form use rod index oot 3.3 jquery
註：經測試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>
效果圖：
web調用手機相冊，並實現動態增加圖片功能