基于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>
附上文件下载链接：点击打开链接
类似资料：