SpringMvc MultipartFile 圖片文件上傳

時間 2019-12-09

標籤 springmvc multipartfile 圖片文件上傳欄目 Spring 简体版

原文原文鏈接

spring-servlet.xmljavascript

1 <!-- SpringMVC上傳文件時，須要配置MultipartResolver處理器 -->
2 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
3 <property name="defaultEncoding" value="UTF-8" />
4 <!-- 指定所上傳文件的總大小,單位字節。注意maxUploadSize屬性的限制不是針對單個文件，而是全部文件的容量之和 -->
5 <property name="maxUploadSize" value="10240000" />
6 </bean>

upload/index.jspcss

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML>
 3 <html>
 4 	<head>
 5 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6 		<title>單圖片上傳</title>
 7 	</head>
 8 	<body>
 9 		<fieldset>
10 			<legend>圖片上傳</legend>
11 			<h2>只能上傳單張10M如下的 PNG、JPG、GIF 格式的圖片</h2>
12 			<form action="/shop/auth/photoUpload" method="post" enctype="multipart/form-data">
13 				選擇文件:<input type="file" name="file">
14 				<input type="submit" value="上傳">
15 			</form>
16 		</fieldset>
17 	</body>
18 </html>

或者使用ExtJshtml

js/user/photoUpload.jsjava

 1 Ext.onReady(function(){
 2 Ext.create('Ext.form.Panel', {
 3 title: '圖片上傳',
 4 width: 600,
 5 bodyPadding: 10,
 6 frame: true,
 7  renderTo: Ext.getBody(),
 8  items: [{
 9 xtype: 'filefield',
10 name: 'file',
11 fieldLabel: 'Photo',
12 labelWidth: 50,
13 msgTarget: 'side',
14 fileUpload: true ,
15 allowBlank: false,
16 blankText:"Select an image",
17 emptyText: 'You can only upload a single PNG 10M or less, JPG, GIF format images',
18 anchor: '100%',
19 buttonText: '選擇圖片'
20  }],
21
22  buttons: [{
23 text: '上傳',
24 handler: function() {
25 var form = this.up('form').getForm();
26 if(form.isValid()){
27  form.submit({
28 url: '/shop/auth/photoUpload',
29 waitMsg: '正在上傳圖片...',
30 success: function(fp, o) {
31 Ext.Msg.alert('提示', o.result.msg);
32  }
33  });
34  }
35  }
36  }]
37  });
38 });

pages/user/photoUpload.htmlweb

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>圖片上傳</title>
 6 </head>
 7 <link href="../../ext-4.2.1.883/resources/css/ext-all.css" rel="stylesheet"
 8  type="text/css" />
 9 <script type="text/javascript" src="../../ext-4.2.1.883/ext-all.js"></script>
10 <script src="../../js/user/photoUpload.js" type="text/javascript"></script>
11 <body>
12
13 </body>
14 </html>

AuthController.javaspring

 1 　　/**
 2  * 圖片文件上傳
 3 */
 4  @ResponseBody
 5 @RequestMapping(value = "/photoUpload",method = RequestMethod.POST)
 6 public ResultData<Object> photoUpload(MultipartFile file,HttpServletRequest request,HttpServletResponse response,HttpSession session) throws IllegalStateException, IOException{
 7 ResultData<Object> resultData=new ResultData<>();
 8 // 判斷用戶是否登陸
 9 /*User user=(User) session.getAttribute("user");
10  if (user==null) {
11  resultData.setCode(40029);
12  resultData.setMsg("用戶未登陸");
13  return resultData;
14  }*/
15 if (file!=null) {// 判斷上傳的文件是否爲空
16 String path=null;// 文件路徑
17 String type=null;// 文件類型
18 String fileName=file.getOriginalFilename();// 文件原名稱
19 System.out.println("上傳的文件原名稱:"+fileName);
20 // 判斷文件類型
21 type=fileName.indexOf(".")!=-1?fileName.substring(fileName.lastIndexOf(".")+1, fileName.length()):null;
22 if (type!=null) {// 判斷文件類型是否爲空
23 if ("GIF".equals(type.toUpperCase())||"PNG".equals(type.toUpperCase())||"JPG".equals(type.toUpperCase())) {
24 // 項目在容器中實際發佈運行的根路徑
25 String realPath=request.getSession().getServletContext().getRealPath("/");
26 // 自定義的文件名稱
27 String trueFileName=String.valueOf(System.currentTimeMillis())+fileName;
28 // 設置存放圖片文件的路徑
29 path=realPath+/*System.getProperty("file.separator")+*/trueFileName;
30 System.out.println("存放圖片文件的路徑:"+path);
31 // 轉存文件到指定的路徑
32 file.transferTo(new File(path));
33 System.out.println("文件成功上傳到指定目錄下");
34 }else {
35 System.out.println("不是咱們想要的文件類型,請按要求從新上傳");
36 return null;
37  }
38 }else {
39 System.out.println("文件類型爲空");
40 return null;
41  }
42 }else {
43 System.out.println("沒有找到相對應的文件");
44 return null;
45  }
46 return resultData;
47 }