Maison > interface Web > Tutoriel H5 > le corps du texte

Exemple de code HTML5 Plus pour implémenter la fonction de prise de photos ou de sélection de photos dans l'album à télécharger sur l'application mobile

黄舟
Libérer: 2018-05-23 15:12:52
original
15908 Les gens l'ont consulté

Cet article présente principalement l'appareil photo, GalleryIO, le stockage et le téléchargeur de HTML5 Plus en détail pour réaliser la prise de photos ou la sélection d'albums avec l'application mobileimagesTéléchargez les informations pertinentes de la fonction . Les amis intéressés peuvent se référer à

Utilisez l'appareil photo, GalleryIO, le stockage et le téléchargeur de HTML Plus pour prendre des photos sur l'application mobile ou sélectionner des images dans le album à télécharger. Le module Caméra gère la caméra de l'appareil et peut être utilisé pour prendre des photos et des opérations vidéo. L'objet de gestion de la caméra est obtenu via plus.camera. Le module Galerie gère les albums système et prend en charge des fonctions telles que la sélection d'images ou de fichiers vidéos de l'album, l'enregistrement d'images ou de fichiers vidéo dans l'album, etc. Obtenez l'objet de gestion d'album via plus.gallery. Le module IO gère le système de fichiers local et est utilisé pour la navigation dans les répertoires, la lecture de fichiers, l'écriture de fichiers et d'autres opérations sur le système de fichiers. Les objets de gestion du système de fichiers peuvent être obtenus via plus.io. Le module Stockage gère la zone de stockage des données locales de l'application et permet de sauvegarder et de lire les données de l'application. La différence entre les données locales de l'application, localStorage et sessionStorage est que le domaine valide des données est différent. Le premier peut être utilisé sur plusieurs domaines au sein de l'application, la période de stockage des données est persistante et il n'y a pas de limite de capacité. . Les objets de gestion de données locales d'application peuvent être obtenus via plus.storage. Le module Uploader gère les tâches de téléchargement réseau, est utilisé pour télécharger divers fichiers localement sur le serveur et prend en charge les opérations d'accès inter-domaines. L'objet de gestion du téléchargement peut être obtenu via plus.uploader. Le téléchargeur télécharge les données à l'aide de la méthode HTTP POST. Le format des données est conforme à la spécification Multipart/form-data, c'est-à-dire le protocole rfc1867 (Téléchargement Fichier basé sur un formulaire en 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: &#39;&#39;;   
    -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=&#39;F_CKJLBS&#39; 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(&#39;backbutton&#39;,function(){   
   myclose();   
  },false);   
 }   
 if (window.plus) {   
  plusReady();   
 } else {   
  document.addEventListener(&#39;plusready&#39;, 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 +=&#39;<p  id="Img&#39;+imgId+imgkey+&#39;" class="image-item ">&#39;;    
   html +=&#39; <img id="picBig" data-preview-src="" data-preview-group="1" &#39;+src+&#39;/>&#39;;   
   html +=&#39; <span class="del" onclick="delImg(\&#39;&#39;+imgId+&#39;\&#39;,\&#39;&#39;+imgkey+&#39;\&#39;,&#39;+id+&#39;);">&#39;;       
   html +=&#39;  <p class="fa fa-times-circle"></p>&#39;;    
   html +=&#39; </span>&#39;;    
   html +=&#39;</p>&#39;;   
   $("#"+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 = &#39;src="&#39;+url+&#39;"&#39;;   
   //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() + &#39;url&#39;, {   
        method: "POST"   
       },   
       function(t, status) {   
        if (status == 200) {   
         console.log("上传成功");   
          $.ajax({   
          type: "post",   
          url: getUrl() + &#39;url&#39;,   
          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>
Copier après la connexion

Rendu :

Exemple de code HTML5 Plus pour implémenter la fonction de prise de photos ou de sélection de photos dans l'album à télécharger sur l'application mobile

>                                                                                       

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal