xwh
/
wms-pda-app
forkato da project/wms-pda-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!-- FontAwesome字体图标 -->
		<link type="text/css" href="../../js/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style>
			.my-btn {
				width: 80px;
				height: 34px;
				margin: 10px auto;
			}
		</style>

		<style type="text/css">
			body {
				background-color: #efeff4;
			}
			
			.mui-content {}
			
			.mui-content a {
				color: #8F8F94;
			}
			
			.mui-content a.active {
				color: #007aff;
			}
			
			.mui-title {
				font-family: simhei;
			}
			
			.btn_1 {
				position: absolute;
				bottom: 100px;
				left: 10px;
				right: 10px;
			}
			
			.btn_2 {
				position: absolute;
				bottom: 20px;
				left: 10px;
				right: 10px;
			}
			
			.mui-btn-block {
				width: 90%;
				margin: 0 auto;
			}
			
			body {
				overflow: hidden;
			}
			
			.showimg {
				margin: 20px 10px auto 10px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">上传身份证照片</h1>
			<a class="mui-pull-right mui-icon mui-icon-upload" onclick="imgUpload()"></a>
		</header>

		<div class="mui-content">
			<div class="showimg" id="showimg">
				
				
			</div>
			<button type="button" class="mui-btn mui-btn-primary mui-btn-block  btn_1" onclick="galleryImgs()">从相册中选择图片</button>
			<br>
			<button type="button" class="mui-btn mui-btn-success mui-btn-block btn_2" onclick="cameraImages()">拍照</button>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/jquery/jquery.cookie.js"></script>
	<script type="text/javascript" src="../../js/wms/appRequest.js"></script>

	<script src="../../js/photo/binaryajax.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/photo/exif.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/photo/canvasResize.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		//$.noConflict()//jq 释放 $
		//mui初始化
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});

		(function($, doc) {
			$.init();

			$.plusReady(function() {
				document.addEventListener("netchange", checkNetwork, false);

				function checkNetwork() {
					if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
						mui.toast("网络异常，请检查网络设置！");
					}
				}
			});
			
			
		}(mui, document));

		// 全局数组对象，添加文件,用于压缩上传使用  
		var f1 = new Array();

		//上传单张图片  
		function galleryImg() {
			//每次拍摄或选择图片前清空数组对象  
			f1.splice(0, f1.length);
			document.getElementsByClassName("showimg")[0].innerHTML = null;
			// 从相册中选择图片  
			mui.toast("从相册中选择一张图片");
			plus.gallery.pick(function(path) {
				showImg(path);
			}, function(e) {
				mui.toast("取消选择图片");
			}, {
				filter: "image",
				multiple: false
			});
		}

		//从相册选择多张图片
		function galleryImgs() {
			//每次拍摄或选择图片前清空数组对象  
			f1.splice(0, f1.length);
			document.getElementsByClassName("showimg")[0].innerHTML = null;

			// 从相册中选择图片  
			mui.toast("一次最多选择6张图片");
			plus.gallery.pick(function(e) {
				if(e.files.length < 1) {
					mui.toast('请最少选择一张图片');
					return false;
				}
				if(e.files.length > 6) {
					mui.toast('不能超过6张图片');
					return false;
				}
				for(var i in e.files) {
					showImg(e.files[i]);
				}
			}, function(e) {
				mui.toast("取消选择图片");
			}, {
				filter: "image",
				multiple: true
			});
		}

		// 拍照添加文件  
		function cameraImages() {
			//每次拍摄或选择图片前清空数组对象  
			f1.splice(0, f1.length);
			
			document.getElementsByClassName("showimg")[0].innerHTML = null;
			var cmr = plus.camera.getCamera();
			cmr.captureImage(function(p) {
				plus.io.resolveLocalFileSystemURL(p, function(entry) {
					var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。  
					showImg(localurl);
				});
			}, function(e) {
				mui.toast("很抱歉，调用摄像头失败 ");
			});
		}

		//显示预览图片
		function showImg(url) {
			// 兼容以“file:”开头的情况
			if(0 != url.toString().indexOf("file://")) {
				url = "file://" + url;
			}
			var div = document.getElementsByClassName("showimg")[0];

			var img = new Image();
			img.src = url; // 传过来的图片路径在这里用。
			img.onclick = function() {
				plus.runtime.openFile(url);
			};
			img.onload = function() {
				
				var tmph = img.height;
				var tmpw = img.width;
				
				var isHengTu = tmpw > tmph;
				var max = Math.max(tmpw, tmph);
				var min = Math.min(tmpw, tmph);
				var bili = min / max;
				if(max > 1200) {
					max = 1200;
					min = Math.floor(bili * max);
				}
				tmph = isHengTu ? min : max;
				tmpw = isHengTu ? max : min;
				img.style.border = "1px solid rgb(200,199,204)";
				img.style.margin = "10px";
				img.style.width = "150px";
				img.style.height = "150px";
				img.onload = null;
				
				plus.io.resolveLocalFileSystemURL(url, function(entry) {
						entry.file(function(file) {
							console.log(file.size + '--' + file.name);
							canvasResize(file, {
								width: tmpw,
								height: tmph,
								crop: false,
								quality: 50, //压缩质量
								rotate: 0,
								callback: function(data, width, height) {
									
									f1.push(data);
									img.src = data;
									
									div.appendChild(img);
									
									plus.nativeUI.closeWaiting();
								}
							});
						});
					},
					function(e) {
						plus.nativeUI.closeWaiting();
						console.log(e.message);
					});
			};
		};

		//提交
		function imgUpload() {
			mui.toast('后台联调时启用上传功能');
			return;
			var wt = plus.nativeUI.showWaiting();
			var url = '后台地址';
			var dataType = 'json';
			//发送数据    
			var data = {
				files1: f1 //base64数据          
			};
			mui.post(url, data, success, dataType);
		}

		//成功响应的回调函数  
		var success = function(response) {
			plus.nativeUI.closeWaiting();
			if(response != null) {
				alert("上传成功");
			}
		}
	</script>

</html>