<!VDNDOC "PageBase":"nvo_upfile_ex","IniEvent":"PageIni","NotValidLogin":true>
<html>

	<head>
		<meta charset="utf-8">
		<title>文件上传</title>
		<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">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<style>
			h5 {
				margin: 5px 7px;
			}
		</style>
		<!--图片预览-->
		<style type="text/css">
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				img z-index: 20;
				background-color: #000;
			}
			
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			
			.mui-preview-loading.mui-active {
				display: block;
			}
			
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			p img {
				max-width: 50px;
				height: 50px;
				padding: 3px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content-padded">
			<p style="text-indent: 22px;">本例演示的是使用H5自身的file组件实现文件的上传
				<p style="text-indent: 22px;">
					可以通过form提交或者Ajax来实现。
				</p>
		</div>
		<div class="mui-content">
			<div class="mui-content-padded" style="margin: 5px;">
				<form id="form1" method="post" class="mui-input-group" enctype="Multipart/form-data">
					<div id="div_file">
						<div class="mui-input-row">
							<label>文件1</label>
							<input name="t_file1" id="t_file1" type="file" class="mui-input-clear" accept="image/jpeg">
						</div>
						<div class="mui-input-row">
							<label>文件2</label>
							<input name="t_file2" id="t_file2" type="file" class="mui-input-clear" accept="image/jpeg">
						</div>
						<div class="mui-input-row">
							<label>文件3(多选)</label>
							<input name="t_file3" id="t_file3" type="file" multiple="multiple" class="mui-input-clear" accept="image/jpeg;*.*">
						</div>
						<div class="mui-button-row">
							<button id="b_submit" class="mui-btn mui-btn-primary">Form上传</button>&nbsp;&nbsp;
							<button type="button" id="b_ajax" data-loading-text="上传中" class="mui-btn mui-btn-warning">Ajax上传</button>&nbsp;&nbsp;
							<button type="button" id="b_ajax_lrz" data-loading-text="上传中" class="mui-btn mui-btn-green">压缩上传</button>&nbsp;&nbsp;
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="mui-content">
			<div class="mui-content-padded">
				<p>这是图片放大预览示例，点击如下图片体验全屏预览功能</p>
				<p id="list">

				</p>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/imgeview/mui.zoom.js"></script>
		<script src="js/imgeview/mui.previewimage.js"></script>
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript" src="js/img_encoder/lrz.bundle.js"></script>
		<script src="js/vdn.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			$(function() {
				//Form上传
				var data = "/*<!--INCLUDE:data;JS-->*/";
				$.each(data, function(index, url) {
					$('<img src="' + url + '" data-preview-src="" data-preview-group="1" />').appendTo("#list");
				});
				//预览初始化
				mui.previewImage();
			})

			//ajax上传
			$("#b_ajax").click(function() {
				mui("#b_ajax").button('loading');
				vdn.async = false; //同步上传，否则为异步
				//第一个参数可以为 form id或者div id或者file组件ID，也可以是一个配置好的FormData对象
				vdn.upfile("form1", {
						method: "nvo_upfile.savefile_json"
					}, function(data) {
						this.disabled = false;
						//模板
						alert("文件上传成功");
						$.each(data.Result, function(index, url) {
							$('<img src="' + url + '" data-preview-src="" data-preview-group="1" />').appendTo("#list");
						});
						//预览初始化
						mui.previewImage();
					},
					function(err) {
						alert(err.Message + "(" + err.Code.toString() + ")");
					});
				//设置按钮有效 增加延时
				setTimeout(function() {
					mui("#b_ajax").button('reset');
				}, 100);
				/*
				//使用ajax上传图片到VDN
				var fileObj = new FormData($("#form1")[0]);
				if(typeof(fileObj) == "undefined" || fileObj.size <= 0) {
					alert("请选择图片");
					return;
				}
				fileObj.append("method", "[pbplugin].nvo_upfile.savefile_json");
				//fileObj.append("params", "");
				$.ajax({
					url: "http://192.168.2.189:8100/api",
					data: fileObj,
					type: "Post",
					dataType: "json",
					cache: false, //上传文件无需缓存
					processData: false, //用于对data参数进行序列化处理 这里必须false
					contentType: false, //必须
					success: function(result) {
						alert("上传完成!");
					},
					error: function(xhr, error, exception) {
						alert(error + ":" + exception.toString());

					}
				});
				//设置按钮有效 增加延时
				setTimeout(function() {
					$("#b_ajax").attr("disabled", false);
				}, 100);*/
			});

			
			//先压缩再ajax上传
			$("#b_ajax_lrz").click(function() {
				//压缩后放入FormData
				var fileForm = new FormData();
				var fileList = []
				var fileCount = 0;
				mui("#b_ajax_lrz").button('loading');
				var files = $(":file");
				//先将文件放入fileList，然后压缩（异步），再上传
				files.each(function(index, item) {
					for(var i = 0; i < item.files.length; i++) {
						fileList[fileCount] = {
							"id": item.id,
							"file": item.files[i]
						};
						fileCount++;
					}
				});
				//开始压缩	
				zipImage(fileList, 0, fileForm);
			});
			
			//压缩图片
			function zipImage(fileList, index, fileForm) {
				/* 压缩图片  压缩操作为异步*/
				//此处通过lrz.bundle.js来实现图片压缩，可以指定压缩率quality或者宽度width\高度height中的任意一个参数
				//不指定width或者heigth则保留原来的尺寸，只指定其中一个则按照比例缩放
				lrz(fileList[index].file, {
					quality: 0.4, //设置压缩率
					width: 200 //设置宽度
				}).then(function(rst) {
					//增加到fileForm中
					fileForm.append(fileList[index].id, rst.file, fileList[index].file.name);
					//如果为最后一个则开始上传
					if(index == fileList.length - 1) {
						_upFile(fileForm);
					} else {
						index++;
						zipImage(fileList, index, fileForm);
					}
				}).catch(function(err) {
					/* 处理失败后执行 */
					alert("压缩失败:" + err);
					//设置按钮有效 增加延时
					setTimeout(function() {
						mui("#b_ajax_lrz").button('reset');
					}, 100);
					return;
				}).always(function() {
					/* 必然执行 */
				});
			}
			
			//压缩后上传调用
			function _upFile(fileForm) {
				//同步上传，否则为异步
				vdn.async = false;
				vdn.upfile(fileForm, {
						method: "nvo_upfile.savefile_json"
					}, function(data) {
						this.disabled = false;
						//模板
						alert("文件上传成功");
						$.each(data.Result, function(index, url) {
							$('<img src="' + url + '" data-preview-src="" data-preview-group="1" />').appendTo("#list");
						});
						//预览初始化
						mui.previewImage();
					},
					function(err) {
						alert(err.Message + "(" + err.Code.toString() + ")");
					});
				//设置按钮有效 增加延时
				setTimeout(function() {
					mui("#b_ajax_lrz").button('reset');
				}, 100);
			}

		</script>
	</body>

</html>