HTML5 Plus 如何实现手机APP拍照或相册选择图片上传功能

初秋的风似一支七彩的画笔,走到哪里,哪里就披上秋的盛装,五光十色的鲜花和着七彩的蝴蝶,迎着丰收的景象。五彩缤纷的鲜花撒满大地,丰收的果园一派欣欣向荣的景象,金黄色的稻谷堆满仓,大地一片喜气洋洋。

利用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复制内容到剪贴板
  1. <!doctypehtml>
  2. <htmlclass="feedback">
  3. <head>
  4. <metacharset="utf-8"/>
  5. <metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  6. <metaname="misapplication-tap-highlight"content="no"/>
  7. <metaname="HandheldFriendly"content="true"/>
  8. <metaname="MobileOptimized"content="320"/>
  9. <title>HTML5Plus拍照或者相册选择图片上传</title>
  10. <linkrel="stylesheet"rel="nofollow noopener noreferrer" href="../../css/mui.min.css">
  11. <linkrel="stylesheet"type="text/css"rel="nofollow noopener noreferrer" href="../../css/app.css"/>
  12. <linkrel="stylesheet"type="text/css"rel="nofollow noopener noreferrer" href="../../css/iconfont.css"/>
  13. <linkrel="stylesheet"type="text/css"rel="nofollow noopener noreferrer" href="../../css/feedback-page.css"/>
  14. <linkrel="stylesheet"rel="nofollow noopener noreferrer" href="../../css/font-awesome.min.css">
  15. <scriptsrc="../../js/jquery.js"></script>
  16. <scripttype="text/javascript"src="../../js/common.js"></script>
  17. <scripttype="text/javascript"src="../../js/utitls.js"></script>
  18. <scripttype="text/javascript"src="http://api.map.baidu.com/api?ak=59PBaEOro16CiH2W4CG81zEN&v=2.0"></script>
  19. <styletype="text/css">
  20. .del{
  21. position:absolute;
  22. top:1px;
  23. right:1px;
  24. display:block;
  25. line-height:1;
  26. cursor:pointer;
  27. color:#fff;
  28. }
  29. .del:hover{
  30. color:#ff3333;
  31. }
  32. </style>
  33. <style>
  34. .table-view{
  35. position:relative;
  36. margin-top:0;
  37. margin-bottom:0;
  38. padding-left:0;
  39. list-style:none;
  40. background-color:#f5f5f5;
  41. }
  42. .table-view-cell{
  43. position:relative;
  44. overflow:hidden;
  45. padding:0px15px;
  46. -webkit-touch-callout:none;
  47. margin-bottom:1px;
  48. }
  49. .table-view-cell:after{
  50. position:absolute;
  51. right:0;
  52. bottom:0;
  53. left:0px;
  54. height:1px;
  55. content:'';
  56. -webkit-transform:scaleY(.5);
  57. transform:scaleY(.5);
  58. background-color:#c8c7cc;
  59. }
  60. .table-view-cell>a:not(.btn){
  61. position:relative;
  62. display:block;
  63. overflow:hidden;
  64. margin:-0px-15px;
  65. padding:inherit;
  66. white-space:nowrap;
  67. text-overflow:ellipsis;
  68. color:inherit;
  69. background-color:#75b9f4;
  70. height:40px;
  71. line-height:40px;
  72. }
  73. .navigate-right:after
  74. {
  75. font-family:Muiicons;
  76. font-size:inherit;
  77. line-height:1;
  78. position:absolute;
  79. top:50%;
  80. display:inline-block;
  81. -webkit-transform:translateY(-50%);
  82. transform:translateY(-50%);
  83. text-decoration:none;
  84. color:#666;
  85. -webkit-font-smoothing:antialiased;
  86. }
  87. .table-view-cell.collapse.collapse-content{
  88. position:relative;
  89. display:none;
  90. overflow:hidden;
  91. margin:0px-15px0px;
  92. padding:0px0px!important;
  93. -webkit-transition:height.35sease;
  94. -o-transition:height.35sease;
  95. transition:height.35sease;
  96. background-color:transparent;
  97. }
  98. .image-item{
  99. position:relative;
  100. }
  101. .image-item.info{
  102. position:absolute;
  103. top:0px;
  104. left:4px;
  105. color:#ff9900;
  106. font-size:12px;
  107. }
  108. </style>
  109. </head>
  110. <body>
  111. <headerclass="barbar-nav">
  112. <h1class="title">拍照或者相册选择图片上传</h1>
  113. </header>
  114. <divclass="content">
  115. <divstyle="margin-top:10px;"></div>
  116. <inputtype="hidden"id="ckjl.id"name="ckjl.id"value="429">
  117. <divclass="collapse-content">
  118. <form>
  119. <labelclass="row-label"></label>
  120. <divid='F_CKJLBS'class="rowimage-list">
  121. <divclass="image-item"id="F_CKJLB"onclick="showActionSheet(this);"></div>
  122. </div>
  123. </form>
  124. </div>
  125. </div>
  126. <scriptsrc="../../js/mui.min.js"></script>
  127. <script>
  128. varprocinstid=0;
  129. //初始化页面执行操作
  130. functionplusReady(){
  131. //Android返回键监听事件
  132. plus.key.addEventListener('backbutton',function(){
  133. myclose();
  134. },false);
  135. }
  136. if(window.plus){
  137. plusReady();
  138. }else{
  139. document.addEventListener('plusready',plusReady,false);
  140. }
  141. //加载页面初始化需要加载的图片信息
  142. //或者相册IMG_20160704_112620.jpg
  143. //imgId:图片名称:1467602809090或者IMG_20160704_112620
  144. //imgkey:字段例如:F_ZDDZZ
  145. //ID:站点编号ID,例如429
  146. //src:src="file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/upload/F_ZDDZZ-1467602809090.jpg"
  147. functionshowImgDetail(imgId,imgkey,id,src){
  148. varhtml="";
  149. html+='<divid="Img'+imgId+imgkey+'"class="image-item">';
  150. html+='<imgid="picBig"data-preview-src=""data-preview-group="1"'+src+'/>';
  151. html+='<spanclass="del"onclick="delImg(\''+imgId+'',\''+imgkey+'','+id+');">';
  152. html+='<divclass="fafa-times-circle"></div>';
  153. html+='</span>';
  154. html+='</div>';
  155. $("#"+imgkey+"S").append(html);
  156. }
  157. //删除图片
  158. //imgId:图片名称:IMG_20160704_112614
  159. //imgkey:字段,例如F_ZDDZZ
  160. //ID:站点编号ID,例如429
  161. functiondelImg(imgId,imgkey,id){
  162. varbts=["是","否"];
  163. plus.nativeUI.confirm("是否删除图片?",function(e){
  164. vari=e.index;
  165. if(i==0){
  166. varitemname=id+"img-"+imgkey;//429img-F_ZDDZZ
  167. varitemvalue=plus.storage.getItem(itemname);
  168. //{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}
  169. if(itemvalue!=null){
  170. varindex=itemvalue.indexOf(imgId+",");
  171. if(index==-1){//没有找到
  172. delImgfromint(imgId,imgkey,id,index);
  173. }else{
  174. delImgFromLocal(itemname,itemvalue,imgId,imgkey,index);//修改,加了一个index参数
  175. }
  176. }else{
  177. delImgfromint(imgId,imgkey,id);
  178. }
  179. }
  180. },"查勘",bts);
  181. /*varisdel=confirm("是否删除图片?");
  182. if(isdel==false){
  183. return;
  184. }*/
  185. }
  186. functiondelImgFromLocal(itemname,itemvalue,imgId,imgkey,index){
  187. varwa=plus.nativeUI.showWaiting();
  188. varleft=itemvalue.substr(0,index-1);
  189. varright=itemvalue.substring(index,itemvalue.length);
  190. varend=right.indexOf("}");
  191. rightright=right.substring(end+1,right.length);
  192. varnewitem=left+right;
  193. plus.storage.setItem(itemname,newitem);
  194. myAlert("删除成功");
  195. $("#Img"+imgId+imgkey).remove();
  196. wa.close();
  197. }
  198. //选取图片的来源,拍照和相册
  199. functionshowActionSheet(conf){
  200. vardivid=conf.id;
  201. varactionbuttons=[{title:"拍照"},{title:"相册选取"}];
  202. varactionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};
  203. plus.nativeUI.actionSheet(actionstyle,function(e){
  204. if(e.index==1){
  205. getImage(divid);
  206. }elseif(e.index==2){
  207. galleryImg(divid);
  208. }
  209. });
  210. }
  211. //相册选取图片
  212. functiongalleryImg(divid){
  213. plus.gallery.pick(function(p){
  214. //alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg
  215. plus.io.resolveLocalFileSystemURL(p,function(entry){
  216. //alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg
  217. //alert(entry.name);//IMG_20160704_112620.jpg
  218. compressImage(entry.toLocalURL(),entry.name,divid);
  219. },function(e){
  220. plus.nativeUI.toast("读取拍照文件错误:"+e.message);
  221. });
  222. },function(e){
  223. },{
  224. filename:"_doc/camera/",
  225. filter:"image"
  226. });
  227. }
  228. //拍照
  229. functiongetImage(divid){
  230. varcmr=plus.camera.getCamera();
  231. cmr.captureImage(function(p){
  232. //alert(p);//_doc/camera/1467602809090.jpg
  233. plus.io.resolveLocalFileSystemURL(p,function(entry){
  234. //alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg
  235. //alert(entry.name);//1467602809090.jpg
  236. compressImage(entry.toLocalURL(),entry.name,divid);
  237. },function(e){
  238. plus.nativeUI.toast("读取拍照文件错误:"+e.message);
  239. });
  240. },function(e){
  241. },{
  242. filename:"_doc/camera/",
  243. index:1
  244. });
  245. }
  246. //压缩图片
  247. functioncompressImage(url,filename,divid){
  248. varname="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg
  249. plus.zip.compressImage({
  250. src:url,//src:(String类型)压缩转换原始图片的路径
  251. dst:name,//压缩转换目标图片的路径
  252. quality:20,//quality:(Number类型)压缩图片的质量.取值范围为1-100
  253. overwrite:true//overwrite:(Boolean类型)覆盖生成新文件
  254. },
  255. function(event){
  256. //uploadf(event.target,divid);
  257. varpath=name;//压缩转换目标图片的路径
  258. //event.target获取压缩转换后的图片url路
  259. //filename图片名称
  260. saveimage(event.target,divid,filename,path);
  261. },function(error){
  262. plus.nativeUI.toast("压缩图片失败,请稍候再试");
  263. });
  264. }
  265. //保存信息到本地
  266. /**
  267. *
  268. *@param{Object}url图片的地址
  269. *@param{Object}divid字段的名称
  270. *@param{Object}name图片的名称
  271. */
  272. functionsaveimage(url,divid,name,path){
  273. //alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg
  274. //alert(path);//_doc/upload/F_ZDDZZ-1467602809090.jpg
  275. varstate=0;
  276. varwt=plus.nativeUI.showWaiting();
  277. //plus.storage.clear();
  278. namename=name.substring(0,name.indexOf("."));//图片名称:1467602809090
  279. varid=document.getElementById("ckjl.id").value;
  280. varitemname=id+"img-"+divid;//429img-F_ZDDZ
  281. varitemvalue=plus.storage.getItem(itemname);
  282. if(itemvalue==null){
  283. 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}
  284. }else{
  285. itemvalueitemvalue=itemvalue+"{"+name+","+path+","+url+"}";
  286. }
  287. plus.storage.setItem(itemname,itemvalue);
  288. varsrc='src="'+url+'"';
  289. //alert("itemvalue="+itemvalue);
  290. showImgDetail(name,divid,id,src);
  291. wt.close();
  292. }
  293. //上传图片,实例中没有添加上传按钮
  294. functionuploadimge(agree,back){
  295. //plus.storage.clear();
  296. varwa=plus.nativeUI.showWaiting();
  297. varDkeyNames=[];
  298. varid=document.getElementById("ckjl.id").value;
  299. varlength=id.toString().length;
  300. varididnmae=id.toString();
  301. varnumKeys=plus.storage.getLength();
  302. vartask=plus.uploader.createUpload(getUrl()+'url',{
  303. method:"POST"
  304. },
  305. function(t,status){
  306. if(status==200){
  307. console.log("上传成功");
  308. $.ajax({
  309. type:"post",
  310. url:getUrl()+'url',
  311. data:{
  312. taskId:taskId,
  313. voteAgree:agree,
  314. back:back,
  315. voteContent:$("#assign").val(),
  316. },
  317. async:true,
  318. dataType:"text",
  319. success:function(data){
  320. wa.close();
  321. goList(data);
  322. },
  323. error:function(){
  324. wa.close();
  325. myAlert("网络错误,提交审批失败,请稍候再试");
  326. }
  327. });
  328. }else{
  329. wa.close();
  330. console.log("上传失败");
  331. }
  332. }
  333. );
  334. task.addData("id",id);
  335. for(vari=0;i<imgArray.length;i++){
  336. varitemkey=id+"img-"+imgArray[i];
  337. if(plus.storage.getItem(itemkey)!=null){
  338. varitemvalue=plus.storage.getItem(itemkey).split("{");
  339. for(varimg=1;img<itemvalue.length;img++){
  340. varimgname=itemvalue[img].substr(0,itemvalue[img].indexOf(","));
  341. varimgurl=itemvalue[img].substring(itemvalue[img].indexOf(",")+1,itemvalue[img].lastIndexOf(","));
  342. task.addFile(imgurl,{key:imgurl});
  343. }
  344. }
  345. }
  346. task.start();
  347. }
  348. </script>
  349. </body>
  350. </html>

效果图:



以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

原文链接:http://blog.csdn.net/qq_27626333/article/details/51896616

您可能有感兴趣的文章
HTML标签之!DOCTYPE文档类型声明

如何使用html+css代码如何实现冰墩墩和雪容融效果

html中checkbox与radio样式美化的简单实例

div设置可编辑内容的方法

css设置placeholder的颜色样式的方法