基于spring 的ssi-uploader的多图片上传

来源：互联网发布：mac 断点续传工具编辑：程序博客网时间：2024/05/21 18:42

今天帮一个朋友做了一个多图片上传的demo，前端插件用的是ssi-uploader，后台是spring，详细看代码：

package com.controller;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.text.SimpleDateFormat;import java.util.Date;import java.util.Map;import javax.servlet.ServletContext;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;import org.springframework.web.multipart.commons.CommonsMultipartFile;

@Controller@RequestMapping("upload")public class FileUploadUtil {@Autowiredprivate FileUploadUtilService service;@RequestMapping("testFileUpload")@ResponseBodypublic String testFileUpload(HttpServletRequest request,HttpServletResponse response,Map<String, Object> model){           MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;           Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象           String upaloadUrl ="D:/upload/photo/";//得到当前工程路径拼接上文件名           File dir = new File(upaloadUrl);           if(!dir.exists())//目录不存在则创建               dir.mkdirs();           for(MultipartFile file :files.values()){             String  fileName=file.getOriginalFilename();//相片的名字              File tagetFile = new File(upaloadUrl+fileName);//创建文件对象               if(!tagetFile.exists()){//文件名不存在 则新建文件，并将文件复制到新建文件中                   try {                       tagetFile.createNewFile();                   } catch (IOException e) {                       e.printStackTrace();                   }                   try {                       file.transferTo(tagetFile);//到这里就可以上传了，以下是处理图片及允许gif的上传                     //图片扩展名                       String types=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();                     //以1024*768大小改变图片,如果是gif则放开限制，如果需要存储原图则不需要处理                       if(!types.contains("gif")){//                       Thumbnails.of(tagetFile).size(1024,768).toFile(tagetFile);                       }                   } catch (IllegalStateException e) {                       e.printStackTrace();                   } catch (IOException e) {                       e.printStackTrace();                   }               }           }           return "根据需要返回的页面";}}

前端页面：

<%@ 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="3"/>                        </div>                    </div>            <script type="text/javascript">               //下一行的url即为你后台所走的action路径                $('#ssi-upload3').ssi_uploader({url:'<%=request.getContextPath() %>/upload/testFileUpload.action',dropZone:false,allowed:['jpg','gif','txt','png','pdf']});            </script>            </div>         <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.1.min.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>

最后别忘了要注解spring的MultipartResolver

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    <property name="maxUploadSize">          <value>104857600</value>      </property>      <property name="maxInMemorySize">          <value>4096</value>      </property>      <property name="defaultEncoding">          <value>UTF-8</value>      </property>  </bean>

附上文件下载链接：点击打开链接

3 0