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

今天帮一个朋友做了一个多图片上传的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 {

	@Autowired
	private FileUploadUtilService service;


	@RequestMapping("testFileUpload")
	@ResponseBody
	public 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>

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

扫描二维码关注公众号，回复： 4333404 查看本文章

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

猜你喜欢