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-Tutoriel H5-php.cn

Maison

interface Web

Tutoriel H5

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

黄舟

May 23, 2018 pm 03:12 PM

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 mobileimages Té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!

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7322

Tutoriel Java

1625

Tutoriel CakePHP

1349

Tutoriel Laravel

1261

Tutoriel PHP

1209

Afficher plus

Related knowledge

Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

See all articles