您现在的位置是：网站首页> 编程资料编程资料

HTML5 Plus 实现手机APP拍照或相册选择图片上传功能_html5_网页制作_

2021-09-13 880人已围观

简介 这篇文章主要为大家详细介绍了HTML5 Plus的Camera、GalleryIO、Storage和Uploader，实现手机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复制内容到剪贴板
  1. >  
  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.  

    上一篇：深入剖析webstorage[html5的本地数据处理]_html5_网页制作_

    下一篇：HTML5对手机页面长按会粘贴复制禁用的解决方法_html5_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网