最近學習了bootstrap，有結合了spring MVC寫了個文件上傳的示例，留做筆記，廢話不多說，直接上代碼
監聽器類FileUploadProgressListener.Java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
package com.gpl.web.listener; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.ProgressListener; import org.springframework.stereotype.Component; import com.gpl.web.utils.Progress; @Componentpublic class FileUploadProgressListener implements ProgressListener{ private HttpSession session; public void setSession(HttpSession session){ this.session = session; Progress status = new Progress(); session.setAttribute("status", status); } @Override public void update(long bytesRead, long contentLength, int items) { Progress status = (Progress) session.getAttribute("status"); status.setBytesRead(bytesRead); status.setContentLength(contentLength); status.setItems(items); } } |
CustomerMyltipartResolver.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
package com.gpl.web.listener; import java.util.List; import javax.servlet.http.HttpServletRequest; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileUpload; import org.apache.commons.fileupload.FileUploadBase; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.multipart.MaxUploadSizeExceededException; import org.springframework.web.multipart.MultipartException; import org.springframework.web.multipart.commons.CommonsMultipartResolver; public class CustomMultipartResolver extends CommonsMultipartResolver{ @Autowired private FileUploadProgressListener progressListener; public void setFileUploadProgressListener(FileUploadProgressListener progressListener){ this.progressListener = progressListener; } public MultipartParsingResult parsingResult(HttpServletRequest request){ String encoding = determineEncoding(request); FileUpload fileUpload = prepareFileUpload(encoding); progressListener.setSession(request.getSession()); fileUpload.setProgressListener(progressListener); try{ List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request); return parseFileItems(fileItems, encoding); }catch(FileUploadBase.SizeLimitExceededException ex){ throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex); }catch (FileUploadException e) { throw new MultipartException("異常",e); } } } |
進度實體類Progress.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
package com.gpl.web.utils; public class Progress { private long bytesRead; private long contentLength; private long items; public long getBytesRead() { return bytesRead; } public void setBytesRead(long bytesRead) { this.bytesRead = bytesRead; } public long getContentLength() { return contentLength; } public void setContentLength(long contentLength) { this.contentLength = contentLength; } public long getItems() { return items; } public void setItems(long items) { this.items = items; } @Override public String toString() { return "Progress [bytesRead=" + bytesRead + ", contentLength=" + contentLength + ", items=" + items + "]"; } } |
spring配置文件需加入如下bean
|
1
2
3
4
5
|
<!-- 文件上傳 --> <bean id="multipartResolver" class="com.gpl.web.listener.CustomMultipartResolver"> <property name="defaultEncoding" value="utf-8"></property> <property name="maxUploadSize" value="838860800"></property> </bean> |
controller層實現
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
/** * 文件上傳 * @param request * @param response * @param file * @throws IOException */ @RequestMapping(value = "/upload", method = RequestMethod.POST) public void upload(HttpServletRequest request,HttpServletResponse response,@RequestParam("file") CommonsMultipartFile file) { try{ PrintWriter out; boolean flag = false; if(file.getSize() > 0){ String path = "/asserts/upload/files/excel/"; String uploadPath = request.getSession().getServletContext().getRealPath(path); System.out.println(uploadPath); FileUtils.copyInputStreamToFile(file.getInputStream(), new File(uploadPath,file.getOriginalFilename())); flag = true; } out = response.getWriter(); if(flag == true){ out.print("1"); }else{ out.print("2"); } }catch(Exception e){ e.printStackTrace(); } } |
前端代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div id="uploadFileDlg" class="easyui-dialog" style="width:800px;text-align:center;" closed="true"> <form id="uploadFileForm" method="post" style="width:100%;text-align:center;padding:20px 0;"> <input id="file" type="file" style="width:500px;display:inline-block;"> <button id="uploadBtn" class="easyui-linkButton" style="width:auto;display:inline-block;">上傳</button> </form> <div class="progress progress-bar-striped active" style="display:none;"> <div id="progressBar" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;"> </div> </div> <table id="uploadBatchDg"></table> </div> |
頁面ready加入的js代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
$("#uploadBtn").attr("disabled",false); $("#uploadBtn").click(function(){ var fileValue = $("#file").val(); if(fileValue == null || fileValue == ""){ layer.msg("請先選擇文件"); return; } var obj = $("#file"); var photoExt=obj.val().substr(obj.val().lastIndexOf(".")).toLowerCase();//獲得文件后綴名 if(photoExt!=".xls" && photoExt!=".xlsx"){ layer.msg("請選擇xls或是xlsx格式的文件，不支持其他格式文件"); return false; } var fileSize = 0; var isIE = /msie/i.test(navigator.userAgent) && !window.opera; if (isIE && !obj.files) { var filePath = obj.val(); var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); var file = fileSystem.GetFile (filePath); fileSize = file.Size; }else { fileSize = obj.get(0).files[0].size; } fileSize=Math.round(fileSize/1024*100)/100; //單位為KB if(fileSize > 5000){ layer.msg("文件不能大于5M"); return false; } $("#progressBar").width("0%"); $(this).attr("disabled",true); $("#progressBar").parent().show(); $("#progressBar").parent().addClass("active"); uploadFile(); |
上傳文件js代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
function uploadFile() { var fileObj = $("#file").get(0).files[0]; // js 獲取文件對象 console.info("上傳的文件："+fileObj); var FileController = "${basePath}/batch/upload"; // 接收上傳文件的后臺地址 // FormData 對象 var form = new FormData(); // form.append("author", "hooyes"); // 可以增加表單數據 form.append("file", fileObj); // 文件對象 // XMLHttpRequest 對象 var xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); xhr.onload = function() { layer.msg("上傳完成"); $("#uploadBtn").attr('disabled', false); $("#uploadBtn").val("上傳"); $("#progressBar").parent().removeClass("active"); $("#progressBar").parent().hide(); }; xhr.upload.addEventListener("progress", progressFunction, false); xhr.send(form); } function progressFunction(evt) { var progressBar = $("#progressBar"); if (evt.lengthComputable) { var completePercent = Math.round(evt.loaded / evt.total * 100)+ "%"; progressBar.width(completePercent); $("#uploadBtn").val("正在上傳 " + completePercent); } }; |
效果圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：http://blog.csdn.net/wyccyw123456/article/details/52396449
