HTML5 Plus 实现手机APP拍照或相册选择图片上传功能_html5_网页制作_脚本之家
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能07-13 16:31:20作者：脚本之家
利用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&&
&class=&feedback&&&
&&&charset=&utf-8&&&&
&&&name=&viewport&&content=&width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no&&&&
&&&name=&misapplication-tap-highlight&&content=&no&&&&
&&&name=&HandheldFriendly&&content=&true&&&&
&&&name=&MobileOptimized&&content=&320&&&&
&&HTML5&Plus&拍照或者相册选择图片上传&&
&&&rel=&stylesheet&&href=&../../css/mui.min.css&&&
&&&rel=&stylesheet&&type=&text/css&&href=&../../css/app.css&&&&
&&&rel=&stylesheet&&type=&text/css&&href=&../../css/iconfont.css&&&&
&&&rel=&stylesheet&&type=&text/css&&href=&../../css/feedback-page.css&&&&
&&&rel=&stylesheet&&href=&../../css/font-awesome.min.css&&&
&&&src=&../../js/jquery.js&&&
&&&type=&text/javascript&&src=&../../js/common.js&&&
&&&type=&text/javascript&&src=&../../js/utitls.js&&&
&&&type=&text/javascript&&src=&http://api./api?ak=59PBaEOro16CiH2W4CG81zEN&v=2.0&&&
&&&type=&text/css&&&
&&&.del&{ &&
&&&&position:& &&
&&&&top:1 &&
&&&&right:&1& &&
&&&&display:&&&&&&& &&
&&&&&&&line-height:&1; &&
&&&&&&&cursor:& &&
&&&&&&&color:# &&
&&&.del:hover&{ &&
&&&&color:#ff3333; &&
&&&.table-view&{ &&
&&&&position:& &&
&&&&margin-top:&0; &&
&&&&margin-bottom:&0; &&
&&&&padding-left:&0; &&
&&&&list-style:& &&
&&&&background-color:&#f5f5f5; &&
&&&.table-view-cell&{ &&
&&&&position:& &&
&&&&overflow:& &&
&&&&padding:&0px&15 &&
&&&&-webkit-touch-callout:& &&
&&&&margin-bottom:&1 &&
&&&.table-view-cell:after&{ &&
&&&&position:& &&
&&&&right:&0; &&
&&&&bottom:&0; &&
&&&&left:&0 &&
&&&&height:&1 &&
&&&&content:&''; &&
&&&&-webkit-transform:&scaleY(.5); &&
&&&&transform:&scaleY(.5); &&
&&&&background-color:&#c8c7 &&
&&&.table-view-cella:not(.btn)&{ &&
&&&&position:& &&
&&&&display:& &&
&&&&overflow:& &&
&&&&margin:&-0px&-15 &&
&&&&padding:& &&
&&&&white-space:& &&
&&&&text-overflow:& &&
&&&&color:& &&
&&&&background-color:Kb9f4; &&
&&&&height:&40 &&
&&&&line-height:&40 &&
&&&.navigate-right:after &&
&&&&font-family:&M &&
&&&&font-size:& &&
&&&&line-height:&1; &&
&&&&position:& &&
&&&&top:&50%; &&
&&&&display:&inline- &&
&&&&-webkit-transform:&translateY(-50%); &&
&&&&transform:&translateY(-50%); &&
&&&&text-decoration:& &&
&&&&color:ʚ &&
&&&&-webkit-font-smoothing:& &&
&&&.table-view-cell.collapse&.collapse-content&{ &&
&&&&position:& &&
&&&&display:& &&
&&&&overflow:& &&
&&&&margin:&0px&-15px&0 &&
&&&&padding:&0px&0px&! &&
&&&&-webkit-transition:&height&.35s& &&
&&&&-o-transition:&height&.35s& &&
&&&&transition:&height&.35s& &&
&&&&background-color:& &&
&&&.image-item{ &&
&&&&position:& &&
&&&.image-item&.info{ &&
&&&&position:& &&
&&&&top:0 &&
&&&&left:4 &&
&&&&color:&#ff9900; &&
&&&&font-size:&12&&&&&& &&
&&&class=&bar&bar-nav&&&
&&&&class=&title&拍照或者相册选择图片上传&&
&&&class=&content&&&
&&&&style=&margin-top:&10&&&
&&&&type=&hidden&&id=&ckjl.id&&name=&ckjl.id&&value=&429&&&
&&&&&&class=&collapse-content&&&&
&&&&&&&&class=&row-label&&&
&&&&&&&&id='F_CKJLBS'&class=&row&image-list&&&
&&&&&&&&&class=&image-item&&&id=&F_CKJLB&&onclick=&showActionSheet(this);&&&
&&&src=&../../js/mui.min.js&&&
&var&procinstid&=&0; &&
&//初始化页面执行操作 &&
&function&plusReady()&{ &&
&&//Android返回键监听事件 &&
&&plus.key.addEventListener('backbutton',function(){ &&
&&&myclose(); &&
&&},false); &&
&if&(window.plus)&{ &&
&&plusReady(); &&
&}&else&{ &&
&&document.addEventListener('plusready',&plusReady,&false); &&
&&//加载页面初始化需要加载的图片信息 &&
&&//或者相册IMG_620.jpg &&
&&//imgId:图片名称：0或者IMG_620 &&
&&//imgkey:字段例如：F_ZDDZZ &&
&&//ID：站点编号ID,例如429 &&
&&//src：src=&file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/upload/F_ZDDZZ-0.jpg&&&
&&function&showImgDetail&(imgId,imgkey,id,src)&{&& &&
&&&var&html&=&&&; &&
&&&html&+='&&id=&Img'+imgId+imgkey+'&&class=&image-item&&';& &&
&&&html&+='&&id=&picBig&&data-preview-src=&&&data-preview-group=&1&&'+src+''; &&
&&&html&+='&&class=&del&&onclick=&delImg(\''+imgId+'\',\''+imgkey+'\','+id+');&';&&&& &&
&&&html&+='&&&class=&fa&fa-times-circle&';& &&
&&&html&+='&';& &&
&&&html&+=''; &&
&&&$(&#&+imgkey+&S&).append(html); &&
&&//删除图片 &&
&&//imgId:图片名称：IMG_614 &&
&&//imgkey:字段，例如F_ZDDZZ &&
&&//ID：站点编号ID，例如429 &&
&&function&delImg(imgId,imgkey,id){ &&
&&&var&bts&=&[&是&,&&否&]; &&
&&&plus.nativeUI.confirm(&是否删除图片？&,&function(e)&{ &&
&&&&&var&i&=&e. &&
&&&&&if&(i&==&0)&{ &&
&&&&&&var&itemname=id+&img-&+//429img-F_ZDDZZ &&
&&&&&&var&itemvalue=plus.storage.getItem(itemname); &&
&&&&&&//{IMG_614,_doc/upload/F_ZDDZZ-IMG_614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-0.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){ &&
&&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(&}&); &&
&&&&&rightright=right.substring(end+1,right.length); &&
&&&&&var&newitem=left+ &&
&&&&&plus.storage.setItem(itemname,newitem);& &&
&&&&&myAlert(&删除成功&); &&
&&&&&$(&#Img&+imgId+imgkey).remove(); &&
&&&&&wa.close(); &&
&&//选取图片的来源，拍照和相册 &&
&&function&showActionSheet(conf){ &&
&&&&&var&divid&=&conf. &&
&&&&&&&&&&&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_620.jpg &&
&&&&&&&&&&&&&plus.io.resolveLocalFileSystemURL(p,&function(entry)&{ &&
&&&&&&&&&&&&&&//alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_620.jpg &&
&&&&&//alert(entry.name);//IMG_620.jpg &&
&&&&&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)&{ &&
&&&&//alert(p);//_doc/camera/0.jpg &&
&&&&plus.io.resolveLocalFileSystemURL(p,&function(entry)&{ &&
&&&&&//alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/0.jpg &&
&&&&&//alert(entry.name);//0.jpg &&
&&&&&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+&-&+//_doc/upload/F_ZDDZZ-0.jpg &&
&&&pressImage({ &&
&&&&&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){ &&
&&&//alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-0.jpg &&
&&&//alert(path);//_doc/upload/F_ZDDZZ-0.jpg &&
&&&var&&state=0; &&
&&&var&wt&=&plus.nativeUI.showWaiting(); &&
&&&&//&&plus.storage.clear();& &&
&&&namename=name.substring(0,name.indexOf(&.&));//图片名称：0 &&
&&&var&id&=&document.getElementById(&ckjl.id&). &&
&&&var&itemname=id+&img-&+//429img-F_ZDDZ &&
&&&var&itemvalue=plus.storage.getItem(itemname); &&
&&&if(itemvalue==null){ &&
&&&&itemvalue=&{&+name+&,&+path+&,&+url+&}&;//{IMG_614,_doc/upload/F_ZDDZZ-IMG_614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-0.jpg} &&
&&&}else{&& &&
&&&&itemvalueitemvalue=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&).& &&
&&&var&length=id.toString().& &&
&&&var&ididnmae=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;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;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(); &&
& & & & & & &
& & & & & & &
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
原文链接：推荐到广播
47245 人聚集在这个小组
(阳光的笑脸)
(影子浅不是魂淡)
(小白不黑)
(嗜睡的蛇)
第三方登录：
