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中