<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- 分离模式框架必需start -->
<script type="text/javascript" charset="UTF-8" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" charset="UTF-8" th:src="@{/js/language/cn.js}"></script>
<script type="text/javascript" charset="UTF-8" th:src="@{/js/framework.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/css/import_basic.css}" />
<link rel="stylesheet" type="text/css" id="skin" prePath="@{/}" splitMode="true" th:href="@{/skins/blue/style.css}" />
<link rel="stylesheet" type="text/css" id="customSkin" th:href="@{/system/layout/skin/style.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/skin/style.css}" />
<!-- 分离模式框架必需end -->
<!--ajax提交start-->
<script type="text/javascript" th:src="@{/js/jquery.form.js}"></script>
<!--ajax提交end-->
<script type="text/javascript" th:src="@{/js/ajaxfileupload.js}"></script>
<script type="text/javascript" th:src="@{/js/IMGUP/kissy-min.js}"></script>
<script type="text/javascript" th:src="@{/js/IMGUP/index-min.js}"></script>
<link th:href="@{/files_tp6/IMGUP.css}" rel="stylesheet"/>
<style>
.quanzi-wrap {
width: 130px;
height: 130px;
font-family: 微软雅黑;
font-size: 16px;
text-align: center;
line-height: 130px;
font-family: 微软雅黑;
box-sizing: border-box;
border: 2px solid gray;
cursor: pointer
}
.quanzi-wrap:hover {
background-color: #d1cfcf
}
</style>
<script>
var basePath=[[@{/}]];
var oilfield='[[${session.oilfield}]]';
var UP_IMGCOUNT=0;//图片顺序
function initComplete() {
var date = new Date;
//date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
var kc_date = year + "-" + month + "-" + day;//勘查日期
$('#kc_date').val(kc_date);
$('#rq').val(kc_date);
//能否施工
$.ajax({url:basePath+'Security/Common/appendix?parent_id='+encodeURI("FJ20191111134000018171")+"&oilfield="+encodeURI(oilfield),
type:"post",
success:function(result){
data=result;
console.log(result)
$("#whether_construction").data("data",result);
$("#whether_construction").render();
}
});
var id = [[${entity.kc_id}]];//勘察id
if(id>0){
//查询本井勘察图片
$.ajax({url:basePath+"Security/Kc/imagelist?kc_id="+id,
type:"post",
success:function(data){
var href2='';
var href3='';
numb=data.rows.length;
UP_IMGCOUNT=numb;
$.each(data.rows, function(i, v) {
var ii=i;
var b='<div class="lookimg" num="'+i+'">'
+'<img src="'+basePath+"aqscImage/"+v.image_name+'">'
+'<div class="lookimg_delBtn" style="display: none;">移除</div>'
+'<div class="mainCon">'
+'<table cellspacing="0" cellpadding="0" style="border-style:none;">'
+'<tbody>'
+'</tbody>'
+'</table>'
+'<div id="'+ii+'_container" class="selectbox-wrapper" hasfocus="0" style="display: none;">'
+'</div>'
+'<div class="loader" style="display: none;">数据加载中...</div>'
+'</div>'
+'<div class="lookimg_progress">'
+'<div></div>'
+'</div>'
+'</div>';
var xh='image'+i;
var c='<input id="'+xh+'" name="images" type="hidden" value="'+v.image_name+'">';
href2+=b;
href3+=c;
});
$(".quanzi-wrap").before(href2);
$(".quanzi-wrap").after(href3);
}
});
}
}
</script>
</head>
<body>
<form method="post" id="myForm" enctype="multipart/form-data" target="frmright">
<input type="hidden" name="kc_id" th:value="${entity.kc_id}" style="width:100%"/>
<table class="tableStyle" mode="list" id="table1" style="width:98%" align="center">
<tr>
<td colspan="8">
<div id="iframe-wrap">
<div id="div_imglook">
<div class="quanzi-wrap" node-type="inputWrap">上传图片
<input type="file" keepDefaultStyle="true" onChange="cha(this)" accept=".png,.jpg,.jpeg" class="input-test" size="1" hidefocus="true" name="file" id="fid" style="display: none;">
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//图片选中事件
function cha(t){
if($(t).val().length>0){
$("body").mask("图片加载中...");
//图片名随机生成
var date = new Date;
var year = date.getFullYear(), month = date.getMonth() + 1;
if (month < 10) {month = "0" + month;}
var suffixName = "."+t.value.toLowerCase().split('.').splice(-1);
var Name = oilfield+"/KC/"+year+"/"+month+"/"+Math.random().toString(36).substring(2)+suffixName; // 新文件名
upImg(Name);
}
}
//上传
function upImg(filename){
$.ajaxFileUpload({
url : basePath+"Security/Kc/upload?filename="+encodeURI(filename), //用于文件上传的服务器端请求地址
secureuri : false, //一般设置为false
fileElementId : "fid", //文件上传空间的id属性 <input type="file" id="file" name="file1" />
type : 'post',
dataType : 'json', //返回值类型 一般设置为json
success : function(data){
$("body").unmask();
var imgname = filename;
var _prevdiv = document.createElement("div");
_prevdiv=$(_prevdiv).attr("class", "lookimg");
var preview = document.createElement("img");//图片
_prevdiv.append(preview);
var IMG_DELBTN = document.createElement("div");//移除按钮
$(IMG_DELBTN).attr("class", "lookimg_delBtn");
IMG_DELBTN.innerHTML = "移除";
_prevdiv.append(IMG_DELBTN);
var IMG_PROGRESS = document.createElement("div");
IMG_PROGRESS=$(IMG_PROGRESS).attr("class", "lookimg_progress");
IMG_PROGRESS.append(document.createElement("div"));
_prevdiv.append(IMG_PROGRESS);
_prevdiv.attr("num", UP_IMGCOUNT);
$("#div_imglook").children("div:last").before(_prevdiv);
preview.src = basePath+"aqscImage/"+imgname;
//插入文本框，记录上传的文件
//要改的图片接收的属性--
$("#div_imglook").append("<input id='image"+UP_IMGCOUNT+"' name='images' type='hidden' value='"+imgname+"'>");
UP_IMGCOUNT++;
},
error : function(){//服务器响应失败处理函数
alert("图片上传失败，请重试。");
}
});
return false;
}
//删除
$(".lookimg_delBtn").live("click",function(){
$("#image"+$(this).parent().attr("num")).remove();//图片删除
$(this).parent().remove();
});
//图片移除按钮鼠标事件——start
$(".lookimg").live("mouseover",function(){
if($(this).attr("ISUP")!="1")
$(this).children(".lookimg_delBtn").eq(0).css("display","block");
});
$(".lookimg").live("mouseout",function(){
$(this).children(".lookimg_delBtn").eq(0).css("display","none");
});
//图片移除按钮鼠标事件——end
//保存
function addAll(){
$('body').mask("保存中");
$('#fid').remove();//删除文件上传
var form=$("#myForm").formToArray();
$.ajax({url:basePath+"Security/Kc/save",
type:"post",
data:form,
success:function(data){
$('body').unmask();
if(data=="1"){
parent.success("edit",1)
}else{
parent.success("edit",2)
}
}
});
}
</script>
</body>
</html>
// 5、照片异步保存
@ResponseBody
@RequestMapping("upload")
public void upload( MultipartFile file, Model model,String filename, HttpServletRequest request, HttpServletResponse response) {
System.out.println("上传图片名称为=============="+filename);
// 获取当前session
HttpSession session=request.getSession();
int result=0;
if (file.isEmpty()) {
System.out.println("文件为空");
}else{
String filePath =”Z:/AQSC/AQSCIMAGES” +filename;//文件绝对路径
File dest = new File(filePath);
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);//将临时存储的文件移动到真实存储路径下
System.out.println("图片上传完成");
result=1;
} catch (IOException e) {
e.printStackTrace();
}
}
//return result;
}
3782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
