本文主要是介绍基于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 {@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>
附上文件下载链接：点击打开链接
这篇关于基于spring 的ssi-uploader的多图片上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
