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复制内容到剪贴板!doctyPE html>
      html class="feedback">
       head>
        meta charset="utf-8" />
        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" />
        meta name="HandhelDFriendly" content="true" />
        meta name="mobileOptimized" content="320" />
        title>
    HTML5 Plus 拍照或者相册选择图片上传/title>
        link rel="stylesheet" href="../../css/mui.min.css">
        link rel="stylesheet" type="text/css" href="../../css/app.css" />
        link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
        link rel="stylesheet" type="text/css" href="../../css/feedback-page.css" />
        link rel="stylesheet" href="../../css/font-awesome.min.css">
        script src="../../js/jquery.js">
    /script>
        script type="text/javascript" src="../../js/common.js">
    /script>
        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>
        style type="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: 0px 15px;
           -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: antialiased;
      }
            .table-view-cell.collapse .collapse-content {
           position: relative;
           display: none;
           overflow: hidden;
           margin: 0px -15px 0px;
           padding: 0px 0px !important;
           -webkit-transition: height .35s ease;
           -o-transition: height .35s ease;
           transition: height .35s ease;
           background-color: transparent;
      }
      .image-item{
           position: relative;
      }
      .image-item .info{
           position: absolute;
           top:0px;
           left:4px;
           color: #ff9900;
           font-size: 12px;
                   }
         /style>
       /head>
       body>
        header class="bar bar-nav">
         h1 class="title">
    拍照或者相册选择图片上传/h1>
        /header>
        p class="content">
         p style="margin-top: 10px;
    ">
    /p>
         input type="hidden" id="ckjl.id" name="ckjl.id" value="429">
           p class="collapse-content" >
            form>
             label class="row-label">
    /label>
             p id='F_CKJLBS' class="row image-list">
              p class="image-item " id="F_CKJLB" onclick="showActionSheet(this);
    ">
    /p>
            /p>
            /form>
           /p>
        /p>
        script src="../../js/mui.min.js">
    /script>
      script>
       VAR PRocinstid = 0;
    //初始化页面执行操作    function plusReady() {
     //AndROId返回键监听事件     plus.key.addEventListener('backbutton',function(){
          myclose();
     }
    ,false);
    }
    if (window.plus) {
         plusReady();
    }
 else {
         document.addEventListener('plusready', plusReady, false);
    }
     //加载页面初始化需要加载的图片信息     //或者相册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"    function showImgDetail (imgId,imgkey,id,src) {
            var html = "";
          html +='p  id="Img'+imgId+imgkey+'" class="image-item ">
    ';
           html +=' img id="picBig" data-preview-src="" data-preview-group="1" '+src+'/>
    ';
          html +=' span class="del" onclick="delImg(\''+imgId+'\',\''+imgkey+'\','+id+');
    ">
    ';
              html +='  p class="fa fa-times-circle">
    /p>
    ';
           html +=' /span>
    ';
           html +='/p>
    ';
          $("#"+imgkey+"S").append(html);
     }
     //删除图片     //imgId:图片名称：IMG_20160704_112614     //imgkey:字段，例如F_ZDDZZ     //ID：站点编号ID，例如429     function delImg(imgId,imgkey,id){
          var bts = ["是", "否"];
      plus.nativeUI.confirm("是否删除图片？", function(e) {
            var i = e.index;
        if (i == 0) {
             var itemname=id+"img-"+imgkey;
    //429img-F_ZDDZZ         var itemvalue=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){
              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){
           return;
      }
*/                 }
     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+right;
            plus.storage.setItem(itemname,newitem);
             myAlert("删除成功");
            $("#Img"+imgId+imgkey).remove();
            wa.close();
     }
     //选取图片的来源，拍照和相册     function showActionSheet(conf){
            var pid = conf.id;
              var actionbuttons=[{
title:"拍照"}
,{
title:"相册选取"}
    ];
              var actionstyle={
title:"选择照片",cancel:"取消",buttons:actionbuttons}
    ;
              plus.nativeUI.actionSheet(actionstyle, function(e){
                 if(e.index==1){
                      getImage(pid);
                 }
else if(e.index==2){
                      galleryImg(pid);
                 }
              }
     );
           }
     //相册选取图片           function galleryImg(pid) {
               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,pid);
       }
, function(e) {
            plus.nativeUI.toast("读取拍照文件错误：" + e.message);
       }
    );
               }
, function ( e ) {
               }
, {
                filename: "_doc/camera/",                filter:"image"               }
     );
           }
     // 拍照     function getImage(pid) {
          var cmr = plus.camera.getCamera();
      cmr.captureImage(function(p) {
           //alert(p);
//_doc/camera/1467602809090.jpg       plus.io.resolveLocalFileSystemURL(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,pid);
       }
, function(e) {
            plus.nativeUI.toast("读取拍照文件错误：" + e.message);
       }
    );
      }
, function(e) {
      }
, {
       filename: "_doc/camera/",       index: 1      }
    );
     }
     //压缩图片     function compressImage(url,filename,pid){
          var name="_doc/upload/"+pid+"-"+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,pid);
            var path = name;
    //压缩转换目标图片的路径        //event.target获取压缩转换后的图片url路        //filename图片名称        saveimage(event.target,pid,filename,path);
       }
,function(error) {
            plus.nativeUI.toast("压缩图片失败，请稍候再试");
      }
    );
     }
     //保存信息到本地     /**      *       * @param {
Object}
 url  图片的地址      * @param {
Object}
 pid  字段的名称      * @param {
Object}
 name   图片的名称      */     function saveimage(url,pid,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      var  state=0;
          var wt = plus.nativeUI.showWaiting();
           //  plus.storage.clear();
           namename=name.substring(0,name.indexOf("."));
    //图片名称：1467602809090      var id = document.getElementById("ckjl.id").value;
          var itemname=id+"img-"+pid;
    //429img-F_ZDDZ      var itemvalue=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}
      }
else{
         itemvalueitemvalue=itemvalue+"{
"+name+","+path+","+url+"}
    ";
      }
          plus.storage.setItem(itemname, itemvalue);
                var src = 'src="'+url+'"';
          //alert("itemvalue="+itemvalue);
          showImgDetail(name,pid,id,src);
          wt.close();
           }
     //上传图片，实例中没有添加上传按钮     function uploadimge(agree,back) {
         //plus.storage.clear();
          var wa = plus.nativeUI.showWaiting();
          var Dkeynames=[];
          var id = document.getElementById("ckjl.id").value;
           var length=id.toString().length;
           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;
     iimgArray.length;
i++){
             var itemkey=id+"img-"+imgArray[i];
        if(plus.storage.getItem(itemkey)!=null){
        var itemvalue=plus.storage.getItem(itemkey).split("{
    ");
            for(var img=1;
    imgitemvalue.length;
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();
           }
       /script>
      /body>
      /html>
    

效果图：

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！