HTML5 Plus 實現手機APP拍照或相冊選擇圖片上傳功能

2020-03-24 19:22:49

字體：大中小

來源：轉載

供稿：網友

利用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）協議。XML/HTML Code復制內容到剪貼板
-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-15px0px; padding:0px0px!important; -webkit-transition:height.35sease; -o-transition:height.35sease; transition:height.35sease; 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 'F_CKJLBS' '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 functionshowImgDetail(imgId,imgkey,id,src){ varhtml= ; html+=' divid= Img'+imgId+imgkey+' '; html+=' imgid= picBig data-preview-src= data-preview-group= 1 '+src+'/ '; html+=' span ''+imgId+'/',/''+imgkey+'/','+id+'); '; html+=' div '; html+=' /span '; html+=' /div '; $( # +imgkey+ S ).append(html); } //刪除圖片 //imgId:圖片名稱：IMG_20160704_112614 //imgkey:字段，例如F_ZDDZZ //ID：站點編號ID，例如429 functiondelImg(imgId,imgkey,id){ varbts=[ 是 , 否 plus.nativeUI.confirm( 是否刪除圖片？ ,function(e){ vari=e.index; if(i==0){ varitemname=id+ img- +imgkey;//429img-F_ZDDZZ varitemvalue=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){ varindex=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); /*varisdel=confirm( 是否刪除圖片？ if(isdel==false){ return; }*/ } functiondelImgFromLocal(itemname,itemvalue,imgId,imgkey,index){ varwa=plus.nativeUI.showWaiting(); varleft=itemvalue.substr(0,index-1); varright=itemvalue.substring(index,itemvalue.length); varend=right.indexOf( } rightright=right.substring(end+1,right.length); varnewitem=left+right; plus.storage.setItem(itemname,newitem); myAlert( 刪除成功 $( #Img +imgId+imgkey).remove(); wa.close(); } //選取圖片的來源，拍照和相冊 functionshowActionSheet(conf){ vardivid=conf.id; varactionbuttons=[{title: 拍照 },{title: 相冊選取 }]; varaction 'src= '+url+' //alert( itemvalue= +itemvalue); showImgDetail(name,divid,id,src); wt.close(); } //上傳圖片，實例中沒有添加上傳按鈕 functionuploadimge(agree,back){ //plus.storage.clear(); varwa=plus.nativeUI.showWaiting(); varDkeyNames=[]; varid=document.getElementById( ckjl.id ).value; varlength=id.toString().length; varididnmae=id.toString(); varnumKeys=plus.storage.getLength(); vartask=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(vari=0;i imgArray.length;i++){ varitemkey=id+ img- +imgArray[i]; if(plus.storage.getItem(itemkey)!=null){ varitemvalue=plus.storage.getItem(itemkey).split( { for(varimg=1;img itemvalue.length;img++){ varimgname=itemvalue[img].substr(0,itemvalue[img].indexOf( , )); varimgurl=itemvalue[img].substring(itemvalue[img].indexOf( , )+1,itemvalue[img].lastIndexOf( , )); task.addFile(imgurl,{key:imgurl}); } } } task.start(); } /script /body /html

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持phpstudy。原文鏈接：http://blog.csdn.net/qq_27626333/article/details/51896616html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5中form表單標簽用法詳解

下一篇：HTML中的caption屬性是什么意思？caption標簽在HTML中