精华内容
下载资源
问答
  • HTML5 Plus 拍照或者相册选择图片上传

    万次阅读 多人点赞 2016-07-13 14:34:57
    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头,可用于拍照、摄像操作,...

      HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera、Gallery、IO、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)协议。

     拍照或相册选取一张demo下载地址https://pan.baidu.com/s/1c_J4XSeHObnnx7P3gvC3yw   提取码:19kn

     拍照或相册选取多张demo下载地址https://pan.baidu.com/s/1Rvq8B9a_hTTu4HsVlJ3OUQ   提取码:ldbg

                                 后台java下载地址https://pan.baidu.com/s/1HaffcoTUS44Ikk3_U_O1Ng      提取码:2064 

    <!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>
    		<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);
    	}
    		//加载页面初始化需要加载的图片信息
    		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);
    		}
    		//删除图片
    		function delImg(imgId,imgkey,id){
    			var bts = ["是", "否"];
    			plus.nativeUI.confirm("是否删除图片?", function(e) {
    					var i = e.index;
    					if (i == 0) {
    						var itemname=id+"img-"+imgkey;
    						var itemvalue=plus.storage.getItem(itemname);
    						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("}");
    					right=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){
        	         	 plus.io.resolveLocalFileSystemURL(p, function(entry) {
    			 		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) {
    				plus.io.resolveLocalFileSystemURL(p, function(entry) {
    					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){
    			var  state=0;
    			var wt = plus.nativeUI.showWaiting();
    		  //  plus.storage.clear(); 
    			name=name.substring(0,name.indexOf("."));
    			var id = document.getElementById("ckjl.id").value;
    			var itemname=id+"img-"+divid;
    			var itemvalue=plus.storage.getItem(itemname);
    			if(itemvalue==null){
    				itemvalue="{"+name+","+path+","+url+"}";
    			}else{  
    				itemvalue=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 idnmae=id.toString();
    		 var numKeys=plus.storage.getLength();
    		 var task = plus.uploader.createUpload('http://demo.dcloud.net.cn/helloh5/uploader/upload.php', {
    								method: "POST"
    							},
    							function(t, status) {
    								if (status == 200) {
    									console.log("上传成功");
    								} 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>

                 

     

     

                 

    展开全文
  • HTML5 Plus规范

    千次阅读 2018-04-03 08:08:12
    为弥补HTML5能力的不足,在W3C中国的指导下成立了HTML5中国产业联盟www.html5plus.org组织,推出HTML5+规范。目前该联盟已经挂靠在工信部信通院标准所下,相关标准已经成为行业标准。HTML5+规范是一个开放规范,隶属...


    HTML5 Plus规范

    通过HTML5开发移动App时,会发现HTML5很多能力不具备。为弥补HTML5能力的不足,在W3C中国的指导下成立了HTML5中国产业联盟www.html5plus.org组织,推出HTML5+规范。目前该联盟已经挂靠在工信部信通院标准所下,相关标准已经成为行业标准。
    HTML5+规范是一个开放规范,隶属于工信部,允许三方浏览器厂商或其他手机runtime制造商实现。
    HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。
    除了功能外,HTML5+很重要的特点是提供了原生的渲染能力,通过plus.webview、plus.nativeObj、plus.nativeUI,让开发者可以使用js来调用原生渲染能力,实现体验的大幅提升。
    原生的api多达40万,HTML5+的封装并非把40万api都封装了一遍,而是分成了2个层面:
    - HTML5Plus规范:常用的扩展能力,比如二维码、语音输入,都封装到了规范中,同时实现了Android和iOS的解析引擎,使得开发者的代码编写一次,可跨平台运行。
    - Native.js是另一项创新技术。手机OS的原生API有四十多万,大量的API无法被HTML5使用。Native.js把几十万原生API映射成了js对象,通过js可以直接调ios和android的原生API。这部分就不再跨平台,写法分别是plus.ios和plus.android,比如调ios game center,或在android手机桌面创建快捷方式,这些都是平台专有的api。

    Native.js的用法示例,var obj= plus.android.import("android.content.Intent");,将一个原生对象android.content.Intent映射为js对象obj,然后在js里操作obj对象的方法属性就可以了。
    Native.js的详细教程可以参考:5+ App开发Native.js入门指南
    在5+App里,同时包含了HTML5Plus规范和Native.js的实现,开发者可以在5+App里自由使用相关技术。

    展开全文
  • vue 集成html5 plus

    千次阅读 2019-09-25 21:58:44
    首先要安装一个包 vue-html5plus  npm i vue-html5plus -S 然后配置这个文件 在main.js添加一串代码  var onPlusReady = function (callback, context = this) {  if (window.plus) {  callback.call...

    首先要安装一个包 vue-html5plus 

      npm i vue-html5plus -S

    然后配置这个文件

    在main.js添加一串代码

      var onPlusReady = function (callback, context = this) {

        if (window.plus) {

          callback.call(context)

         } else {

          document.addEventListener('plusready', callback.bind(context))

         }

      }

      Vue.mixin({

         beforeCreate () {

          onPlusReady(() => { this.plusReady = true }, this)

         },

        methods: {

          onPlusReady: onPlusReady

        }

      })

    这样就可以集成html5 plus了

    使用方法示例:(获取地理位置)

      mounted () {

        this.onPlusReady(function () {

          plus.geolocation.getCurrentPosition( 

             this.geoInf, function (e) {

              alert('获取位置信息失败:' + e.message)

            },

             {

               geocode: false

            } )

         })

       },

     

    转载于:https://www.cnblogs.com/luobiao/p/10552030.html

    展开全文
  • HTML5+(html5 plus)

    2017-04-06 10:30:54
    通过 HTML5 开发移动 App 时,会发现 HTML5 很多能力不具备。为弥补 HTML5 能力 的不足,HTML5 plus 才出现

    通过 HTML5 开发移动 App 时,会发现 HTML5 很多能力不具备。为弥补 HTML5 能力 的不足,在 W3C 中国的指导下成立了 http://www.html5plus.org/ 组织,推出 HTML5+规范。
    HTML5+扩展了 JavaScript 对象 plus,使得 js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

    因为html5+一直在不断的更新,所以这里我讲 html5中国产业联盟推荐给大家,上面的操作讲的很详细
    链接地址:http://www.html5plus.org/doc/h5p.html

    展开全文
  • MUI和html5plus

    2019-03-13 08:17:00
    MUI: http://dev.dcloud.net.cn/mui/snippet/ html5plus: http://www.html5plus.org/doc/h5p.html 转载于:https://www.cnblogs.com/haitaoli/p/10520749.html
  • HTML5 Plus规范的实例

    千次阅读 2016-07-09 16:43:37
    通过学习HTML5+API规范之后,再学习HBuilder软件中的HTML5 Plus规范的实例,由于HTML5Plus规范知识点比较多,所以在学习HTML5 Plus规范演示实例时把知识点都加入到程序中,方便以后开发的学习。源代码地址:...
  • html5 plus应用概述

    2016-10-27 17:42:00
    为弥补 HTML5 能力 的不足,在 W3C 中国的指导下成立了www.HTML5Plus.org组织,推出 HTML5+规范。 HTML5+扩展了JavaScript对象 plus,使得 js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、...
  • HTML5 Plus 拍照或者相册选择图片上传-附件资源
  • mui HTML5 plus 下载文件

    千次阅读 2017-05-28 16:58:43
    mui HTML5 plus下载文件
  • html5plus官方网址

    2016-02-18 11:32:00
    http://www.html5plus.org/doc/h5p.html
  • html5 plus 图片下载保存到手机相册

    万次阅读 2018-06-22 21:50:40
    html5plus 接口文档:http://www.html5plus.org/doc/zh_cn/webview.html vue 集成html5plus方法:https://blog.csdn.net/weixin_38641550/article/details/85235297 vue集成plus demo :...
  • html5plus 判断物理返回键
  • html5 plus 文件的读写操作

    千次阅读 2019-05-05 09:39:36
    html5 plus 文件的读写操作 做个笔记,以免以后忘记 plus.io.resolveLocalFileSystemURL("_doc/",function(entry){ entry.getFile(“test4.js”,{create:true,exclusive:false}, function(file){ //读取文件...
  • 主要为大家详细介绍了HTML5 Plus的Camera、GalleryIO、Storage和Uploader,实现手机APP拍照或相册选择图片上传功能的相关资料,感兴趣的小伙伴们可以参考一下
  • HTML5 Plus开发微信h5吉祥三公牌九牛牛后台控制辅助搭建源码不会搭建的联系可联系我
  • HTML5 Plus移动App(5+App)开发入门指南

    万次阅读 2016-06-29 16:40:43
    HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。 HTML5 Plus规范...
  • 关于html5plus的资料参考http://www.html5plus.org/最近通过html5做手机app,其中涉及到网络通过,必须采用原生的socket,websocket无法满足要求,html5plus可以调用java包,java包封装了socket,以多线程的方式工作...
  • HTML5plus 移动 App开发入门

    千次阅读 2015-10-30 11:02:21
    HTML5 Plus 应用概述     HTML5 Plus 规范     通过 HTML5 开发移动 App 时,会发现 HTML5...www.HTML5Plus.org组织,推出 HTML5+规范。 HTML5+扩展了 JavaScript 对象 plus,使得 js 可以调用各种浏览器无法实现或
  • vue基于html5plus的微信授权登录、获取微信用户信息代码,里面是一个vue文件,放进项目就能用
  • 对于移动app,尤其是webapp,如何更新一直是比较重要的话题。...关于html5plus,请自行参考http://www.html5plus.org/#home 需求:点击“检查更新”,app在线检查版本是否有更新,如果有,下载并更新; .
  • 利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。Gallery模块管理系统...
  • 学mui和html5plus主要是想学一些调用设备的能力,比如拍照/选图/保存图片到相册/录音/录制视频/定位等。 页面切换: 标签切换: <div class="mui-content"> <div id="home" class='mui-control...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,564
精华内容 1,025
关键字:

html5plus