HTML5 Plus 拍照或者相簿選擇圖片上傳
阿新 • • 發佈：2018-12-26
版權宣告：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/qq_27626333/article/details/51896616
HBuilder+HTML5 Plus+MUI實現拍照或者相簿選擇圖片上傳，利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader來實現手機APP拍照或者從相簿選擇圖片上傳。Camera模組管理裝置的攝像頭，可用於拍照、攝像操作，通過plus.camera獲取攝像頭管理物件。Gallery模組管理系統相簿，支援從相簿中選擇圖片或視訊檔案、儲存圖片或視訊檔案到相簿等功能。通過plus.gallery獲取相簿管理物件。IO模組管理本地檔案系統，用於對檔案系統的目錄瀏覽、檔案的讀取、檔案的寫入等操作。通過plus.io可獲取檔案系統管理物件。Storage模組管理應用本地資料儲存區，用於應用資料的儲存和讀取。應用本地資料與localStorage、sessionStorage的區別在於資料有效域不同，前者可在應用內跨域操作，資料儲存期是持久化的，並且沒有容量限制。通過plus.storage可獲取應用本地資料管理物件。Uploader模組管理網路上傳任務，用於從本地上傳各種檔案到伺服器，並支援跨域訪問操作。通過plus.uploader可獲取上傳管理物件。Uploader上傳使用HTTP的POST方式提交資料，資料格式符合Multipart/form-data規範，即rfc1867（Form-based File Upload in HTML）協議。
拍照或相簿選取一張demo下載地址：http://pan.baidu.com/s/1cqnSNs
拍照或相簿選取多張demo下載地址：http://pan.baidu.com/s/1o7UQHxo
<!doctype html> <html class="feedback"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta name="misapplication-tap-highlight" content="no" /> <meta name="HandheldFriendly" content="true" /> <meta name="MobileOptimized" content="320" /> <title>HTML5 Plus 拍照或者相簿選擇圖片上傳</title> <link rel="stylesheet" href="../../css/mui.min.css"> <link rel="stylesheet" type="text/css" href="../../css/app.css" /> <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" /> <link rel="stylesheet" type="text/css" href="../../css/feedback-page.css" /> <link rel="stylesheet" href="../../css/font-awesome.min.css"> <script src="../../js/jquery.js"></script> <script type="text/javascript" src="../../js/common.js"></script> <script type="text/javascript" src="../../js/utitls.js"></script> <style type="text/css"> .del { position: absolute; top:1px; right: 1px; display: block; line-height: 1; cursor: pointer; color:#fff; } .del:hover { color:#ff3333; } </style> <style> .table-view { position: relative; margin-top: 0; margin-bottom: 0; padding-left: 0; list-style: none; background-color: #f5f5f5; } .table-view-cell { position: relative; overflow: hidden; padding: 0px 15px; -webkit-touch-callout: none; margin-bottom: 1px; } .table-view-cell:after { position: absolute; right: 0; bottom: 0; left: 0px; height: 1px; content: ''; -webkit-transform: scaleY(.5); transform: scaleY(.5); background-color: #c8c7cc; } .table-view-cell>a:not(.btn) { position: relative; display: block; overflow: hidden; margin: -0px -15px; padding: inherit; white-space: nowrap; text-overflow: ellipsis; color: inherit; background-color: #75b9f4; height: 40px; line-height: 40px; } .navigate-right:after { font-family: Muiicons; font-size: inherit; line-height: 1; position: absolute; top: 50%; display: inline-block; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-decoration: none; color: #666; -webkit-font-smoothing: antialiased; } .table-view-cell.collapse .collapse-content { position: relative; display: none; overflow: hidden; margin: 0px -15px 0px; padding: 0px 0px !important; -webkit-transition: height .35s ease; -o-transition: height .35s ease; transition: height .35s ease; background-color: transparent; } .image-item{ position: relative; } .image-item .info{ position: absolute; top:0px; left:4px; color: #ff9900; font-size: 12px; } </style> </head> <body> <header class="bar bar-nav"> <h1 class="title">拍照或者相簿選擇圖片上傳</h1> </header> <div class="content"> <div style="margin-top: 10px;"></div> <input type="hidden" id="ckjl.id" name="ckjl.id" value="429"> <div class="collapse-content" > <form> <label class="row-label"></label> <div id='F_CKJLBS' class="row image-list"> <div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div> </div> </form> </div> </div> <script src="../../js/mui.min.js"></script> <script> var procinstid = 0; //初始化頁面執行操作 function plusReady() { //Android返回鍵監聽事件 plus.key.addEventListener('backbutton',function(){ myclose(); },false); } if (window.plus) { plusReady(); } else { document.addEventListener('plusready', plusReady, false); } //載入頁面初始化需要載入的圖片資訊 function showImgDetail (imgId,imgkey,id,src) { var html = ""; html +='<div id="Img'+imgId+imgkey+'" class="image-item ">'; html +=' <img id="picBig" data-preview-src="" data-preview-group="1" '+src+'/>'; html +=' <span class="del" onclick="delImg(\''+imgId+'\',\''+imgkey+'\','+id+');">'; html +=' <div class="fa fa-times-circle"></div>'; html +=' </span>'; html +='</div>'; $("#"+imgkey+"S").append(html); } //刪除圖片 function delImg(imgId,imgkey,id){ var bts = ["是", "否"]; plus.nativeUI.confirm("是否刪除圖片？", function(e) { var i = e.index; if (i == 0) { var itemname=id+"img-"+imgkey; var itemvalue=plus.storage.getItem(itemname); if(itemvalue!=null){ var index=itemvalue.indexOf(imgId+","); if(index==-1){//沒有找到 delImgfromint(imgId,imgkey,id,index); }else{ delImgFromLocal(itemname,itemvalue,imgId,imgkey,index); //修改，加了一個index引數 } }else{ delImgfromint(imgId,imgkey,id); } } },"查勘", bts); /*var isdel = confirm("是否刪除圖片？"); if(isdel == false){ return; }*/ } function delImgFromLocal(itemname,itemvalue,imgId,imgkey,index){ var wa = plus.nativeUI.showWaiting(); var left=itemvalue.substr(0,index-1); var right=itemvalue.substring(index,itemvalue.length); var end=right.indexOf("}"); right=right.substring(end+1,right.length); var newitem=left+right; plus.storage.setItem(itemname,newitem); myAlert("刪除成功"); $("#Img"+imgId+imgkey).remove(); wa.close(); } //選取圖片的來源，拍照和相簿 function showActionSheet(conf){ var divid = conf.id; var actionbuttons=[{title:"拍照"},{title:"相簿選取"}]; var actionstyle={title:"選擇照片",cancel:"取消",buttons:actionbuttons}; plus.nativeUI.actionSheet(actionstyle, function(e){ if(e.index==1){ getImage(divid); }else if(e.index==2){ galleryImg(divid); } } ); } //相簿選取圖片 function galleryImg(divid) { plus.gallery.pick( function(p){ plus.io.resolveLocalFileSystemURL(p, function(entry) { compressImage(entry.toLocalURL(),entry.name,divid); }, function(e) { plus.nativeUI.toast("讀取拍照檔案錯誤：" + e.message); }); }, function ( e ) { }, { filename: "_doc/camera/", filter:"image" } ); } // 拍照 function getImage(divid) { var cmr = plus.camera.getCamera(); cmr.captureImage(function(p) { plus.io.resolveLocalFileSystemURL(p, function(entry) { compressImage(entry.toLocalURL(),entry.name,divid); }, function(e) { plus.nativeUI.toast("讀取拍照檔案錯誤：" + e.message); }); }, function(e) { }, { filename: "_doc/camera/", index: 1 }); } //壓縮圖片 function compressImage(url,filename,divid){ var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg plus.zip.compressImage({ src:url,//src: (String 型別 )壓縮轉換原始圖片的路徑 dst:name,//壓縮轉換目標圖片的路徑 quality:20,//quality: (Number 型別 )壓縮圖片的質量.取值範圍為1-100 overwrite:true//overwrite: (Boolean 型別 )覆蓋生成新檔案 }, function(event) { //uploadf(event.target,divid); var path = name;//壓縮轉換目標圖片的路徑 //event.target獲取壓縮轉換後的圖片url路 //filename圖片名稱 saveimage(event.target,divid,filename,path); },function(error) { plus.nativeUI.toast("壓縮圖片失敗，請稍候再試"); }); } //儲存資訊到本地 /** * * @param {Object} url 圖片的地址 * @param {Object} divid 欄位的名稱 * @param {Object} name 圖片的名稱 */ function saveimage(url,divid,name,path){ var state=0; var wt = plus.nativeUI.showWaiting(); // plus.storage.clear(); name=name.substring(0,name.indexOf(".")); var id = document.getElementById("ckjl.id").value; var itemname=id+"img-"+divid; var itemvalue=plus.storage.getItem(itemname); if(itemvalue==null){ itemvalue="{"+name+","+path+","+url+"}"; }else{ itemvalue=itemvalue+"{"+name+","+path+","+url+"}"; } plus.storage.setItem(itemname, itemvalue); var src = 'src="'+url+'"'; //alert("itemvalue="+itemvalue); showImgDetail(name,divid,id,src); wt.close(); } //上傳圖片，例項中沒有新增上傳按鈕 function uploadimge(agree,back) { //plus.storage.clear(); var wa = plus.nativeUI.showWaiting(); var DkeyNames=[]; var id = document.getElementById("ckjl.id").value; var length=id.toString().length; var idnmae=id.toString(); var numKeys=plus.storage.getLength(); var task = plus.uploader.createUpload('http://demo.dcloud.net.cn/helloh5/uploader/upload.php', { method: "POST" }, function(t, status) { if (status == 200) { console.log("上傳成功"); } else { wa.close(); console.log("上傳失敗"); } } ); task.addData("id",id); for(var i=0; i<imgArray.length;i++){ var itemkey=id+"img-"+imgArray[i]; if(plus.storage.getItem(itemkey)!=null){ var itemvalue=plus.storage.getItem(itemkey).split("{"); for(var img=1;img<itemvalue.length;img++){ var imgname=itemvalue[img].substr(0,itemvalue[img].indexOf(",")); var imgurl=itemvalue[img].substring(itemvalue[img].indexOf(",")+1,itemvalue[img].lastIndexOf(",")); task.addFile(imgurl,{key:imgurl}); } } } task.start(); } </script> </body> </html>