標籤：
利用HTML Plus的Camera、GalleryIO、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）協議。
<!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><script type="text/javascript" src="http://api.map.baidu.com/api?ak=59PBaEOro16CiH2W4CG81zEN&v=2.0"></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);}//載入頁面初始化需要載入的圖片資訊//或者相簿IMG_20160704_112620.jpg//imgId:圖片名稱：1467602809090或者IMG_20160704_112620//imgkey:欄位例如：F_ZDDZZ//ID：網站編號ID,例如429//src：src="file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/upload/F_ZDDZZ-1467602809090.jpg"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);}//刪除圖片//imgId:圖片名稱：IMG_20160704_112614//imgkey:欄位，例如F_ZDDZZ//ID：網站編號ID，例如429function delImg(imgId,imgkey,id){var bts = ["是", "否"];plus.nativeUI.confirm("是否刪除圖片？", function(e) {var i = e.index;if (i == 0) {var itemname=id+"img-"+imgkey;//429img-F_ZDDZZvar itemvalue=plus.storage.getItem(itemname);//{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}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){ //alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg plus.io.resolveLocalFileSystemURL(p, function(entry) { //alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg//alert(entry.name);//IMG_20160704_112620.jpgcompressImage(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) {//alert(p);//_doc/camera/1467602809090.jpgplus.io.resolveLocalFileSystemURL(p, function(entry) {//alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg//alert(entry.name);//1467602809090.jpgcompressImage(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.jpgplus.zip.compressImage({src:url,//src: (String 類型 )壓縮轉換原始圖片的路徑dst:name,//壓縮轉換靶心圖表片的路徑quality:20,//quality: (Number 類型 )壓縮圖片的品質.取值範圍為1-100overwrite: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){//alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg//alert(path);//_doc/upload/F_ZDDZZ-1467602809090.jpgvar state=0;var wt = plus.nativeUI.showWaiting(); // plus.storage.clear(); name=name.substring(0,name.indexOf("."));//圖片名稱：1467602809090var id = document.getElementById("ckjl.id").value;var itemname=id+"img-"+divid;//429img-F_ZDDZvar itemvalue=plus.storage.getItem(itemname);if(itemvalue==null){itemvalue="{"+name+","+path+","+url+"}";//{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}}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(getUrl() + 'url', {method: "POST"},function(t, status) {if (status == 200) {console.log("上傳成功"); $.ajax({type: "post",url: getUrl() + 'url',data: {taskId: taskId,voteAgree: agree,back: back,voteContent: $("#assign").val(),},async: true,dataType: "text",success: function(data) {wa.close();goList(data);},error: function() {wa.close();myAlert("網路錯誤，提交審批失敗，請稍候再試");}}); } 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>
HTML5 Plus 拍照或者相簿選擇圖片上傳
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
