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

本文链接：https://blog.youkuaiyun.com/wohuozheng/article/details/55044484

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是上传界面的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;
width: 150px;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

.ssi-imgToUpload {
width: 140px;
height: 128px;
}

.ssi-btnIn {
float: left;
}

.ssi-ieCompatibilityForm {
display: none;
}

span.ssi-InputLabel input[type="file"] {
display: none;
}

.ssi-abortUpload {
padding: 0;
}

.ssi-abortUpload .ban7w {
margin: 0;
}

.ssi-removeBtnNP {
border: none;
color: #ff696d;
font-size: 11px;
margin: 0;
padding: 0;
}

.ssi-InputLabel.disabled, .ssi-InputLabel.disabled:hover, .ssi-InputLabel.disabled:active {
cursor: not-allowed;
background: #5cb85c;
opacity: .65;
}

.ssi-check {
color: #005900;
}

.ssi-boxHover {
cursor: pointer;
}

.ssi-upI.imgTd {
position: relative;
}

/*@author http://codepen.io/tevko/pen/DdsnK*/
.document-item {
display: inline-block;
width: 69px;
height: 74px;
color: black;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: inherit;
}

.document-item::before {
position: absolute;
width: 69px;
height: 74px;
left: 0;
top: -7px;
content: '';
border: solid 2px #920035;
}

.document-item::after {
content: attr(filetype);
left: -4px;
padding: 0px 2px;
text-align: right;
line-height: 1.3;
position: absolute;
background-color: #000;
color: #fff;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
top: 9px;
}

.document-item .fileCorner {
width: 0;
height: 0;
border-style: solid;
border-width: 13px 0 0 13px;
border-color: white transparent transparent #920035;
position: absolute;
top: -7px;
left: 61px;
}

ssi-uploader.js

/*
* error:an teleiwsei to upload kai iparxei ena sti lista pou den exei patithei
* */

(function (root, factory) {
    //@author http://ifandelse.com/its-not-hard-making-your-library-support-amd-and-commonjs/
    if (typeof module === "object" && module.exports) {
        module.exports = factory(require("jquery"));
    } else {
        factory(root.jQuery);
    }
}(this, function ($) {
    var Ssi_upload = function (element, options) {
        this.options = options;
        this.$element = '';
        this.language = locale[this.options.locale];
        this.uploadList = [];
        this.totalProgress = [];
        this.toUpload = [];
        this.imgNames = [];
        this.totalFilesLength = 0;
        this.successfulUpload = 0;
        this.aborted = 0;
        this.abortedWithError = 0;
        this.pending = 0;
        this.inProgress = 0;
        this.currentListLength = 0;
        this.init(element);
    };
    Ssi_upload.prototype.init = function (element) {
        $(element).addClass('ssi-uploadInput')
         .after(this.$element = $('<div class="ssi-uploader">'));
        var $chooseBtn = $('' +
         '<span class="ssi-InputLabel">' +
         '<button class="ssi-button success">' + this.language.chooseFiles + '</button>' +
         '</span>').append(element);
        var $uploadBtn = $('<button id="ssi-uploadBtn" class="ssi-button success ssi-hidden" >' +
         '<span class="ssi-btnIn">' + this.language.upload + ' </span>' +
         '<div id="ssi-up_loading" class="ssi-btnIn"></div></button>');
        var $clearBtn = $('<button id="ssi-clearBtn" class="ssi-hidden ssi-button info" >' + this.language.clear +
         '</button>');
        var $abortBtn = $('<button id="ssi-abortBtn" class="ssi-button error ssi-cancelAll ssi-hidden" ><span class="inBtn">' + this.language.abort + ' </span></button>');

        this.$element.append($('<div class="ssi-buttonWrapper">').append($chooseBtn, $abortBtn, $uploadBtn, $clearBtn));
        var $uploadBox;
        if (!this.options.preview) {
            this.$element.addClass('ssi-uploaderNP');
            var $fileList = $('<table id="ssi-fileList" class="ssi-fileList"></table>');
            var $namePreview = $('<span class="ssi-namePreview"></span>');
            var $mainBox = $('<div id="ssi-uploadFiles" class="ssi-tooltip ssi-uploadFiles ' + (this.options.dropZone ? 'ssi-dropZone' : '') + '"><div id="ssi-uploadProgressNoPreview" class="ssi-uploadProgressNoPreview"></div></div>')
             .append($namePreview);
            var $uploadDetails = $('<div class="ssi-uploadDetails"></div>').append($fileList);
            $uploadBox = $('<div class="ssi-uploadBoxWrapper ssi-uploadBox"></div>').append($mainBox, $uploadDetails);
            this.$element.prepend($uploadBox);
        } else {
            $uploadBox = $('<div id="ssi-previewBox" class="ssi-uploadBox ssi-previewBox ' + (this.options.dropZone ? 'ssi-dropZonePreview ssi-dropZone"><div id="ssi-DropZoneBack">' + this.language.drag + '</div>' : '"