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

效果图：



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

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

您可能有感兴趣的文章
HTML标签之!DOCTYPE文档类型声明
如何使用html+css代码如何实现冰墩墩和雪容融效果
html中checkbox与radio样式美化的简单实例
div设置可编辑内容的方法
css设置placeholder的颜色样式的方法