HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
更新时间:2023-04-06 20:55:22 阅读： 评论：0
利用html plus的camera、galleryio、storage和uploader来实现手机app拍照或者从相册选择图片上传。camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。gall新兵日记ery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。io模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。storage模块管理应用本地数据存储区，用于应用数据的保存和读取。应用本地数据与localstorage、ssionstorage的区别在于数据有效域不同，前者可在应用内跨域操作，数据存储期是持久化的，并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。通过plus.uploader可获取上传管理对象。uploader上传使用http的post方式提交数据，数据格式符合multipart/form-data规范，即rfc1867（form-bad file upload in html）协议。
xml/html code
复制内容到剪贴板
<!doctypehtml> <htmlclass=“feedback”> <head> <metachart=“utf-8”/> <metaname=“viewport”content=“width=device-width,initial-scale=1.0,maximum-scale=1.0,ur-scalable=no”/> <metaname=“misapplication-tap-highlight”content=“no”/> <metaname=“handheldfriendly”content=“true”/> <metaname=“mobileoptimized”content=“320”/> <title>html5plus拍照或者相册选择图片上传</title> <linkrel=“stylesheet”href=“../../css/mui.min.css”> <linkrel=“stylesheet”type=“text/css”href=“../../css/app.css”/> <linkrel=“stylesheet”type=“text/css”href=“../../css/iconfont.css”/> <linkrel=“stylesheet”type=“text/css”href=“../../css/feedback-page.css”/> <linkrel=“stylesheet”href=“../../css/font-awesome.min.css”> <scriptsrc=“../../js/jquery.js”></script> <scripttype=“text/javascript”src=“../../js/common.js”></script> <scripttype=“text/javascript”src=“../../js/utitls.js”></script> <scripttype=“text/javascript”src=“/d/file/titlepic/api <styletype=“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:0px15px; -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:antialiad; } .table-view-cell.collap.collap-content{ position:relative; display:none; overflow:hidden; margin:0px-15px0px; padding:0px0px!important; -webkit-transition:height.35a; -o-transition:height.35a; transition:height.35a; background-color:transparent; } .image-item{ position:relative; } .image-item.info{ position:absolute; top:0px; left:4px; color:#ff9900; font-size:12px; } </style> </head> <body> <headerclass=“barbar-nav”> <h1class=“title”>拍照或者相册选择图片上传</h1> </header> <divclass=“content”> <divstyle=“margin-top:10px;”></div> <inputtype=“hidden”id=“ckjl.id”name=“ckjl.id”value=“429”> <divclass=“collap-content”> <form> <labelclass=“row-label”></label> <divid=‘f_ckjlbs’class=“rowimage-list”> <divclass=“image-item“id=“f_ckjlb”onclick=“showactionsheet(this);”></div> </div> </form> </div> </div> <scriptsrc=“../../js/mui.min.js”></script> <2017集五福;script> varprocinstid=0; //初始化页面执行操作 functionplusready(){ //android返回键监听事件 plus.key.addeventlistener(‘backbutton’,function(){ myclo(); },fal); } if(window.plus){ plusready(); }el{ document.addeventlistener(‘plusready’,plusready,fal); } //加载页面初始化需要加载的图片信息 //或者相册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+'”class=“image-item“>‘; html+=’<imgid=“picbig”data-preview-src=“”data-preview-group=“1”‘+src+’/>‘; html+=’<spanclass=“del”onclick=“delimg(\”+imgid+’\’,\”+imgkey+’\’,’+id+’);”>‘; html+=’<divclass=“fafa-times-circle”></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); }el{ delimgfromlocal(itemname,itemvalue,imgid,imgkey,index);//修改，加了一个index参数 } }el{ delimgfromint(imgid,imgkey,id); } } },”查勘”,bts); /*varisdel=confirm(“是否删除图片？”); if(isdel==fal){ 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.titem(itemname,newitem); myalert(“删除成功”); $(“#img”+imgid+imgkey).remove(); wa.clo(); } //选取图片的来源，拍照和相册 functionshowactionsheet(conf){ vardivid=conf.id; varactionbuttons=[{title:”拍照”},{title:”相册选取”}]; varactionstyle={title:”选择照片”,cancel:”取消”,buttons:actionbuttons}; plus.nativeui.actionsheet(actionstyle,function(e){ if(e.index==1){ getimage(divid); }elif(e.index==2){ galleryimg(divid); } }); } //相册选取图片 functiongalleryimg(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.jpg compressimage(entry.tolocalurl(),entry.name,divid); },function(e){ plus.nativeui.toast(“读取拍照文件错误：”+e.message); }); },function(e){ },{ filename:“_doc/camera/”, filter:”image” }); } //拍照 functiongetimage(divid){ varcmr=plus.camera.getcamera(); cmr.captureimage(function(p){ //alert(p);//_doc/camera/1467602809090.jpg plus.io.resolvelo南农大calfilesystemurl(p,function(entry){ //alert(entry.tolocalurl());//file:///storage/emulated/0/android/data/io.dcloud…../doc/camera/1467602809090.jpg //alert(entry.name);//1467602809090.jpg compressimage(entry.tolocalurl(),entry.name,divid); },function(e){ plus.nativeui.toast(“读取拍照文件错误：”+e.message); }); },function(e){ },{ filename:“_doc/camera/”, index:1 }); } //压缩图片 functioncompressimage(url,filename,divid){ varname=“_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); varpath=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图片的名称 */ functionsaveimage(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.jpg varstate=0; varwt=plus.nativeui.showwaiting(); //plus.storage.clear(); namename=name.substring(0,name.indexof(“.”));//图片名称：1467602809090 varid=document.getelementbyid(“ckjl.id”).value; varitemname=id+”img-“+divid;//429img-f_zddz varitemvalue=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} }el{ itemvalueitemvalue=itemvalue+”{“+name+再而衰”,”+path+”,”+url+”}”; } plus.storage.titem(itemname,itemvalue); varsrc=‘src=”‘+url+'”‘; //alert(“itemvalue=”+itemvalue); showimgdetail(name,divid,id,src); wt.clo(); } //上传图片，实例中没有添加上传按钮 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.clo(); golist(data); }, error:function(){ wa.clo(); myalert(“网络错误，提交审批失败，请稍候再试”); } }); }el{ wa.clo(); 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> 效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
原文链接：
本文word下载地址：HTML5 Plus 实现手机APP拍照或相册选择图片上传功能.doc
本文 PDF 下载地址：HTML5 Plus 实现手机APP拍照或相册选择图片上传功能.pdf
