返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2019-01-28 22:21:54于丽

利用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. <!doctype html>   <html class="feedback">  
  2.  <head>     <meta charset="utf-8" />  
  3.   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />     <meta name="misapplication-tap-highlight" content="no" />  
  4.   <meta name="HandheldFriendly" content="true" />     <meta name="MobileOptimized" content="320" />  
  5.   <title>HTML5 Plus 拍照或者相册选择图片上传</title>     <link rel="stylesheet" href="../../css/mui.min.css">  
  6.   <link rel="stylesheet" type="text/css" href="../../css/app.css" />     <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />  
  7.   <link rel="stylesheet" type="text/css" href="../../css/feedback-page.css" />     <link rel="stylesheet" href="../../css/font-awesome.min.css">  
  8.   <script src="../../js/jquery.js"></script>     <script type="text/javascript" src="../../js/common.js"></script>  
  9.   <script type="text/javascript" src="../../js/utitls.js"></script>     <script type="text/javascript" src="http://api.map.baidu.com/api?ak=59PBaEOro16CiH2W4CG81zEN&v=2.0"></script>  
  10.   <style type="text/css">      .del {   
  11.     position: absolute;        top:1px;   
  12.     right: 1px;         display: block;         
  13.        line-height: 1;           cursor: pointer;   
  14.        color:#fff;        }   
  15.       .del:hover {   
  16.     color:#ff3333;       }   
  17.   </style>     <style>  
  18.    .table-view {        position: relative;   
  19.     margin-top: 0;        margin-bottom: 0;   
  20.     padding-left: 0;        list-style: none;   
  21.     background-color: #f5f5f5;       }   
  22.           .table-view-cell {   
  23.     position: relative;        overflow: hidden;   
  24.     padding: 0px 15px;        -webkit-touch-callout: none;   
  25.     margin-bottom: 1px;       }   
  26.           .table-view-cell:after {   
  27.     position: absolute;        right: 0;   
  28.     bottom: 0;        left: 0px;   
  29.     height: 1px;        content: '';   
  30.     -webkit-transform: scaleY(.5);        transform: scaleY(.5);   
  31.     background-color: #c8c7cc;       }   
  32.           .table-view-cell>a:not(.btn) {   
  33.     position: relative;        display: block;   
  34.     overflow: hidden;        margin: -0px -15px;   
  35.     padding: inherit;        white-space: nowrap;   
  36.     text-overflow: ellipsis;        color: inherit;   
  37.     background-color: #75b9f4;        height: 40px;   
  38.     line-height: 40px;       }   
  39.           .navigate-right:after   
  40.    {        font-family: Muiicons;   
  41.     font-size: inherit;        line-height: 1;   
  42.     position: absolute;        top: 50%;   
  43.     display: inline-block;        -webkit-transform: translateY(-50%);   
  44.     transform: translateY(-50%);        text-decoration: none;   
  45.     color: #666;        -webkit-font-smoothing: antialiased;   
  46.    }          
  47.    .table-view-cell.collapse .collapse-content {        position: relative;   
  48.     display: none;        overflow: hidden;   
  49.     margin: 0px -15px 0px;        padding: 0px 0px !important;   
  50.     -webkit-transition: height .35s ease;        -o-transition: height .35s ease;   
  51.     transition: height .35s ease;        background-color: transparent;   
  52.    }       .image-item{   
  53.     position: relative;       }   
  54.    .image-item .info{        position: absolute;   
  55.     top:0px;        left:4px;   
  56.     color: #ff9900;        font-size: 12px;         
  57.            }   
  58.   </style>    </head>  
  59.  <body>     <header class="bar bar-nav">  
  60.    <h1 class="title">拍照或者相册选择图片上传</h1>     </header>  
  61.   <div class="content">      <div style="margin-top: 10px;"></div>  
  62.    <input type="hidden" id="ckjl.id" name="ckjl.id" value="429">        <div class="collapse-content" >  
  63.       <form>          <label class="row-label"></label>  
  64.        <div id='F_CKJLBS' class="row image-list">           <div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div>  
  65.       </div>         </form>  
  66.      </div>     </div>  
  67.   <script src="../../js/mui.min.js"></script>   <script>  
  68.  var procinstid = 0;     //初始化页面执行操作   
  69.  function plusReady() {      //Android返回键监听事件   
  70.   plus.key.addEventListener('backbutton',function(){       myclose();   
  71.   },false);     }   
  72.  if (window.plus) {      plusReady();   
  73.  } else {      document.addEventListener('plusready', plusReady, false);   
  74.  }      //加载页面初始化需要加载的图片信息   
  75.   //或者相册IMG_20160704_112620.jpg      //imgId:图片名称：1467602809090或者IMG_20160704_112620   
  76.   //imgkey:字段例如：F_ZDDZZ      //ID：站点编号ID,例如429   
  77.   //src：src="file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/upload/F_ZDDZZ-1467602809090.jpg"     function showImgDetail (imgId,imgkey,id,src) {     
  78.    var html = "";       html +='<div  id="Img'+imgId+imgkey+'" class="image-item ">';    
  79.    html +=' <img id="picBig" data-preview-src="" data-preview-group="1" '+src+'/>';       html +=' <span class="del" onclick="delImg(''+imgId+'',''+imgkey+'','+id+');">';       
  80.    html +='  <div class="fa fa-times-circle"></div>';        html +=' </span>';    
  81.    html +='</div>';       $("#"+imgkey+"S").append(html);   
  82.   }      //删除图片   
  83.   //imgId:图片名称：IMG_20160704_112614      //imgkey:字段，例如F_ZDDZZ   
  84.   //ID：站点编号ID，例如429      function delImg(imgId,imgkey,id){   
  85.    var bts = ["是", "否"];       plus.nativeUI.confirm("是否删除图片？", function(e) {   
  86.      var i = e.index;         if (i == 0) {   
  87.       var itemname=id+"img-"+imgkey;//429img-F_ZDDZZ          var itemvalue=plus.storage.getItem(itemname);   
  88.       //{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){   
  89.        var index=itemvalue.indexOf(imgId+",");           if(index==-1){//没有找到   
  90.         delImgfromint(imgId,imgkey,id,index);           }else{    
  91.         delImgFromLocal(itemname,itemvalue,imgId,imgkey,index); //修改，加了一个index参数           }   
  92.                  }else{   
  93.        delImgfromint(imgId,imgkey,id);           }   
  94.      }        },"查勘", bts);   
  95.    /*var isdel = confirm("是否删除图片？");       if(isdel == false){   
  96.     return;       }*/   
  97.              
  98.   }      function delImgFromLocal(itemname,itemvalue,imgId,imgkey,index){   
  99.      var wa = plus.nativeUI.showWaiting();         var left=itemvalue.substr(0,index-1);   
  100.      var right=itemvalue.substring(index,itemvalue.length);         var end=right.indexOf("}");   
  101.      rightright=right.substring(end+1,right.length);         var newitem=left+right;   
  102.      plus.storage.setItem(itemname,newitem);          myAlert("删除成功");   
  103.      $("#Img"+imgId+imgkey).remove();         wa.close();   
  104.   }      //选取图片的来源，拍照和相册   
  105.   function showActionSheet(conf){         var divid = conf.id;   
  106.            var actionbuttons=[{title:"拍照"},{title:"相册选取"}];               var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};   
  107.            plus.nativeUI.actionSheet(actionstyle, function(e){                  if(e.index==1){   
  108.                getImage(divid);                  }else if(e.index==2){   
  109.                galleryImg(divid);                  }   
  110.            } );            }   
  111.   //相册选取图片            function galleryImg(divid) {   
  112.             plus.gallery.pick( function(p){                 //alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg   
  113.              plus.io.resolveLocalFileSystemURL(p, function(entry) {                  //alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg   
  114.      //alert(entry.name);//IMG_20160704_112620.jpg         compressImage(entry.toLocalURL(),entry.name,divid);   
  115.     }, function(e) {         plus.nativeUI.toast("读取拍照文件错误：" + e.message);   
  116.     });                }, function ( e ) {   
  117.             }, {                 filename: "_doc/camera/",   
  118.              filter:"image"                } );   
  119.         }      // 拍照   
  120.   function getImage(divid) {       var cmr = plus.camera.getCamera();   
  121.    cmr.captureImage(function(p) {        //alert(p);//_doc/camera/1467602809090.jpg   
  122.     plus.io.resolveLocalFileSystemURL(p, function(entry) {         //alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg   
  123.      //alert(entry.name);//1467602809090.jpg         compressImage(entry.toLocalURL(),entry.name,divid);   
  124.     }, function(e) {         plus.nativeUI.toast("读取拍照文件错误：" + e.message);   
  125.     });       }, function(e) {   
  126.    }, {        filename: "_doc/camera/",   
  127.     index: 1       });   
  128.   }      //压缩图片   
  129.   function compressImage(url,filename,divid){       var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg   
  130.    plus.zip.compressImage({         src:url,//src: (String 类型 )压缩转换原始图片的路径   
  131.      dst:name,//压缩转换目标图片的路径         quality:20,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100   
  132.      overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件        },   
  133.     function(event) {          //uploadf(event.target,divid);   
  134.      var path = name;//压缩转换目标图片的路径         //event.target获取压缩转换后的图片url路   
  135.      //filename图片名称         saveimage(event.target,divid,filename,path);   
  136.     },function(error) {         plus.nativeUI.toast("压缩图片失败，请稍候再试");   
  137.    });      }   
  138.   //保存信息到本地      /**   
  139.    *        * @param {Object} url  图片的地址   
  140.    * @param {Object} divid  字段的名称       * @param {Object} name   图片的名称   
  141.    */      function saveimage(url,divid,name,path){   
  142.    //alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg       //alert(path);//_doc/upload/F_ZDDZZ-1467602809090.jpg   
  143.    var  state=0;       var wt = plus.nativeUI.showWaiting();   
  144.     //  plus.storage.clear();        namename=name.substring(0,name.indexOf("."));//图片名称：1467602809090   
  145.    var id = document.getElementById("ckjl.id").value;       var itemname=id+"img-"+divid;//429img-F_ZDDZ   
  146.    var itemvalue=plus.storage.getItem(itemname);       if(itemvalue==null){   
  147.     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}       }else{     
  148.     itemvalueitemvalue=itemvalue+"{"+name+","+path+","+url+"}";       }   
  149.    plus.storage.setItem(itemname, itemvalue);          
  150.    var src = 'src="'+url+'"';       //alert("itemvalue="+itemvalue);   
  151.    showImgDetail(name,divid,id,src);       wt.close();   
  152.          }   
  153.   //上传图片，实例中没有添加上传按钮      function uploadimge(agree,back) {   
  154.   //plus.storage.clear();       var wa = plus.nativeUI.showWaiting();   
  155.    var DkeyNames=[];       var id = document.getElementById("ckjl.id").value;    
  156.    var length=id.toString().length;        var ididnmae=id.toString();   
  157.    var numKeys=plus.storage.getLength();       var task = plus.uploader.createUpload(getUrl() + 'url', {   
  158.         method: "POST"           },   
  159.        function(t, status) {            if (status == 200) {   
  160.          console.log("上传成功");              $.ajax({   
  161.           type: "post",              url: getUrl() + 'url',   
  162.           data: {               taskId: taskId,   
  163.            voteAgree: agree,               back: back,   
  164.            voteContent: $("#assign").val(),              },   
  165.           async: true,              dataType: "text",   
  166.           success: function(data) {               wa.close();   
  167.            goList(data);                 
  168.                          },   
  169.           error: function() {               wa.close();   
  170.            myAlert("网络错误，提交审批失败，请稍候再试");              }   
  171.          });                 
  172.                      } else {   
  173.          wa.close();             console.log("上传失败");    
  174.         }           }   
  175.       );       task.addData("id",id);   
  176.    for(var i=0; i<imgArray.length;i++){          var itemkey=id+"img-"+imgArray[i];   
  177.      if(plus.storage.getItem(itemkey)!=null){         var itemvalue=plus.storage.getItem(itemkey).split("{");   
  178.      for(var img=1;img<itemvalue.length;img++){          var imgname=itemvalue[img].substr(0,itemvalue[img].indexOf(","));   
  179.       var imgurl=itemvalue[img].substring(itemvalue[img].indexOf(",")+1,itemvalue[img].lastIndexOf(","));          task.addFile(imgurl,{key:imgurl});   
  180.      }        }   
  181.    }       task.start();   
  182.          }   
  183. </script>   </body>  
  184. </html>     
相关文章 大家在看