yong
/
Examination_system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Examination_system/Examination_system-1/WebContent/WEB-INF/views/imgsUpload.jsp

202 lines
7.4 KiB
Plaintext
Raw Blame History

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<%@include file="baseset.jsp" %>
<%@include file="systemset.jsp" %>
<link rel="stylesheet" type="text/css" href="${bonuspath}/static/plugins/query-fileupload/jquery.fileupload.css" />
<script type="text/javascript" src="${bonuspath}/static/plugins/query-fileupload/jquery.xdr-transport.js"></script>
<script type="text/javascript" src="${bonuspath}/static/plugins/query-fileupload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${bonuspath}/static/plugins/query-fileupload/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${bonuspath}/static/plugins/query-fileupload/jquery.fileupload.js"></script>
<%-- <script src="${bonuspath}/static/plugins/layer/2.1/extend/layer.ext.js" ></script> --%>
<title></title>
<style type="text/css">
.del_icon{
float:right;
z-index:2;
width:20px;
height:20px;
}
.img{
z-index:1;
width:100px;
height:100px;
border:solid 1px black;
}
.img_div{
display: inline-block;
padding:10px;
}
</style>
</head>
<body>
<div>
<div class="row cl" id="qrCode">
<div align="center" style="padding-top:20px;" >
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>上&nbsp;&nbsp;传</span>
<input id="fileupload" type="file" name="file" multiple="multiple"/>
</span>
<c:if test="${obj.type.id == 76}"><span>(jpg,png格式图片)</span></c:if>
<c:if test="${obj.type.id == 77}"><span>(doc,docx,txt文档)</span></c:if>
<c:if test="${obj.type.id == 78}"><span>(xls,xlsx文档)</span></c:if>
<c:if test="${obj.type.id == 79}"><span>(pdf文件)</span></c:if>
<br>
<c:choose>
<c:when test="${obj.type.id == 76}">
<div id="imgC" class="imgView" style="display: inline-block;">
<c:forEach items="${imgs}" var="img" >
<div class='img_div' id="img${img.id}" ><img title="点击浏览" onclick="viewImgs(this)" class='img' src="/img${img.folderName}/${img.saveName}${img.suffix}">
<input type="hidden" name = "imgId" value="${img.id}">
<img class='del_icon' onclick="deleteImg(${img.id},this)" title='删除' src='${bonuspath}/static/image/delete.png' >
<br>
<font>${fn:substringBefore(img.preName,'.')}</font>
</div>
</c:forEach>
</div>
</c:when>
<c:otherwise>
<div id="imgC" class="imgView" style="display: inline-block;">
<c:forEach items="${imgs}" var="img" >
<div class='img_div' id="img${img.id}" >
<a title="点击预览" href="/img${img.folderName}/${img.saveName}${img.suffix}">${img.preName}${img.suffix}</a>
<img class='del_icon' onclick="download(${img.id},this)" title='下载' src='${bonuspath}/static/image/download.png' >
<img class='del_icon' onclick="deleteImg(${img.id},this)" title='删除' src='${bonuspath}/static/image/del.png' >
</div>
</c:forEach>
</div>
</c:otherwise>
</c:choose>
</div>
</div>
</div>
<script type="text/javascript">
var ownerId;
var modelFlag;
var folderName;
var filetype;
var type = {76:/^gif|jpe?g|png$/i,77:/^doc|docx|txt$/i,78:/^xls|xlsx$/i,79:/^pdf$/i}
$(function(){
ownerId = '${obj.ownerId}';
modelFlag = '${obj.modelFlag}';
folderName = '${obj.folderName}';
filetype = '${obj.type.id}';
var url = bonuspath+"/backstage/fileUpload/imgsUpload?folderName="+folderName+"&modelFlag="+modelFlag+"&ownerId="+ownerId+"&type.id="+filetype;
$('#fileupload').fileupload({
url: url,
singleFileUploads: false,
maxFileCount:10,
dataType: 'JSON',
maxNumberOfFiles : 5,
done: function (e, data) {
var size = data.result.length;
console.log("data22",JSON.stringify(data))
if(filetype == 76){
for(var i = 0; i < size; i++){
var json = JSON.parse(data.result[i]);
var html = "<div class='img_div'><input type='hidden' name = 'imgId' value='"+json.id+"'><img class='img' onclick='viewImgs(this)' src='"+json.url+"'>";
html += "<img class='del_icon' onclick='deleteImg("+json.id+",this)' title='删除' src='${bonuspath}/static/image/delete.png' >"+
"<br><font>"+json.preName.substring(0,json.preName.indexOf('.'));+"</font></div>";
$(".imgView").append(html);
}
layer.msg("图片上传成功!",{icon: 1,time:1000});
}else{
for(var i = 0; i < size; i++){
var json = JSON.parse(data.result[i]);
var html = "<div class='img_div'><a href="+json.url+">"+json.preName+"</a>";
html += "<img class='del_icon' onclick='download("+json.id+",this)' title='删除' src='${bonuspath}/static/image/download.png' >";
html += "<img class='del_icon' onclick='deleteImg("+json.id+",this)' title='删除' src='${bonuspath}/static/image/del.png' >";
$(".imgView").append(html);
}
layer.msg("文件上传成功!",{icon: 1,time:1000});
}
},
add:function (e,data){
//判断文件类型 var acceptFileTypes = /\/(pdf|xml)$/i;
var fileType = '${obj.type.id}';
var acceptFileTypes = type[fileType];
var name = data.originalFiles[0]["name"];
var index = name.lastIndexOf(".")+1;
var fileType = name.substring(index,name.length);
if(!acceptFileTypes.test(fileType)){
layer.confirm("请选择正确的上传格式!", {btn: ['确定', '取消'], title: "提示"}, function (index) {
layer.close(index);
});
return ;
}
var size = data.originalFiles[0]["size"];
if(size > (1024*10*1024)){
alert("上传文件超过最大限制！");
return ;
}
data.submit();
}
});
});
function getImgId(){
//var imgId = $("input[name = imgId]").val();
var imgIds = "";
$("input[name = imgId]").each(function(){
if(imgIds == ""){
imgIds=$(this).val();
}else{
imgIds += "," + $(this).val();
}
});
return imgIds;
}
/**
* @author
* @date 2020-07-15
* @function 查看资料的图片
* @returns
*/
function viewImgs(that){
var offset = $('.img').index(that);
window.parent.viewImgs(ownerId,offset,modelFlag);
}
/**
* @author 无畏
* @date 2019-05-31
* @function 通用删除图片
* @returns
*/
function deleteImg(imgId,that){
var params={id:imgId};
layer.confirm('确定删除该文件？', {
btn: ['确定','取消'] //按钮
}, function(){
$.ajax({
type:'POST',
url:bonuspath+'/backstage/fileUpload/deleteImg',
data:JSON.stringify(params),
contentType: "application/json",
success:function(data) {
data = JSON.parse(data);
if(data.res == 1){
$(that).parent().remove();
layer.msg(data.resMsg,{icon: 1,time:1000});
}else{
layer.msg(data.resMsg,{icon: 2,time:1000});
}
}
});
});
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink