zhengbingbing
/
XiXianDC_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
							<!doctype html>
<html lang="en" class="feedback">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>信息上传</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/webuploader.css" />
		<link rel="stylesheet" type="text/css" href="css/Common.css" />
		<style>

		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="row mui-input-row">
				<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
			</div>
			<div id='image-list' class="row image-list">
				<div id="filePicker">
				</div>
			</div>
			<div class="row image-list">

			</div>
			<form class="mui-input-group" method="post" enctype="multipart/form-data" id="uploadForm">

				<div class="mui-input-row">
					<label>联系人：</label>
					<input type="text" class="mui-input-clear" id="Username" placeholder="">
				</div>
				<div class="mui-input-row">
					<label>联系电话：</label>
					<input type="text" class="mui-input-clear" id="Phone" placeholder="">
				</div>

			</form>
			<div class="mui-button-row" id="Btns-box">
				<button type="button" id="submit" class="mui-btn mui-btn-primary" onclick="return false;">提交</button>&nbsp;&nbsp;
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/webuploader.min.js"></script>
		<!--<script src="../js/feedback-page.js" type="text/javascript" charset="utf-8"></script>-->

		<script type="text/javascript">
			mui.init();
			var files;
			var Str;
			var str_ary;
			var reg = /,$/gi;
			$("#submit").on('tap', function() {
				$(".image-item ").each(function(i, n) {
					var a = $(this).find('.image-box ').attr("indexs");
					Str += a + ',';
					console.log(Str);
					str_ary = Str.split("ed")[1];
					files = Str.split("ed")[1].substring(0, str_ary.length - 7).replace(reg, "");
				})
				console.log(files);
				if(!$("#question").val()) {
					mui.toast("工单内容不能为空");
				} else {
					$.ajax({
						type: "post",
						url: huayi.config.callcenter_url + 'WxLogin/AddWorkOrder',
						async: true,
						dataType: 'json',
						data: {
							cusname: $("#Username").val(), //联系人
							cusphone: $("#Phone").val(), //联系电话
							content: $("#question").val(), //信息内容
							files: files,
							openid: openid //微信openid
						},
						success: function(data) {
							if(data.state == "success") {
								Clean();
								mui.toast("添加成功");

								location.href = "WorkList.html";
							} else {
								mui.alert(data.message);
							}
						}
					});
				}

			})

			function Clean() {
				$("#Username").val('');
				$("#Phone").val('');
				$("#question").val('');
			}

			// 图片上传demo
			 var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
		   var $=jQuery;
				var $ = jQuery,
					$list = $('#image-list'),
					// 优化retina, 在retina下这个值是2
					ratio = window.devicePixelRatio || 1,

					// 缩略图大小
					thumbnailWidth = 50 * ratio,
					thumbnailHeight = 50 * ratio,

					// Web Uploader实例
					uploader;

				// 初始化Web Uploader
				$(function(){
					
				uploader = WebUploader.create({

					// 自动上传。
					auto: true,
					// swf文件路径
					swf: '../js/Uploader.swf',

					// 文件接收服务端。
					//					server: 'http://192.168.4.18:4120/WxLogin/UpdateFile',
					server: 'http://192.168.4.18:4120/WxLogin/UpLoadProcess',

					// 选择文件的按钮。可选。
					// 内部根据当前运行是创建，可能是input元素，也可能是flash.
					pick: '#filePicker',
					// 图片数量限制
					fileNumLimit: 4,
					// 只允许选择文件，可选。
					accept: {
						title: 'Images',
						extensions: 'gif,jpg,jpeg,bmp,png',
						mimeTypes: 'image/*'
					}
				});
				//上传图片提示
				uploader.on('error', function(handler) {
					if(handler == "Q_EXCEED_NUM_LIMIT") {
						mui.toast("超出最大张数");
					}
				});
				// 当有文件添加进来的时候
				uploader.on('fileQueued', function(file) {
					var $li = $(
							'<div id="' + file.id + '" class="file-item thumbnail">' +
							'<div class="image-close">X</div>' +
							'<img>' +
							'<div class="info">' + file.name + '</div>' +
							'</div>'
						),
						$img = $li.find('img');

					$list.prepend($li);
					$(".image-close").on('tap', function() {
						$(this).parent().remove();
					});
					// 创建缩略图
					uploader.makeThumb(file, function(error, src) {
						if(error) {
							$img.replaceWith('<span>不能预览</span>');
							return;
						}

						$img.attr('src', src);
					}, thumbnailWidth, thumbnailHeight);
				});

				// 文件上传过程中创建进度条实时显示。
				uploader.on('uploadProgress', function(file, percentage) {
					var $li = $('#' + file.id),
						$percent = $li.find('.progress span');

					// 避免重复创建
					if(!$percent.length) {
						$percent = $('<p class="progress"><span></span></p>')
							.appendTo($li)
							.find('span');
					}

					$percent.css('width', percentage * 100 + '%');
				});

				// 文件上传成功，给item添加成功class, 用样式标记上传成功。
				uploader.on('uploadSuccess', function(file, response) {
					console.log(response);
					$('#' + file.id).addClass('upload-state-done');
				});

				// 文件上传失败，现实上传出错。
				uploader.on('uploadError', function(file) {
					var $li = $('#' + file.id),
						$error = $li.find('div.error');

					// 避免重复创建
					if(!$error.length) {
						$error = $('<div class="error"></div>').appendTo($li);
					}

					$error.text('上传失败');
				});

				// 完成上传完了，成功或者失败，先删除进度条。
				uploader.on('uploadComplete', function(file) {
					$('#' + file.id).find('.progress').remove();
				});

	});
		</script>
	</body>

</html>