springmvc使用ssi-uploader批量上传图片及后台接受

本文链接：https://blog.csdn.net/wohuozheng/article/details/55044484

本文档展示了如何在Spring MVC项目中利用ssi-uploader组件实现批量图片上传的功能。首先，展示了ssi-uploader的样式设置，然后详细说明了在后台控制器中接收并处理上传文件的方法，包括文件保存路径、文件名获取、数据库存储以及图片尺寸调整等步骤。

摘要由CSDN通过智能技术生成

这是上传界面的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路径

               $('#ssi-upload3').ssi_uploader({url:'${pageContext.request.contextPath}/admin/uploader?albumId='+num,dropZone:false,allowed:['jpg','gif','txt','png','pdf']});
           </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;