用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - php代码库

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

2017-04-28 作者: 读你举报

[php]代码库

<!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>   
  <div class="content">   
   <div style="margin-top: 10px;"></div>   
   <input type="hidden" id="ckjl.id" name="ckjl.id" value="429">   
     <div class="collapse-content" >   
      <form>   
       <label class="row-label"></label>   
       <div id='F_CKJLBS' class="row image-list">   
        <div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div>   
      </div>   
      </form>   
     </div>   
  </div>   
  <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 +='<div  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 +='  <div class="fa fa-times-circle"></div>';     
   html +=' </span>';     
   html +='</div>';    
   $("#"+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 divid = conf.id;    
           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_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,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/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,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+"-"+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,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-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-"+divid;//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,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").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; i<imgArray.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;img<itemvalue.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>   
   


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...