java ssm framework for file upload
Implementation: single file upload, multi file upload (single choice and multi choice), and use ajax to asynchronously refresh, display the uploaded file in the current interface
First, the configuration file of springmvc needs to configure the upload file parser:
1 <!-- Profile resolver --> 2 <bean id="multipartResolver" 3 class="org.springframework.web.multipart.commons.CommonsMultipartResolver" 4 p:defaultEncoding="utf-8"> 5 <property name="uploadTempDir" value="/temp"></property> 6 <property name="maxUploadSize"> 7 <value>209715200</value><!-- 200MB --> 8 </property> 9 <property name="maxInMemorySize"> 10 <value>4096</value><!-- 4KB Size reading and writing --> 11 </property> 12 </bean>
Secondly, in pom.xml, we need to configure the dependency of two upload files
1 <!--Upload file related jar package --> 2 <dependency> 3 <groupId>commons-io</groupId> 4 <artifactId>commons-io</artifactId> 5 <version>2.4</version> 6 </dependency> 7 8 <dependency> 9 <groupId>commons-fileupload</groupId> 10 <artifactId>commons-fileupload</artifactId> 11 <version>1.3.1</version> 12 </dependency> 13 14 <dependency> 15 <groupId>org.apache.commons</groupId> 16 <artifactId>commons-lang3</artifactId> 17 <version>3.3.2</version> 18 </dependency>
Single file upload:
1 /** 2 * Single file upload 3 * @param file 4 * @param request 5 * @return 6 * @throws IllegalStateException 7 * @throws IOException 8 * @throws JSONException 9 */ 10 public static String simUpload(MultipartFile file, HttpServletRequest request) 11 throws IllegalStateException, IOException, JSONException{ 12 13 if(!file.isEmpty()){ 14 String path = request.getSession().getServletContext().getRealPath("/upload"); 15 //Definition file 16 File parent = new File(path); 17 if(!parent.exists()) parent.mkdirs(); 18 19 HashMap<String, Object> map = new HashMap<String,Object>(); 20 21 String oldName = file.getOriginalFilename(); 22 23 long size = file.getSize(); 24 25 //Use TmFileUtil The file upload tool obtains various information of the file 26 //Optimize file size 27 String sizeString = TmFileUtil.countFileSize(size); 28 //Get file suffix 29 String ext = TmFileUtil.getExtNoPoint(oldName); 30 //Random rename, 10 bit time string 31 String newFileName = TmFileUtil.generateFileName(oldName, 10, "yyyyMMddHHmmss"); 32 33 String url = "upload/"+newFileName; 34 35 //File transfer, parent file 36 file.transferTo(new File(parent, newFileName)); 37 38 map.put("oldname",oldName);//Original name of document 39 map.put("ext",ext); 40 map.put("size",sizeString); 41 map.put("name",newFileName);//File new name 42 map.put("url",url); 43 44 //with json Mode output to page 45 return JSONUtil.serialize(map); 46 }else{ 47 return null; 48 } 49 }
Multi file upload (integrating two types of single file and multi file)
1 /** 2 * Multi file upload 3 * @param files 4 * @param request 5 * @return 6 * @throws IllegalStateException 7 * @throws IOException 8 * @throws JSONException 9 */ 10 public static List<HashMap<String, Object>> mutlUpload(MultipartFile[] files, HttpServletRequest request) 11 throws IllegalStateException, IOException, JSONException{ 12 13 if(files.length > 0){ 14 String path = request.getSession().getServletContext().getRealPath("/upload"); 15 //Definition file 16 File parent = new File(path); 17 if(!parent.exists()) parent.mkdirs(); 18 19 //Create this collection to hold all file information 20 List<HashMap<String, Object>> listMap = new ArrayList<HashMap<String, Object>>(); 21 22 //Loop multiple uploads of multiple files 23 for (MultipartFile file : files) { 24 25 //Establish map Object to save information for each file 26 HashMap<String, Object> map = new HashMap<String,Object>(); 27 28 String oldName = file.getOriginalFilename(); 29 30 long size = file.getSize(); 31 32 //Use TmFileUtil The file upload tool obtains various information of the file 33 //Optimize file size 34 String sizeString = TmFileUtil.countFileSize(size); 35 //Get file suffix 36 String ext = TmFileUtil.getExtNoPoint(oldName); 37 //Random rename, 10 bit time string 38 String newFileName = TmFileUtil.generateFileName(oldName, 10, "yyyyMMddHHmmss"); 39 40 String url = "upload/"+newFileName; 41 42 //File transfer, parent file 43 file.transferTo(new File(parent, newFileName)); 44 45 map.put("oldname",oldName);//Original name of document 46 map.put("ext",ext); 47 map.put("size",sizeString); 48 map.put("name",newFileName);//File new name 49 map.put("url",url); 50 51 listMap.add(map); 52 } 53 54 //with json Mode output to page 55 return listMap; 56 }else{ 57 return null; 58 } 59 }
Front end code:
Multiple files, actually
<input type="file" class="fileupon33" name="fileupmulti" accept="image/jpeg,image/png" onchange="mutiFiles(this)" multiple/>
An extra multiple attribute has been added.
To display the uploaded file in the current interface without skipping, use ajax asynchronous request:
However, it should be noted that I use FormData() here to store file objects. ajax needs these parameters to upload files:
$.ajax({
type:"post",
data:form, / / FormData() object
url:basePath+"/upload/mutl",
contentType: false, / / must be false to automatically add the correct content type
processData: false, / / must be false to avoid jQuery's default processing of formdata. XMLHttpRequest will process formdata correctly
success:function(data){
}
});
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+path+"/"; 5 pageContext.setAttribute("basePath", basePath); 6 %> 7 <!DOCTYPE HTML> 8 <html> 9 <head> 10 <title>File upload</title> 11 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 12 <meta name="keywords" content="keyword1,keyword2,keyword3"> 13 <meta name="description" content="This is my page"> 14 <style> 15 *{padding: 0;margin:0} 16 ul,li{list-style:none;} 17 a{color:#333;text-decoration: none;} 18 .hidden{display:hidden;} 19 input{border:0;outline:0;margin-bottom:10px;} 20 img{vertical-align: middle;} 21 .clear{clear:both;} 22 body{font-size:14px;font-family: "Microsoft YaHei";background:#333} 23 .buttons{ display: block; 24 width: 80px; 25 height: 26px; 26 color: black; 27 background: #ffffff; 28 font-size: 14px; 29 font-family: "Microsoft YaHei"; 30 margin: 0 auto; 31 cursor: pointer; 32 margin-bottom: 10px;} 33 34 .container{width:1080px;margin:80px auto;} 35 36 .formbox{float:left;text-align:center;width:300px;} 37 .title{color:#fff;font-size:24px;margin-bottom:20px;} 38 .formbox .f_btn{width:100px;height:40px;background:#0c0;color:#fff;font-size:14px;font-family:"Microsoft YaHei";cursor:pointer;font-weight:bold;} 39 .massage p{color:#fff;text-align:left;height:24px;} 40 .sinimg{width:300px;height:300px;line-height:300px;color:#fff;} 41 42 .formmutibox{float:left;width: 342px;margin: 0 24px 0;text-align:center;} 43 .formmutibox .title{color:#fff;font-size:24px;margin-bottom:20px;} 44 .formmutibox .f_btn{width:100px;height:40px;background:#0c0;color:#fff;font-size:14px;font-family:"Microsoft YaHei";cursor:pointer;font-weight:bold;} 45 .files table td{color:#fff;width:135px;} 46 47 ::-webkit-scrollbar{width: 10px;height: 10px;} 48 ::-webkit-scrollbar-track{background: 0 0;} 49 ::-webkit-scrollbar-track-piece{background:#fff;} 50 ::-webkit-scrollbar-thumb{background-color: #a2a2a2; border-radius: 5px;} 51 ::-webkit-scrollbar-thumb:hover{background-color: #868686;} 52 ::-webkit-scrollbar-corner{background:#212121;} 53 ::-webkit-scrollbar-resizer{background:#FF0BEE;} 54 scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;} 55 scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;} 56 scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;} 57 /* Hide up and down arrows */ 58 scrollbarbutton{display:none !important;} 59 /* Vertical scroll bar width */ 60 scrollbar[orient="vertical"]{min-width:12px !important;} 61 </style> 62 </head> 63 <body> 64 <div class="container"> 65 <!--Single file upload--> 66 <div class="formbox"> 67 <p class="title">Single file upload</p> 68 <input type="file" id="fileupone" name="fileup" accept="image/jpeg,image/png" onchange="uploadFile(this)"/> 69 <div class="massage"> 70 <p>Filename:<span class="filename"></span></p> 71 <p>Size:<span class="filesize"></span></p> 72 <p>File format:<span class="fileext"></span></p> 73 <p>Preview:</p> 74 <div class="sinimg"> 75 Preview 76 </div> 77 </div> 78 </div> 79 80 <!--Multi file upload--> 81 <div class="formmutibox"> 82 <p class="title">Multi file upload (single choice)</p> 83 <input type="file" class="fileupon11" accept="image/jpeg,image/png" /> 84 <input type="file" class="fileupon12" accept="image/jpeg,image/png" /> 85 <input type="file" class="fileupon13" accept="image/jpeg,image/png" /> 86 <input type="button" class="buttons" value="Submission" onclick="multipartone()"/> 87 <!--files start--> 88 <div class="files"> 89 <table> 90 <thead> 91 <tr> 92 <td class="filelook2">File Preview</td> 93 <td class="filename2">file name</td> 94 <td class="filesize2">Size</td> 95 </tr> 96 </thead> 97 <tbody id="f_tbody"> 98 </tbody> 99 </table> 100 </div> 101 </div> 102 103 <!--Multi file upload--> 104 <div class="formmutibox"> 105 <p class="title">Multi file upload (multi choice)</p> 106 <input type="file" class="fileupon33" name="fileupmulti" accept="image/jpeg,image/png" onchange="mutiFiles(this)" multiple/> 107 <!--files start--> 108 <div class="files"> 109 <table> 110 <thead> 111 <tr> 112 <td class="filelook33">File Preview</td> 113 <td class="filename33">file name</td> 114 <td class="filesize33">Size</td> 115 </tr> 116 </thead> 117 <tbody id="f_tbody_m"> 118 </tbody> 119 </table> 120 </div> 121 </div> 122 <div class="clear"></div> 123 </div> 124 125 <script type="text/javascript" src="${basePath}/resource/js/jquery-1.11.3.min.js"></script> 126 <script type="text/javascript">var basePath = "${basePath}";</script> 127 <script type="text/javascript"> 128 129 //Single file upload 130 function uploadFile(obj){ 131 //Create a FormData Object: to simulate a series of form controls with some key value pairs form Of all form elements in name And value Assemble into one queryString 132 var form = new FormData(); 133 var fileObj = obj.files[0]; 134 form.append("doc",fileObj); 135 136 $.ajax({ 137 type:"post", 138 data:form, 139 url:basePath+"/upload/file", 140 contentType: false, //Must false Will automatically add the right Content-Type 141 /* 142 Must be false to avoid jQuery's default handling of formdata 143 XMLHttpRequest Correctly handle formdata 144 */ 145 processData: false, 146 success:function(data){ 147 var jdata = eval("("+data+")"); 148 $(".filename").text(jdata.oldname); 149 $(".filesize").text(jdata.size); 150 $(".fileext").text(jdata.ext); 151 var imgString = "<img alt='Preview' src='"+jdata.url+"' width='300'>"; 152 $(".sinimg").html(imgString); 153 //Clear file form 154 $("#fileupone").val(""); 155 } 156 }); 157 } 158 159 //Multi file upload(Single election) 160 function multipartone(){ 161 var file1 = $(".fileupon11").get(0).files[0]; 162 var file2 = $(".fileupon12").get(0).files[0]; 163 var file3 = $(".fileupon13").get(0).files[0]; 164 //If both are empty, exit directly 165 if(isEmpty(file1) && isEmpty(file2) && isEmpty(file3)) return; 166 167 var form = new FormData(); 168 //With the same name, inject into controller Parameter array of layer 169 form.append("doc",file1); 170 form.append("doc",file2); 171 form.append("doc",file3); 172 173 $.ajax({ 174 type:"post", 175 data:form, 176 url:basePath+"/upload/mutl", 177 contentType: false, //Must false Will automatically add the right Content-Type 178 /* 179 Must be false to avoid jQuery's default handling of formdata 180 XMLHttpRequest Correctly handle formdata 181 */ 182 processData: false, 183 success:function(data){ 184 var len = data.length; 185 for(var i = 0;i < len;i++){ 186 var datajson = data[i]; 187 $("#f_tbody").append("<tr class='f_item'>"+ 188 "<td><img src='"+datajson.url+"' alt='Preview Image' width='40' height='40' /></td>"+ 189 "<td>"+datajson.oldname+"</td>"+ 190 "<td>"+datajson.size+"</td>" 191 ); 192 } 193 //Clear file form 194 $(".fileupon11").val(""); 195 $(".fileupon12").val(""); 196 $(".fileupon13").val(""); 197 } 198 }); 199 } 200 201 //Multi file upload(Multiple selection) 202 function mutiFiles(obj){ 203 var form = new FormData(); 204 var fileObj = obj.files; 205 var length = fileObj.length; 206 //take fileObj Convert to array 207 //var filese = Array.from(fileObj); 208 for(var i = 0;i < length;i++){ 209 form.append("doc",fileObj[i]); 210 } 211 $.ajax({ 212 type:"post", 213 data:form, 214 url:basePath+"/upload/mutl", 215 contentType: false, //Must false Will automatically add the right Content-Type 216 /* 217 Must be false to avoid jQuery's default handling of formdata 218 XMLHttpRequest Correctly handle formdata 219 */ 220 processData: false, 221 success:function(data){ 222 var len = data.length; 223 for(var i = 0;i < len;i++){ 224 var datajson = data[i]; 225 $("#f_tbody_m").append("<tr class='f_item'>"+ 226 "<td><img src='"+datajson.url+"' alt='Preview Image' width='40' height='40' /></td>"+ 227 "<td>"+datajson.oldname+"</td>"+ 228 "<td>"+datajson.size+"</td>" 229 ); 230 } 231 //Clear file form 232 $(".fileupon33").val(""); 233 } 234 }); 235 } 236 237 /** 238 * Judgement is not empty 239 * 240 * @param val 241 * @returns {Boolean} 242 */ 243 function isEmpty(val) { 244 val = $.trim(val); 245 if (val == null) 246 return true; 247 if (val == undefined || val == 'undefined') 248 return true; 249 if (val == "") 250 return true; 251 if (val.length == 0) 252 return true; 253 if (!/[^(^\s*)|(\s*$)]/.test(val)) 254 return true; 255 return false; 256 } 257 </script> 258 </body> 259 </html>
controller layer call:
1 package com.krry.controller; 2 3 import java.io.IOException; 4 import java.util.HashMap; 5 import java.util.List; 6 7 import javax.servlet.http.HttpServletRequest; 8 9 import org.apache.struts2.json.JSONException; 10 import org.springframework.stereotype.Controller; 11 import org.springframework.web.bind.annotation.RequestMapping; 12 import org.springframework.web.bind.annotation.RequestParam; 13 import org.springframework.web.bind.annotation.ResponseBody; 14 import org.springframework.web.multipart.MultipartFile; 15 16 import com.krry.util.UploadUtil; 17 18 /** 19 * File upload class 20 * KrryUploadController 21 * @author krry 22 * @version 1.0.0 23 * 24 */ 25 @Controller 26 @RequestMapping("/upload") 27 public class KrryUploadController { 28 29 /** 30 * Single file upload 31 * @param file 32 * @param request 33 * @return 34 * @throws IllegalStateException 35 * @throws IOException 36 * @throws JSONException 37 */ 38 @ResponseBody 39 @RequestMapping(value = "/file") 40 public String krryupload(@RequestParam("doc") MultipartFile file, HttpServletRequest request) throws IllegalStateException, IOException, JSONException{ 41 42 //Call the tool class to complete the upload and return the relevant data to the page 43 return UploadUtil.simUpload(file, request); 44 } 45 46 /** 47 * Multi file upload 48 * @param file 49 * @param request 50 * @return 51 * @throws IllegalStateException 52 * @throws IOException 53 * @throws JSONException 54 */ 55 // There MultipartFile[] file Represents multiple files uploaded from the front-end page, file Multiple corresponding pages file Type input Labelling name，But the framework encapsulates only one file into one MultipartFile Object, 56 // Does not encapsulate multiple files into one MultipartFile[]Array, direct use of bulletin[Lorg.springframework.web.multipart.MultipartFile;.<init>()Mistake, 57 // So we need to use@RequestParam Calibration parameters (parameter name and MultipartFile The object names are the same), which can also be written as follows:@RequestParam("file") MultipartFile[] files. 58 @ResponseBody 59 @RequestMapping(value = "/mutl") 60 public List<HashMap<String, Object>> krryuploadMutl(@RequestParam("doc") MultipartFile[] file, HttpServletRequest request) throws IllegalStateException, IOException, JSONException{ 61 //Call the tool class to complete the upload and return the relevant data to the page 62 return UploadUtil.mutlUpload(file, request); 63 } 64 }
Here, complete the ajax asynchronous request file upload function.
Attach code to optimize file size:
1 /** 2 * Converts the number of bytes in a file to the size of the file 3 * com.krry.uitl 4 * Method name: format 5 * @author krry 6 * @param size 7 * @return String 8 * @exception 9 * @since 1.0.0 10 */ 11 public static String format(long size){ 12 float fsize = size; 13 String fileSizeString; 14 if (fsize < 1024) { 15 fileSizeString = String.format("%.2f", fsize) + "B"; //2f Two decimal places reserved 16 } else if (fsize < 1048576) { 17 fileSizeString = String.format("%.2f", fsize/1024) + "KB"; 18 } else if (fsize < 1073741824) { 19 fileSizeString = String.format("%.2f", fsize/1024/1024) + "MB"; 20 } else if (fsize < 1024 * 1024 * 1024) { 21 fileSizeString = String.format("%.2f", fsize/1024/1024/1024) + "GB"; 22 } else { 23 fileSizeString = "0B"; 24 } 25 return fileSizeString; 26 }