用SpringMVC框架實現圖片上傳與下載
阿新 • • 發佈:2019-02-01
1、新建一個Maven webapp專案,引入需要用的夾包,pom.xml檔案的依賴包如下:
2、配置檔案設定如下:<dependencies> <!-- 用於生成圖片的縮圖 --> <dependency> <groupId>net.coobird</groupId> <artifactId>thumbnailator</artifactId> <version>0.4.8</version> </dependency> <!-- 單元測試包 --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!-- springmvc夾包 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.3.11.RELEASE</version> </dependency> <!-- spring核心包,用於依賴注入 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>4.3.11.RELEASE</version> </dependency> <!-- servlet夾包 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <!-- javaee包,在jsp檔案中使用--> <dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifactId> <version>7.0</version> </dependency> <!-- 檔案上傳的夾包 ,用於檔案上傳--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <!-- jstl標籤包,在jsp中使用 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> </dependencies>
(1) web.xml內容為:
(2)springmvc.xml檔案內容為:<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation=" http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <!-- 配置springmvc的前端控制器,可以配置多個前端控制器來攔截不同的url --> <servlet> <servlet-name>spring</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>spring</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
3、後端開發<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation=" http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd"> <!-- 配置jsp的檢視解析器,可以配置多個viewresolver--> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!-- 會用到EL表示式以及jstl的標籤,必須包含這個類 --> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"></property> <property name="prefix" value="/" /> <property name="suffix" value=".jsp" /> </bean> <!-- 1、自動註冊defaultAnnotationHandlermapping ,AnnotationMethodhandlerAdapter,可以根據URL對映到方法--> <!-- 2、資料繫結,數字和日期的format,如@NumberFormat ,@DateFormat,還有xml和json的預設讀寫功能 --> <mvc:annotation-driven /> <!-- 1.加入對靜態資源的處理 --> <!-- 2.允許使用“/”做整體對映 --> <mvc:default-servlet-handler/> <!-- 自動掃描相關的包 --> <context:component-scan base-package="thumbnail"/> <!-- 對檔案上傳的處理,這裡宣告的id必須為multipartResolver--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" > <!-- 最大為100M,單位為位元組 --> <property name="maxUploadSize" value="104857600"></property> <property name="defaultEncoding" value="utf-8"></property> <property name="maxInMemorySize" value="40960"></property> </bean> </beans>
(1) 控制器類:
@Controller
@RequestMapping("/")
public class ImageController {
//使用Autowired時,該業務類需要宣告為@service,此時xml中不用其它的配置
@Autowired
private Upload upload;
@Autowired
private Thumbnail thumbnail;
//檔案上傳並生成縮圖
@RequestMapping(value="/thumb",method=RequestMethod.POST)
public String GenerateImage(@RequestParam("image")CommonsMultipartFile file,HttpServletRequest request) throws IOException
{
//根據相對路徑獲取絕對路徑,圖片上傳後位於元資料中
String realUploadPath=request.getServletContext().getRealPath("/")+"images";
//獲取上傳後原圖的相對地址
String imageUrl=upload.uploadImage(file, realUploadPath);
//獲取生成的縮圖的相對地址
String thumbImageUrl=thumbnail.generateThumbnail(file, realUploadPath);
return "redirect:/images";
}
//顯示所有圖片
@RequestMapping(value="/images",method=RequestMethod.GET)
public ModelAndView showImages(HttpServletRequest request,HttpServletResponse response)
{
//根據相對路徑獲取絕對路徑,圖片上傳後位於元資料中
List<String> rawImagesList=new ArrayList<String>();
String realUploadPath=request.getServletContext().getRealPath("/")+"images";
rawImagesList=ImageList.printFile(realUploadPath+"/rawImages");
ModelAndView mv=new ModelAndView();
mv.addObject("imageList", rawImagesList);
mv.setViewName("images");
return mv;
}
//檔案下載
@RequestMapping("/download")
public void download(HttpServletRequest request,HttpServletResponse response) throws IOException
{
String path=request.getServletContext().getRealPath("/")+"/images/rawImages/";
String fileName=request.getParameter("filename");
File file=new File(path+fileName);
if(file.exists()){
//設定MIME型別
response.setContentType("application/octet-stream");
//或者為response.setContentType("application/x-msdownload");
//設定頭資訊,設定檔案下載時的預設檔名,同時解決中文名亂碼問題
response.addHeader("Content-disposition", "attachment;filename="+new String(fileName.getBytes(), "ISO-8859-1"));
InputStream inputStream=new FileInputStream(file);
ServletOutputStream outputStream=response.getOutputStream();
byte[] bs=new byte[1024];
while((inputStream.read(bs)>0)){
outputStream.write(bs);
}
outputStream.close();
inputStream.close();
}
}
}
(2)業務類:
@Service
public class Upload {
/*
* 上傳圖片並返回圖片的相對地址
*/
public String uploadImage(CommonsMultipartFile file,String realUploadPath) throws IOException
{
//如果目錄不存在則建立目錄
File uploadFile=new File(realUploadPath+"/rawImages");
if(!uploadFile.exists()){
uploadFile.mkdirs();
}
//建立輸入流
InputStream inputStream=file.getInputStream();
//生成輸出地址URL
String outputPath=realUploadPath+"/rawImages/"+file.getOriginalFilename();
//建立輸出流
OutputStream outputStream=new FileOutputStream(outputPath);
//設定緩衝區
byte[] buffer=new byte[1024];
//輸入流讀入緩衝區,輸出流從緩衝區寫出
while((inputStream.read(buffer))>0)
{
outputStream.write(buffer);
}
outputStream.close();
//返回原圖上傳後的相對地址
return "images/rawImages/"+file.getOriginalFilename();
}
}
@Service
public class Thumbnail {
//設定縮圖的寬度和高度
public static final int witdth=100;
public static final int heigth=100;
/*
* 生成縮圖並且返回相對地址
*/
public String generateThumbnail(CommonsMultipartFile file,String realUploadPath) throws IOException
{
//如果目錄不存在則建立目錄
File uploadFile=new File(realUploadPath+"/thumbImages");
if(!uploadFile.exists()){
uploadFile.mkdirs();
}
//縮圖儲存的絕對地址
String des=realUploadPath+"/thumbImages/"+file.getOriginalFilename();
//生成縮圖
Thumbnails.of(file.getInputStream()).size(witdth, heigth).toFile(des);
//返回縮圖的相對地址
return "images/thumbImages/"+file.getOriginalFilename();
}
}
public class ImageList {
//獲取資料夾下所有檔名
public static List<String> printFile(String path) {
File file = new File(path);
List<String> images = new ArrayList<String>();
// 是資料夾的話
if (file.isDirectory()) {
String[] filelist = file.list();
for (int i = 0; i < filelist.length; i++) {
File readfile = new File(path + "/" + filelist[i]);
if (!readfile.isDirectory()) {
images.add(readfile.getName());
}
}
}
return images;
}
}
4、前端開發
images.jsp的內容為:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上傳圖片</title>
</head>
<body>
<script type="text/javascript">
function validate()
{
var a=document.getElementById("file");
var form=document.getElementById("upload");
if(a.value==""){
alert("請先選擇圖片");
return false;
}
else{
form.submit();
}
}
</script>
<h1 align="center">圖片上傳與下載</h1>
<p>
<c:forEach var="image" items="${imageList}">
<a href="images/rawImages/${image}" target="_blank"><img src="images/thumbImages/${image}" /></a>
<a href="${pageContext.request.contextPath}/download?filename=${image}">${image}</a>
</c:forEach>
</p>
<form id="upload" action="${pageContext.request.contextPath}/thumb" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" id="image" >
<input type="button" value="上傳" onclick="validate()">
</form>
</body>
</html>
5、檔案結構
6、在Tomcat上執行的最終成果:
URL:http://localhost:8080/thumbnail/images