濮阳杆衣贸易有限公司

主頁 > 知識庫 > HTML5 Plus 實(shí)現(xiàn)手機(jī)APP拍照或相冊選擇圖片上傳功能

HTML5 Plus 實(shí)現(xiàn)手機(jī)APP拍照或相冊選擇圖片上傳功能
熱門標(biāo)簽：農(nóng)村住宅地圖標(biāo)注 鶴壁手機(jī)自動(dòng)外呼系統(tǒng)怎么安裝 中紳電銷智能機(jī)器人 ai電銷機(jī)器人連接網(wǎng)關(guān) 漳州人工外呼系統(tǒng)排名 鄭州電銷外呼系統(tǒng)違法嗎 濟(jì)南辦理400電話 跟電銷機(jī)器人做同事 威海營銷外呼系統(tǒng)招商

利用HTML Plus的Camera、GalleryIO、Storage和Uploader來實(shí)現(xiàn)手機(jī)APP拍照或者從相冊選擇圖片上傳。Camera模塊管理設(shè)備的攝像頭，可用于拍照、攝像操作，通過plus.camera獲取攝像頭管理對象。Gallery模塊管理系統(tǒng)相冊，支持從相冊中選擇圖片或視頻文件、保存圖片或視頻文件到相冊等功能。通過plus.gallery獲取相冊管理對象。IO模塊管理本地文件系統(tǒng)，用于對文件系統(tǒng)的目錄瀏覽、文件的讀取、文件的寫入等操作。通過plus.io可獲取文件系統(tǒng)管理對象。Storage模塊管理應(yīng)用本地?cái)?shù)據(jù)存儲區(qū)，用于應(yīng)用數(shù)據(jù)的保存和讀取。應(yīng)用本地?cái)?shù)據(jù)與localStorage、sessionStorage的區(qū)別在于數(shù)據(jù)有效域不同，前者可在應(yīng)用內(nèi)跨域操作，數(shù)據(jù)存儲期是持久化的，并且沒有容量限制。通過plus.storage可獲取應(yīng)用本地?cái)?shù)據(jù)管理對象。Uploader模塊管理網(wǎng)絡(luò)上傳任務(wù)，用于從本地上傳各種文件到服務(wù)器，并支持跨域訪問操作。通過plus.uploader可獲取上傳管理對象。Uploader上傳使用HTTP的POST方式提交數(shù)據(jù)，數(shù)據(jù)格式符合Multipart/form-data規(guī)范，即rfc1867（Form-based File Upload in HTML）協(xié)議。 

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html>  
  2. <html class="feedback">  
  3.  <head>  
  4.   <meta charset="utf-8" />  
  5.   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />  
  6.   <meta name="misapplication-tap-highlight" content="no" />  
  7.   <meta name="HandheldFriendly" content="true" />  
  8.   <meta name="MobileOptimized" content="320" />  
  9.   <title>HTML5 Plus 拍照或者相冊選擇圖片上傳</title>  
  10.   <link rel="stylesheet" href="../../css/mui.min.css">  
  11.   <link rel="stylesheet" type="text/css" href="../../css/app.css" />  
  12.   <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />  
  13.   <link rel="stylesheet" type="text/css" href="../../css/feedback-page.css" />  
  14.   <link rel="stylesheet" href="../../css/font-awesome.min.css">  
  15.   <script src="../../js/jquery.js"></script>  
  16.   <script type="text/javascript" src="../../js/common.js"></script>  
  17.   <script type="text/javascript" src="../../js/utitls.js"></script>  
  18.   <script type="text/javascript" src="http://api.map.baidu.com/api?ak=59PBaEOro16CiH2W4CG81zEN&v=2.0"></script>  
  19.   <style type="text/css">  
  20.    .del {   
  21.     position: absolute;   
  22.     top:1px;   
  23.     right: 1px;    
  24.     display: block;         
  25.        line-height: 1;   
  26.        cursor: pointer;   
  27.        color:#fff;   
  28.     }   
  29.   
  30.    .del:hover {   
  31.     color:#ff3333;   
  32.    }   
  33.   </style>  
  34.   <style>  
  35.    .table-view {   
  36.     position: relative;   
  37.     margin-top: 0;   
  38.     margin-bottom: 0;   
  39.     padding-left: 0;   
  40.     list-style: none;   
  41.     background-color: #f5f5f5;   
  42.    }   
  43.       
  44.    .table-view-cell {   
  45.     position: relative;   
  46.     overflow: hidden;   
  47.     padding: 0px 15px;   
  48.     -webkit-touch-callout: none;   
  49.     margin-bottom: 1px;   
  50.    }   
  51.       
  52.    .table-view-cell:after {   
  53.     position: absolute;   
  54.     right: 0;   
  55.     bottom: 0;   
  56.     left: 0px;   
  57.     height: 1px;   
  58.     content: '';   
  59.     -webkit-transform: scaleY(.5);   
  60.     transform: scaleY(.5);   
  61.     background-color: #c8c7cc;   
  62.    }   
  63.       
  64.    .table-view-cell>a:not(.btn) {   
  65.     position: relative;   
  66.     display: block;   
  67.     overflow: hidden;   
  68.     margin: -0px -15px;   
  69.     padding: inherit;   
  70.     white-space: nowrap;   
  71.     text-overflow: ellipsis;   
  72.     color: inherit;   
  73.     background-color: #75b9f4;   
  74.     height: 40px;   
  75.     line-height: 40px;   
  76.    }   
  77.       
  78.    .navigate-right:after   
  79.    {   
  80.     font-family: Muiicons;   
  81.     font-size: inherit;   
  82.     line-height: 1;   
  83.     position: absolute;   
  84.     top: 50%;   
  85.     display: inline-block;   
  86.     -webkit-transform: translateY(-50%);   
  87.     transform: translateY(-50%);   
  88.     text-decoration: none;   
  89.     color: #666;   
  90.     -webkit-font-smoothing: antialiased;   
  91.    }   
  92.       
  93.    .table-view-cell.collapse .collapse-content {   
  94.     position: relative;   
  95.     display: none;   
  96.     overflow: hidden;   
  97.     margin: 0px -15px 0px;   
  98.     padding: 0px 0px !important;   
  99.     -webkit-transition: height .35s ease;   
  100.     -o-transition: height .35s ease;   
  101.     transition: height .35s ease;   
  102.     background-color: transparent;   
  103.    }   
  104.    .image-item{   
  105.     position: relative;   
  106.    }   
  107.    .image-item .info{   
  108.     position: absolute;   
  109.     top:0px;   
  110.     left:4px;   
  111.     color: #ff9900;   
  112.     font-size: 12px;         
  113.        
  114.    }   
  115.   </style>  
  116.  </head>  
  117.  <body>  
  118.   <header class="bar bar-nav">  
  119.    <h1 class="title">拍照或者相冊選擇圖片上傳</h1>  
  120.   </header>  
  121.   <div class="content">  
  122.    <div style="margin-top: 10px;"></div>  
  123.    <input type="hidden" id="ckjl.id" name="ckjl.id" value="429">  
  124.      <div class="collapse-content" >  
  125.       <form>  
  126.        <label class="row-label"></label>  
  127.        <div id='F_CKJLBS' class="row image-list">  
  128.         <div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div>  
  129.       </div>  
  130.       </form>  
  131.      </div>  
  132.   </div>  
  133.   <script src="../../js/mui.min.js"></script>  
  134. <script>  
  135.  var procinstid = 0;   
  136.  //初始化頁面執(zhí)行操作   
  137.  function plusReady() {   
  138.   //Android返回鍵監(jiān)聽事件   
  139.   plus.key.addEventListener('backbutton',function(){   
  140.    myclose();   
  141.   },false);   
  142.  }   
  143.  if (window.plus) {   
  144.   plusReady();   
  145.  } else {   
  146.   document.addEventListener('plusready', plusReady, false);   
  147.  }   
  148.   //加載頁面初始化需要加載的圖片信息   
  149.   //或者相冊IMG_20160704_112620.jpg   
  150.   //imgId:圖片名稱：1467602809090或者IMG_20160704_112620   
  151.   //imgkey:字段例如：F_ZDDZZ   
  152.   //ID：站點(diǎn)編號ID,例如429   
  153.   //src：src="file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/upload/F_ZDDZZ-1467602809090.jpg"  
  154.   function showImgDetail (imgId,imgkey,id,src) {     
  155.    var html = "";   
  156.    html +='<div  id="Img'+imgId+imgkey+'" class="image-item ">';    
  157.    html +=' <img id="picBig" data-preview-src="" data-preview-group="1" '+src+'/>';   
  158.    html +=' <span class="del" onclick="delImg(\''+imgId+'',\''+imgkey+'','+id+');">';       
  159.    html +='  <div class="fa fa-times-circle"></div>';    
  160.    html +=' </span>';    
  161.    html +='</div>';   
  162.    $("#"+imgkey+"S").append(html);   
  163.   }   
  164.   //刪除圖片   
  165.   //imgId:圖片名稱：IMG_20160704_112614   
  166.   //imgkey:字段，例如F_ZDDZZ   
  167.   //ID：站點(diǎn)編號ID，例如429   
  168.   function delImg(imgId,imgkey,id){   
  169.    var bts = ["是", "否"];   
  170.    plus.nativeUI.confirm("是否刪除圖片？", function(e) {   
  171.      var i = e.index;   
  172.      if (i == 0) {   
  173.       var itemname=id+"img-"+imgkey;//429img-F_ZDDZZ   
  174.       var itemvalue=plus.storage.getItem(itemname);   
  175.       //{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}   
  176.       if(itemvalue!=null){   
  177.        var index=itemvalue.indexOf(imgId+",");   
  178.        if(index==-1){//沒有找到   
  179.         delImgfromint(imgId,imgkey,id,index);   
  180.        }else{    
  181.         delImgFromLocal(itemname,itemvalue,imgId,imgkey,index); //修改，加了一個(gè)index參數(shù)   
  182.        }   
  183.           
  184.       }else{   
  185.        delImgfromint(imgId,imgkey,id);    
  186.       }   
  187.      }   
  188.     },"查勘", bts);   
  189.    /*var isdel = confirm("是否刪除圖片？");   
  190.    if(isdel == false){   
  191.     return;   
  192.    }*/   
  193.       
  194.       
  195.   }   
  196.   function delImgFromLocal(itemname,itemvalue,imgId,imgkey,index){   
  197.      var wa = plus.nativeUI.showWaiting();   
  198.      var left=itemvalue.substr(0,index-1);   
  199.      var right=itemvalue.substring(index,itemvalue.length);   
  200.      var end=right.indexOf("}");   
  201.      rightright=right.substring(end+1,right.length);   
  202.      var newitem=left+right;   
  203.      plus.storage.setItem(itemname,newitem);    
  204.      myAlert("刪除成功");   
  205.      $("#Img"+imgId+imgkey).remove();   
  206.      wa.close();   
  207.   }   
  208.   //選取圖片的來源，拍照和相冊   
  209.   function showActionSheet(conf){   
  210.      var divid = conf.id;   
  211.            var actionbuttons=[{title:"拍照"},{title:"相冊選取"}];   
  212.            var actionstyle={title:"選擇照片",cancel:"取消",buttons:actionbuttons};   
  213.            plus.nativeUI.actionSheet(actionstyle, function(e){   
  214.               if(e.index==1){   
  215.                getImage(divid);   
  216.               }else if(e.index==2){   
  217.                galleryImg(divid);   
  218.               }   
  219.            } );   
  220.         }   
  221.   //相冊選取圖片   
  222.         function galleryImg(divid) {   
  223.             plus.gallery.pick( function(p){   
  224.              //alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg   
  225.              plus.io.resolveLocalFileSystemURL(p, function(entry) {   
  226.               //alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg   
  227.      //alert(entry.name);//IMG_20160704_112620.jpg   
  228.      compressImage(entry.toLocalURL(),entry.name,divid);   
  229.     }, function(e) {   
  230.      plus.nativeUI.toast("讀取拍照文件錯(cuò)誤：" + e.message);   
  231.     });   
  232.             }, function ( e ) {   
  233.             }, {   
  234.              filename: "_doc/camera/",   
  235.              filter:"image"   
  236.             } );   
  237.         }   
  238.   // 拍照   
  239.   function getImage(divid) {   
  240.    var cmr = plus.camera.getCamera();   
  241.    cmr.captureImage(function(p) {   
  242.     //alert(p);//_doc/camera/1467602809090.jpg   
  243.     plus.io.resolveLocalFileSystemURL(p, function(entry) {   
  244.      //alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg   
  245.      //alert(entry.name);//1467602809090.jpg   
  246.      compressImage(entry.toLocalURL(),entry.name,divid);   
  247.     }, function(e) {   
  248.      plus.nativeUI.toast("讀取拍照文件錯(cuò)誤：" + e.message);   
  249.     });   
  250.    }, function(e) {   
  251.    }, {   
  252.     filename: "_doc/camera/",   
  253.     index: 1   
  254.    });   
  255.   }   
  256.   //壓縮圖片   
  257.   function compressImage(url,filename,divid){   
  258.    var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg   
  259.    plus.zip.compressImage({   
  260.      src:url,//src: (String 類型 )壓縮轉(zhuǎn)換原始圖片的路徑   
  261.      dst:name,//壓縮轉(zhuǎn)換目標(biāo)圖片的路徑   
  262.      quality:20,//quality: (Number 類型 )壓縮圖片的質(zhì)量.取值范圍為1-100   
  263.      overwrite:true//overwrite: (Boolean 類型 )覆蓋生成新文件   
  264.     },   
  265.     function(event) {    
  266.      //uploadf(event.target,divid);   
  267.      var path = name;//壓縮轉(zhuǎn)換目標(biāo)圖片的路徑   
  268.      //event.target獲取壓縮轉(zhuǎn)換后的圖片url路   
  269.      //filename圖片名稱   
  270.      saveimage(event.target,divid,filename,path);   
  271.     },function(error) {   
  272.      plus.nativeUI.toast("壓縮圖片失敗，請稍候再試");   
  273.    });   
  274.   }   
  275.   //保存信息到本地   
  276.   /**   
  277.    *    
  278.    * @param {Object} url  圖片的地址   
  279.    * @param {Object} divid  字段的名稱   
  280.    * @param {Object} name   圖片的名稱   
  281.    */   
  282.   function saveimage(url,divid,name,path){   
  283.    //alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg   
  284.    //alert(path);//_doc/upload/F_ZDDZZ-1467602809090.jpg   
  285.    var  state=0;   
  286.    var wt = plus.nativeUI.showWaiting();   
  287.     //  plus.storage.clear();    
  288.    namename=name.substring(0,name.indexOf("."));//圖片名稱：1467602809090   
  289.    var id = document.getElementById("ckjl.id").value;   
  290.    var itemname=id+"img-"+divid;//429img-F_ZDDZ   
  291.    var itemvalue=plus.storage.getItem(itemname);   
  292.    if(itemvalue==null){   
  293.     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}   
  294.    }else{     
  295.     itemvalueitemvalue=itemvalue+"{"+name+","+path+","+url+"}";   
  296.    }   
  297.    plus.storage.setItem(itemname, itemvalue);   
  298.       
  299.    var src = 'src="'+url+'"';   
  300.    //alert("itemvalue="+itemvalue);   
  301.    showImgDetail(name,divid,id,src);   
  302.    wt.close();   
  303.       
  304.   }   
  305.   //上傳圖片，實(shí)例中沒有添加上傳按鈕   
  306.   function uploadimge(agree,back) {   
  307.   //plus.storage.clear();   
  308.    var wa = plus.nativeUI.showWaiting();   
  309.    var DkeyNames=[];   
  310.    var id = document.getElementById("ckjl.id").value;    
  311.    var length=id.toString().length;    
  312.    var ididnmae=id.toString();   
  313.    var numKeys=plus.storage.getLength();   
  314.    var task = plus.uploader.createUpload(getUrl() + 'url', {   
  315.         method: "POST"   
  316.        },   
  317.        function(t, status) {   
  318.         if (status == 200) {   
  319.          console.log("上傳成功");   
  320.           $.ajax({   
  321.           type: "post",   
  322.           url: getUrl() + 'url',   
  323.           data: {   
  324.            taskId: taskId,   
  325.            voteAgree: agree,   
  326.            back: back,   
  327.            voteContent: $("#assign").val(),   
  328.           },   
  329.           async: true,   
  330.           dataType: "text",   
  331.           success: function(data) {   
  332.            wa.close();   
  333.            goList(data);   
  334.              
  335.               
  336.           },   
  337.           error: function() {   
  338.            wa.close();   
  339.            myAlert("網(wǎng)絡(luò)錯(cuò)誤，提交審批失敗，請稍候再試");   
  340.           }   
  341.          });   
  342.              
  343.             
  344.         } else {   
  345.          wa.close();   
  346.          console.log("上傳失敗");    
  347.         }   
  348.        }   
  349.       );   
  350.    task.addData("id",id);   
  351.    for(var i=0; i<imgArray.length;i++){     
  352.     var itemkey=id+"img-"+imgArray[i];   
  353.      if(plus.storage.getItem(itemkey)!=null){   
  354.      var itemvalue=plus.storage.getItem(itemkey).split("{");   
  355.      for(var img=1;img<itemvalue.length;img++){   
  356.       var imgname=itemvalue[img].substr(0,itemvalue[img].indexOf(","));   
  357.       var imgurl=itemvalue[img].substring(itemvalue[img].indexOf(",")+1,itemvalue[img].lastIndexOf(","));   
  358.       task.addFile(imgurl,{key:imgurl});   
  359.      }   
  360.     }   
  361.    }   
  362.    task.start();   
  363.       
  364.   }   
  365. </script>  
  366. </body>  
  367. </html>  
  368.   

