这是上传界面的jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<% String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String error = (String) request.getAttribute("error0");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/ssi-uploader.css"/>
<script src="${pageContext.request.contextPath}/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ssi-uploader.js"></script>
</head>
<body>
<!--右半部分-->
<div class="right">
<!--头部导航栏-->
<div class="right_top">
<p id="location">位置>图片上传</p>
<a href="${pageContext.request.contextPath}/admin/exit"><p id="exit">退出</p></a>
</div>
<!--右部主要内容-->
<div class="right_main">
<!--图片上传-->
<div class="row">
<div class="col-md-12">
<h3>图片上传:</h3>
<input type="file" multiple id="ssi-upload3"/>
<input type="hidden" id="albumId" value="${param.id }"/>
</div>
</div>
<script type="text/javascript">
var num=document.getElementById("albumId").value;
//下一行的url即为你后台所走的action路径
</script>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".menu dt").css({"background-color":"#404040"});
$(".menu dt img").attr("src","images/left/select_xl01.png");
$(function(){
$(".menu dd").hide();
$(".menu dt").click(function(){
$(".menu dt").css({"background-color":"#404040"})
$(this).css({"background-color": "#FF5258"});
$(this).parent().find('dd').removeClass("menu_chioce");
$(".menu dt img").attr("src","images/left/select_xl01.png");
$(this).parent().find('img').attr("src","images/left/select_xl.png");
$(".menu_chioce").slideUp();
$(this).parent().find('dd').slideToggle();
$(this).parent().find('dd').addClass("menu_chioce");
});
})
</script>
</body>
</html>
ssi-uploader.css内容
.icon, span.ban7, span.ban7w, span.ban10, span.ban23, span.check7, span.check23, span.exclamation7, span.exclamation23, span.trash7, span.trash10 {
background-image: url("images/sprite.png");
}
.icon, span.ban7, span.ban7w, span.ban10, span.ban23, span.check7, span.check23, span.exclamation7, span.exclamation23, span.trash7, span.trash10 {
background-image: url("images/sprite.png");
}
.ssi-infoTooltip, .ssi-tooltipText {
border: 1px #b7b7b7 solid;
border-radius: 6px;
padding: 7px;
color: #fff;
display: none;
background-color: #151515;
position: absolute;
font-size: 14px;
font-weight: 500;
opacity: 1;
z-index: 30000;
}
.ssi-button {
display: inline-block;
text-align: center;
vertical-align: middle;
font-size: 12px;
text-decoration: none;
border: 1px solid #aeaeae;
cursor: pointer;
padding: 6px 6px;
margin: 0 0 0 2px;
border-radius: 3px;
color: whitesmoke;
}
.ssi-button.error {
background: #cf5144;
}
.ssi-button.error:hover {
background: #ab4b3f;
}
.ssi-button.error:active {
background: #8f493e;
}
.ssi-button.info {
background: #006cbc;
}
.ssi-button.info:hover {
background: #0054a0;
}
.ssi-button.info:active {
background: #004d8e;
}
.ssi-button.success {
background: #40b056;
}
.ssi-button.success:hover {
background: #389e48;
}
.ssi-button.success:active {
background: #2f963b;
}
.ssi-button[disabled] {
opacity: 0.8;
pointer-events: none;
}
.ssi-statusLabel {
padding: 2px 6px;
text-align: center;
font-size: 10px;
color: #fff;
font-weight: 600;
border-radius: 2px;
}
.ssi-statusLabel.error {
background: #cf5144;
}
.ssi-statusLabel.success {
background: #40b056;
}
.selected {
opacity: 0.4;
}
.ssi-previewBox {
float: left;
width: 100%;
color: #ccc;
padding: 10px;
}
.ssi-dropZonePreview {
min-height: 300px;
border: 2px dashed #ccc;
content: 'Drag n Drop Files';
}
#ssi-DropZoneBack {
z-index: -1;
overflow: hidden;
}
.ssi-removeBtn {
margin: 5px 0 5px 0;
padding: 0;
}
.ssi-uploader::after {
content: ' ';
display: block;
clear: both;
}
.ssi-uploadFiles {
position: relative;
float: left;
border: 1px solid #aaaaaa;
overflow: hidden;
border-radius: 3px;
width: 180px;
min-height: 32px;
margin: 2px 2px 2px 0;
font-size: 15px;
vertical-align: middle;
line-height: 30px;
-webkit-transition: height .3s;
transition: height .3s;
background: #FFFFFF;
padding-right: 1px;
}
span.ban7 {
background-position: 0px -18px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 18px;
height: 18px;
}
span.ban7w {
background-position: 0px -36px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 18px;
height: 18px;
background-color: #cf5144;
margin-top: 2px;
height: 17px;
}
span.ban10 {
background-position: 0px 0px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 18px;
height: 18px;
}
span.ban23 {
background-position: 0px -126px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 31px;
height: 31px;
}
span.check7 {
background-position: 0px -54px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 18px;
height: 18px;
background-color: #40b056;
margin-top: 2px;
height: 17px;
}
span.check23 {
background-position: 0px -157px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 31px;
height: 31px;
}
span.exclamation7 {
background-position: 0px -72px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 18px;
height: 18px;
margin-top: 2px;
background-color: #cf5144;
height: 17px;
border-radius: 3px;
}
span.exclamation23 {
background-position: 0px -188px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 31px;
height: 31px;
}
span.trash7 {
background-position: 0px -108px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 18px;
height: 18px;
}
span.trash10 {
background-position: 0px -90px;
background-repeat: no-repeat;
overflow: hidden;
display: block;
width: 18px;
height: 18px;
}
.ssi-previewBox.ssi-dragOver, .ssi-dragOver .ssi-dropZone {
color: #ba2919;
border-color: #ba2919;
}
.ssi-buttonWrapper {
float: left;
padding: 5px;
}
.ssi-noPreviewMessage {
position: relative;
z-index: 1;
border-radius: 4px;
margin: 1px;
float: right;
width: 35px;
height: 31px;
padding: 0;
}
.ssi-noPreviewMessage span {
margin: 0 auto;
}
.ssi-noPreviewSubMessage {
width: 15px;
height: 15px;
padding: 0;
}
.ssi-totalvalue {
float: right;
margin: 2px;
}
.ssi-upImgTd {
position: relative;
}
.ssi-upImgTd .fa-spin {
display: inline-block;
position: absolute;
top: 45%;
left: 45%;
}
.ssi-uploadProgressNoPreview {
position: absolute;
display: block;
text-align: center;
width: 0;
height: 35px;
background: #5cb85c;
-webkit-transition: width .3s;
transition: width .3s;
opacity: 0.6;
}
.ssi-uploadNoDropZone {
border: 1px solid #ccc;
}
.ssi-uploadProgress {
margin-top: 4px;
display: block;
text-align: center;
width: 0;
height: 10px;
background: #5cb85c;
-webkit-transition: width .3s;
transition: width .3s;
}
.ssi-uploadProgressNoPre {
position: absolute;
height: 19px;
margin-top: 0;
opacity: 0.6;
}
.ssi-uploaderNP {
position: relative;
}
.ssi-uploaderNP::after {
content: ' ';
display: block;
clear: both;
}
.ssi-uploadDetails {
width: 180px;
max-height: 0;
top: 37px;
background: #FFFFFF;
position: absolute;
-webkit-transition: max-height .2s ease-out;
transition: max-height .2s ease-out;
border-radius: 3px;
overflow: hidden;
padding-right: 2px;
}
.ssi-uploadBoxWrapper {
float: left;
}
.ssi-uploadBoxOpened {
max-height: 200px;
z-index: 2000;
overflow: auto;
border: 0.1mm solid #dcdcdc;
-webkit-transition: max-height .5s ease-out;
transition: max-height .5s ease-out;
}
table.ssi-fileList {
font-size: 10px;
margin: 5px;
}
table.ssi-fileList tr td:first-child {
border: 0.1mm solid #dcdcdc;
/*border: 0.1mm solid black;*/
width: 89%;
position: relative;
}
table.ssi-fileList tr td:nth-child(2) {
padding-left: 7px;
}
table.ssi-fileList tr {
line-height: 18px;
}
table.ssi-fileList tr.ssi-space > td {
border: none;
padding-bottom: 2px;
}
.ssi-uploadProgress.hide {
margin-top: 0;
opacity: 0;
-webkit-transition: opacity 1.3s;
transition: opacity 1.3s;
}
.ssi-canceledProgressBar {
width: 100% !important;
background: #d9534f;
}
.ssi-imgToUploadTable h2 {
margin: 0;
}
.ssi-hidden {
display: none;
}
.ssi-imgToUploadTable tr:first-child td:first-child {
height: 126px;
}
.ssi-imgToUploadTable tr td {
width: 140px;
}
.ssi-imgToUploadTable {
border: 1px solid #e1e1e1;
color: #000000;
font-size: 15px;
margin-right: 4px;
box-shadow: 0 10px 6px -6px #777;
padding: 5px;
display: inline-block;