</pre><pre name="code" class="html"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<%@ include file="../../system/admin/top.jsp"%>
<link href="resources/css/resblock/resblock-720.css" rel="stylesheet">
<link rel="stylesheet" href="resources/assets/css/font-awesome.css" />
<link rel="stylesheet" href="resources/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
<style type="text/css">
.dele_pic {
display: none;
height: 16px;
left: 315px;
position: absolute;
top: 35px;
width: 16px;
z-index: 12;
cursor:pointer;
}
.worksbox {
position: relative;
}
</style>
</head>
<body>
<div class="div-body">
<div class="div-top">
<div class="div-top-left lighter block blue">
<font size="+1"><a href="picture/resblockCircleView.do">720度环景图</a></font>
<i class="icon-double-angle-right"></i>新增环景图
</div>
<div class="div-top-center"><a id="newBtn" href="javascript:void(0);" οnclick="createRow();" class="btn btn-small btn-info"><i class="icon-pencil"></i>新增</a></div>
<div class="div-top-right" style="color: red;">
<span><b>请注意：1.上传附件大小在50M以内。 2.上传压缩包中尽量不包含中文命名的文件夹或文件。</b><span>
<!-- <a href="picture/resblockCircleView.do" class="btn btn-small btn-purple" title="返回"><i class="icon-arrow-left icon-on-left"></i>返回720度列表</a> -->
</div>
</div>
<div class="div-center">
<div class="center-outside">
<form class="uploadForm" method="post" enctype="multipart/form-data">
<div class="center-left worksbox" >
名称：
<input type="text" autocomplete="off" class="resblockName" name="resblockName" data-placeholder="请输入名称..." onKeyUp="keyUp(this)" style="width: 250px;" οnchange="validChange(this);" />
<input type="hidden" class="resblockId" name="resblockId" />
<input type="hidden" class="belongType" name="belongType"/>
<input type="hidden" class="validResblockName" name="validResblockName" />
<div class="myDiv" align="left" style="display:none;"></div>
<img οnclick="deletPic(this);" src="resources/css/resblock/delete.png" class="dele_pic">
</div>
<div class="center-center"><input type="file" name="file" class="tp" οnchange="fileType(this)" style="widht:250px;"/></div>
<div class="center-right"><span name="uploadmsg" class="upload-msg-span" style="display: block;"></span></div>
</form>
</div>
</div>
<div class="div-bottom">
<div class="row" >
<a id="bsubmit" class="btn btn-small btn-info" οnclick="save();"><i class="icon-save"></i>确定上传</a>
<a class="btn btn-small btn-cancel" href="picture/resblockCircleView"><i class="icon-undo "></i>返 回</a>
</div>
</div>
</div>
</body>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/assets/js/ace/elements.fileinput.js"></script>
<script src="resources/assets/js/ace/ace.js"></script>
<script type="text/javascript" src="resources/js/baiduTemplate.js?v=20160408"></script>
<script type="text/javascript" src="resources/js/jquery.form-3.51.0.js?v=20160408"></script>
<script type="text/html" id="appendUpload">
<div class="center-outside">
<form class="uploadForm" method="post" enctype="multipart/form-data">
<div class="center-left worksbox">
名称：
<input type="text" autocomplete="off" class="resblockName" name="resblockName" data-placeholder="请输入名称..." onKeyUp="keyUp(this)" style="width: 250px;" οnchange="validChange(this);" />
<input type="hidden" class="resblockId" name="resblockId" />
<input type="hidden" class="belongType" name="belongType"/>
<input type="hidden" class="validResblockName" name="validResblockName" />
<div class="myDiv" align="left" style="display:none;"></div>
<img οnclick="deletPic(this);" src="resources/css/resblock/delete.png" class="dele_pic" >
</div>
<div class="center-center"><input type="file" name="file" class="tp" οnchange="fileType(this)" style="widht:250px;"/></div>
<div class="center-right"><span name="uploadmsg" class="upload-msg-span" style="display: block;"></span></div>
</form>
</div>
</script>
<script type="text/javascript">
$(top.hangge());
//拼接html --start{{
var bt=baidu.template;
//设置左分隔符为 <!
bt.LEFT_DELIMITER='<!';
//设置右分隔符为 <!
bt.RIGHT_DELIMITER='!>';
var rowCount=1;
function createRow(){
if(rowCount==10){
alert("最多新增10条数据");
return false;
}
var html=bt('appendUpload',{});
$(".div-center").append(html);
//上传
findUploadStyle();
rowCount++;
}
function deletPic(obj){
$(obj).parent().find(".myDiv").attr("style","display:none");
$(obj).hide();
}
//生成上传文件选择框样式
function findUploadStyle(){
$('.tp').ace_file_input({
no_file:'请上传zip格式压缩包 ...',
btn_choose:'选择',
btn_change:'更改',
droppable:false,
onchange:null,
thumbnail:false,
whitelist:'zip',
});
}
function fileType(obj){
var fileType=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
if(fileType != '.zip'){
$(obj).tips({
side:3,
msg:'请上传zip格式压缩包 ',
bg:'#AE81FF',
time:3
});
$(obj).val('');
}
}
$(function() {
//上传
findUploadStyle();
});
function validChange(obj){
var resblockName=$(obj).val();
var validResblockName=$(obj).parent().find(".validResblockName");
var resblockId=$(obj).parent().find(".resblockId");
if(resblockName!=validResblockName.val()){
validResblockName.attr("value","");
resblockId.attr("value","");
}
}
function isShowDiv(obj){
$(obj).find(".myDiv").attr("style","display:none;");
}
//模糊查询输入框 keyup事件
function keyUp(obj){
//获取当前文本框的值
var search=$(obj).val();
//获取div
var div=$(obj).parent().find(".myDiv");
var delePic=$(obj).parent().find(".dele_pic");
//id
var resblockId=$(obj).parent().find(".resblockId");
if(search==null || search==""){
resblockId.attr("value","");
div.html("");
div.hide();
div.css("style","display:none;");
delePic.hide();
}
if(search!=null && search!=""){
//拼接要放在div的数据
var divhtml = "";
$.ajax({
async : false,
type : "POST",
url : "picture/findResblockList.do",
data : {
"search" : search
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("程序异常，请重试");
},
success : function(data) {
if(data!=null && data.result!=null){
var resblockList=new Array();
resblockList=data.result;
if(resblockList==null || resblockList.length==0){
divhtml+="<div align='center'>未查到数据</div>";
}else{
$.each(resblockList,function(i,value){
var resblockName=value.resblockName;
var resblockId=value.id;
var belongType=value.belongType;
if(belongType==null){belongType="";}
divhtml+="<div><a href='javascript:void(0);' οnclick=javascript:getValue('"+resblockName+"',"+resblockId+",'"+belongType+"',this);>"+resblockName+"</a></div>";
});
}
}
div.html(divhtml);
div.show();
div.css("style","display:block;");
delePic.show();
}
});
}
}
function getValue(resblockName,resblockId,belongType,obj){
$(obj).parent().parent().parent().find(".resblockName").attr("value",resblockName);
$(obj).parent().parent().parent().find(".resblockId").attr("value",resblockId);
$(obj).parent().parent().parent().find(".belongType").attr("value",belongType);
$(obj).parent().parent().parent().find(".validResblockName").attr("value",resblockName);
delayHideDiv(obj);
}
//延迟关闭div 失去焦点延迟200毫秒隐藏div
function delayHideDiv(obj) {
var div=$(obj).parent().parent().parent().find(".myDiv").attr("style","display:none;");
$(obj).parent().parent().parent().find(".dele_pic").hide();
/* setTimeout("$(div).attr('style','display:none;');", 200); */
$(obj).parent().parent().parent().find(".myDiv").html("");
}
var resblockCount=0;
var times=null;
function save(){
var ipts = $('.resblockName'), repeat = '';
$(".resblockName").each(function () {
if (ipts.filter('[value="' + this.value + '"]').size()>1) {
repeat = this.value;
return false;
}
});
if (repeat !== ''){
alert('有重复名称，为：' + repeat + '！');
return false;
}
if(confirm("上传压缩包文件大，耗时长，需要您耐心等待，确定要上传吗？")){
times=window.setInterval("findInputLength()",1000);
//上传按钮置灰，新增按钮置灰
$("#bsubmit").attr("disabled" , true).html("<i class=\"icon-spinner icon-spin\"></i> 正在提交中...").attr("onclick","");
//$("#bsubmit").attr("disabled" , true).attr("onclick","");
$("#newBtn").attr("disabled" , true).attr("onclick","");
//console.log("总共上传"+$(".uploadForm").size()+"个文件");
$(".uploadForm").each(function(index){//form-index
//判断房源编号和压缩包是否有值
var resblockId=$(this).find(".resblockId").val();
var fileName=$(this).find(".tp").val();
//console.log("*****进入each循环======第【"+(index+1)+"】个");
if(fileName=='' || resblockId==''){
$(".upload-msg-span").eq(index).attr("style","color:red;").html("<i class=\"fa fa-times\"></i>名称及文件必选。");
resblockCount++;
//console.log("*****第【"+(index+1)+"】前端校验失败");
return true ;
}
//console.log("*****开始上传第【"+(index+1)+"】个文件");
$(this).ajaxSubmit({
url:"<%=basePath%>picture/saveResblock720.do",
iframe: true,
enctype:'multipart/form-data',
success:function(data, statusText) {
var resultMsg="";
if(data!=null){
resultMsg=data.resultMsg;
if(data.resultStatus==200){
resultMsg="<i class=\"icon-ok\"></i>"+resultMsg;
$(".upload-msg-span").eq(index).attr("style","color:blue;").html(resultMsg);
}else{
resultMsg="<i class=\"fa fa-times\"></i>"+resultMsg;
$(".upload-msg-span").eq(index).html(resultMsg);
}
resblockCount++;
//console.log("*****上传第【"+resblockCount+"】个文件成功");
}
},error: function(arg1, arg2, ex) {
var resultMsg="<i class=\"fa fa-times\"></i>上传异常，请重试。";
$(".upload-msg-span").eq(index).html(resultMsg);
resblockCount++;
//console.log("*****上传第【"+resblockCount+"】个文件失败");
},
dataType: 'json'
});
});
}
}
function findInputLength(){
if(resblockCount==$(".uploadForm").size()){
// 文件上传结束后的 按钮修改
$("#bsubmit").html("<i class=\"icon-ok\"></i>上传结束");
window.clearInterval(times);
}
}
/*
//保存图
function addBuildingFile(){
if(!$(".tp").val() || document.getElementById("tp").files[0] =='请上传zip格式压缩包'){
$(".tp").tips({
side:3,
msg:'请上传zip格式压缩包',
bg:'#AE81FF',
time:3
});
return false;
}
$("#Form").submit();
$("#zhongxin").hide();
$("#zhongxin2").show();
}*/
</script>
</html>resblock-720.css
@charset "utf-8";
.div-body{
overflow:auto;
height:100%;
min-height:600px;
border: 0px solid #c0c0c0;
}
.div-top{
overflow:auto;
height:10%;
min-height:40px;
border: 0px;
border:0px solid #c0c0c0;
padding:6px;
margin-left: 10px;
}
.div-center{
/* margin: 0 auto ;*//* 居中 */
margin-top:1px;
width: auto;
height:60%;
min-height: 50px;
border: 0px solid #c0c0c0;
/* text-align:center; */
padding:6px;
}
.div-bottom{
/* margin: 0 auto ; *//* 居中 */
margin-top:1px;
width: auto;
height:20%;
min-height: 80px;
border: 0px solid #c0c0c0;
margin-left:100px;
/* text-align:center; */
padding:6px;
}
.div-top-left{
width: 22%;
min-width:100px;
height:100%;
min-height:40px;
float:left;
border-right: 0px solid #c0c0c0;
margin-left:5px;
margin-right:3px;
text-align:left;
}
.div-top-center{
width: 10%;
min-width:100px;
height:100%;
min-height:40px;
float:left;
border-right: 0px solid #c0c0c0;
text-align:left;
}
.div-top-right{
overflow:auto;
height:90%;
min-height:35px;
float:left;
border-right: 0px solid #c0c0c0;
text-align:center;
padding: 4px;
}
.center-outside{
overflow:auto;
margin-top:1px;
min-height: 45px;
border: 0px solid #c0c0c0;
text-align:center;
padding:6px;
margin-bottom: 5px;
}
.center-left{
width:30%;
min-width:350px;
height:100%;
min-height:43px;
float: left;
text-align:center;
border: 0px solid #c0c0c0;
/* padding:10px; */
}
.center-center{
width:40%;
min-width:500px;
height:100%;
min-height:43px;
float: left;
margin-left:2px;
text-align:center;
border: 0px solid #c0c0c0;
/* padding:10px; */
}
.center-right{
overflow:auto;
min-width:150px;
height:100%;
min-height:37px;
float: left;
margin-top:6px;
margin-left:2px;
text-align:center;
border:0px solid #c0c0c0;
}
.upload-msg-span{
/* padding: 2px; */
line-height: 20px;
color: red;
}
/**定义模糊搜索时显示的div样式*/
.myDiv {
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background: #FFF0D9;
overflow-y: auto;
overflow-x: hidden;
scrollbar-face-color: #FFF0D9;/*滚动条前景色*/
position: relative;
z-index: 10;
width:260px;
height:200px;
margin-left:85px;
font-size: 14px;
}
.myDiv a {
text-decoration: none;
display: block;
height: 18px;
line-height: 18px;
text-indent: 4px;
text-align: left;
}
.myDiv a:link, .myDiv a:visited {
color: #2A1B00;
background-color: #FFF0D9;
}
.myDiv a:hover, .myDiv a:active {
background-color: #C2C660;
}
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