效果圖：

             


             


以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

原文鏈接：http://blog.csdn.net/qq_27626333/article/details/51896616

標(biāo)簽：甘南 咸陽 惠州 蘇州 萍鄉(xiāng) 營口 紅河 文山

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5 Plus 實(shí)現(xiàn)手機(jī)APP拍照或相冊選擇圖片上傳功能》，本文關(guān)鍵詞  HTML5,Plus,實(shí)現(xiàn),手機(jī),APP,拍照,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5 Plus 實(shí)現(xiàn)手機(jī)APP拍照或相冊選擇圖片上傳功能》相關(guān)的同類信息！
  • 本頁收集關(guān)于HTML5 Plus 實(shí)現(xiàn)手機(jī)APP拍照或相冊選擇圖片上傳功能的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章
    安岳县| 衡南县| 黑水县| 惠东县| 沭阳县| 兴化市| 武威市| 佳木斯市| 裕民县| 宜兰县| 观塘区| 阜新市| 通江县| 库伦旗| 八宿县| 全南县| 邢台市| 金华市| 石狮市| 长宁县| 安陆市| 营山县| 潮州市| 志丹县| 清原| 盐源县| 新闻| 苏尼特右旗| 盈江县| 石景山区| 建德市| 甘南县| 鄂尔多斯市| 蚌埠市| 大理市| 元阳县| 新野县| 湟中县| 容城县| 咸丰县| 都江堰市|