<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<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>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0ddd43ac1a8f3953c28693e19361f9d4"></script>
<link href="${ctxStatic}/website/css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="${ctxStatic}/website/css/iconfont.css" />
<link rel="stylesheet" href="${ctxStatic}/website/css/style.css" />
<link rel="stylesheet" href="${ctxStatic}/websitepic/css/weui.min.css">
<link rel="stylesheet" href="${ctxStatic}/websitepic/css/jquery-weui.min.css">
<link rel="stylesheet" href="${ctxStatic}/websitepic/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctxStatic}/websitepic/css/zhaogongguanggaoxingshi.css">
<link rel="stylesheet" href="${ctxStatic}/websitepic/css/weui.css">
<link rel="stylesheet" href="${ctxStatic}/layer_mobile/layer.css">
<script type="text/javascript" src="${ctxStatic}/layer_mobile/layer.js"></script>
<script type="text/javascript" charset="utf-8">mui.init();</script>
<script src="${ctxStatic}/website/js/mui.picker.min.js"></script>
<script src="/hljview/page/html/js/lrz.bundle.js"></script>
<script src="/hljview/page/html/js/lrz.all.bundle.js"></script>
<style>
html,body {background:#fff;}
</style>
</head>
<body>
<nav class="mui-bar mui-bar-tab" >
<c:if test="${sessionScope.jiezhang=='1'}">
<a class="mui-tab-item mui-active" href="${ctx}/website/index">
<span class="mui-icon mui-icon-home" style="color: #000;"></span>
<span class="mui-tab-label" style="color: #000;">首页</span>
</a>
</c:if>
<a class="mui-tab-item" href="${ctx}/website/jiezhang">
<span class="mui-icon mui-icon-flag" style="color: #999;"></span>
<span class="mui-tab-label" style="color: #999;">街长</span>
</a>
<a class="mui-tab-item" href="${ctx}/website/gerenzhongxin">
<span class="mui-icon iconfont icon-icon-test" style="color: #999;"></span>
<span class="mui-tab-label" style="color: #999;">我的</span>
</a>
</nav>
<header class="mui-bar mui-bar-nav" style="background:#14183a;">
<span class="mui-icon mui-icon-back" style="color: #fff;font-size:28px;"></span>
<h1 class="mui-title" style="color: #fff;">上传图片</h1>
</header>
<form id="inputForm" action="${ctx}/website/save" class="mui-content" style="background-color: #fff;padding-bottom: 140px;"
enctype="multipart/form-data">
<input type="hidden" name="imgUrl" id="imgUrl">
<div class="mui-content-padded" style="margin: 5px;">
<div class="mui-input-row" style="margin: 10px 5px;">
<textarea id="textarea" name="remark" rows="5" placeholder="请描述具体情况..." style="border: none;font-size: 16px;"></textarea>
</div>
</div>
<!--图片上传-->
<div id="img" class="weui-cells weui-cells_form" style="width:100%;">
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title" style="font-size:1rem;">图片上传</p>
</div>
<div class="weui-uploader__bd" style="padding-left:0rem;">
<ul class="weui-uploader__files" id="uploaderFiles">
</ul>
<div class="weui-uploader__input-box" style="width:8rem;height:8rem;">
<input type="file" name="files" class="weui-uploader__input" multiple="true" id="file_more1"
accept="image/*" onchange="preview(this);">
</div>
<script src="${ctxStatic}/websitepic/js/jquery.min.js"></script>
<script src="${ctxStatic}/websitepic/js/jquery-weui.min.js"></script>
<script src="${ctxStatic}/websitepic/js/swiper.js"></script>
</div>
</div>
</div>
</div>
</div>
<div class="mui-input-row" style="padding-left:30px;">
<span class="mui-icon mui-icon-person" style="position: absolute;left: 16px;top: 8px;"></span>
<label style="width: 42%;font-size: 15px;">店 家：</label>
<input type="text" name="yuliu" class="mui-input-clear" placeholder="输入店家名字" style="width: 58%;font-size: 15px;">
</div>
<div class="mui-input-row" style="padding-left:30px;">
<span class="mui-icon mui-icon-phone" style="position: absolute;left: 16px;top: 8px;"></span>
<label style="width: 42%;font-size: 15px;">联系电话：</label>
<input type="text" name="phone" class="mui-input-clear" placeholder="输入手机号码" style="width: 58%;font-size: 15px;">
</div>
<div class="mui-input-row"style="padding-left:30px;">
<span class="mui-icon mui-icon-location" style="position: absolute;left: 16px;top: 8px;"></span>
<label style="width: 42%;font-size: 15px;">详细地址：</label>
<input type="text" id="addr" name="addr" class="mui-input-clear" placeholder="输入详细地址" style="width: 58%;font-size: 15px;">
</div>
<div class="mui-button-row" style="margin-top: 20px;">
<button type="button" onclick="test()" class="mui-btn mui-btn-primary" style="width: 50%;border: none;height: 40px;font-size: 18px;">提交</button>
</div>
</form>
<div id="allmap" style="width: 100%;height: 100em;"></div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(108.95,34.27);
map.centerAndZoom(point,12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){console.log(r.point)
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);//标出所在地
map.panTo(r.point);//地图中心移动
//alert('您的位置：'+r.point.lng+','+r.point.lat);
var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents; console.log(rs.address);//地址信息
//alert(rs.address);//弹出所在地址
document.getElementById("addr").value=rs.address;
});
}else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
</script>
<script src="xwPop.js" type=""></script>
<script>
//var form2 = new FormData(document.getElementById("inputForm"));
var arr =new Array();
var lastArray=null;
var i=1;
function preview(file) {
lastArray=new Array();
if (file.files && file.files[0]) {
for (var index = 0, f; f = file.files[index]; index++) {
var reader = new FileReader();
reader.onload = function (evt) {
var html = '<li class="weui-uploader__file" style="width:8rem;height:8rem;">';
html += '<a href="javascript:;" class="pb1 weui-btn weui-btn_primary" style="display:block; width:8rem;height:8rem;">';
html += ' <img src="' + evt.target.result + '" style="width:8rem;height:8rem;" alt=""></a>';
html += '</li>';
$("#uploaderFiles").append(html);
}
reader.readAsDataURL(file.files[index]);
//form2.append("files2",file.files[index]);
arr.push(file.files[index]);
lastArray.push(file.files[index]);
}
}
else {
html += ' <img src=" ' + file.value + '" style="width:8rem;height:8rem;" alt=""></a>';
}
}
function test() {
var form = new FormData(document.getElementById("inputForm"));
console.log("arr="+arr);
console.log("lastArray="+lastArray);
var ra = new Array();
for(var i = 0; i < arr.length; i ++){
var x=true;
for (var j=0;j<lastArray.length;j++){
if(arr[i]==lastArray[j]){
x=false;
}
}
if(x){
ra.push(arr[i]);
}
}
console.log("arr="+ra);
for(var xx=0;xx<ra.length;xx++){
form.append("files",ra[xx]);
}
$.ajax({
url: "${ctx}/website/save",
type: "post",
data: form,
processData: false,
contentType: false,
success: function (data) {
if (data=='0') {
layer.open({
content: '保存信息成功'
,skin: 'msg'
,time: 2 //2秒后自动关闭
});
window.location.href = "${ctx}/website/gerenzhongxin";
}else{
layer.open({
content: '未登录或不是街长不允许录入信息！！！'
,skin: 'msg'
,time: 2 //2秒后自动关闭
});
}
},
error: function (e) {
layer.open({
content: '错误！！！'
,skin: 'msg'
,time: 2 //2秒后自动关闭
});
}
});
}
</script>
</body>
</html>