springMVC完成前台帶進度條文件上傳的示例代碼。本站提示廣大學習愛好者:(springMVC完成前台帶進度條文件上傳的示例代碼)文章只能為提供參考,不一定能成為您想要的結果。以下是springMVC完成前台帶進度條文件上傳的示例代碼正文
項目框架采用spring+hibernate+springMVC假如上傳文件不想運用flash那麼你可以采用HTML5;截圖前段模塊是bootstarp框架;不廢話直接來代碼;spring-mvc配置文件;效果截圖如下:
詳細完成如下:
1、mvc-config.xml
<?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/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd"> <!-- 注解掃描包 --> <context:component-scan base-package="com.yunfang.banks.controllers" /> <!-- 開啟注解 --> <mvc:annotation-driven /> <!-- 不阻攔靜態資源 --> <mvc:default-servlet-handler /> <mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/js/" /> <mvc:mapping path="/js/**" /> <bean class="com.yunfang.banks.intreceptor.MyInterceptor"></bean> </mvc:interceptor> </mvc:interceptors> <mvc:interceptors> <bean class="com.yunfang.banks.intreceptor.MyInterceptor"></bean> </mvc:interceptors> <!-- 靜態資源(js/image)的訪問 --> <mvc:resources location="/js/" mapping="/js/**" /> <!-- 定義視圖解析器 --> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/"></property> <property name="suffix" value=""></property> </bean> <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"> <property name="messageConverters"> <list> <!--下載的時分公用 --> <bean class="org.springframework.http.converter.ByteArrayHttpMessageConverter" /> <bean id="jsonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>text/plain;charset=UTF-8</value> </list> </property> </bean> </list> </property> </bean> <!-- 配置springMVC處置上傳文件的信息,自定義上傳,帶進度條 --> <bean id="multipartResolver" class="com.yunfang.banks.listener.CustomMultipartResolver"> <property name="defaultEncoding" value="utf-8" /> <property name="maxUploadSize" value="10000000000" /> </bean> <!-- <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="utf-8" /> <property name="maxUploadSize" value="10485760000" /> <property name="maxInMemorySize" value="40960" /> </bean> --> </beans>
2、實體工具類:Progress.Java
package com.yunfang.banks.listener; public class Progress { private long pBytesRead; private long pContentLength; private long pItems; public long getpBytesRead() { return pBytesRead; } public void setpBytesRead(long pBytesRead) { this.pBytesRead = pBytesRead; } public long getpContentLength() { return pContentLength; } public void setpContentLength(long pContentLength) { this.pContentLength = pContentLength; } public long getpItems() { return pItems; } public void setpItems(long pItems) { this.pItems = pItems; } @Override public String toString() { return "Progress [pBytesRead=" + pBytesRead + ", pContentLength=" + pContentLength + ", pItems=" + pItems + "]"; } }
3、文件上傳進度監聽類:FileUploadProgressListener.java
package com.yunfang.banks.listener; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.ProgressListener; import org.springframework.stereotype.Component; @Component public class FileUploadProgressListener implements ProgressListener { private HttpSession session; public void setSession(HttpSession session){ this.session=session; Progress status = new Progress();//保管上傳形態 session.setAttribute("status", status); } public void update(long pBytesRead, long pContentLength, int pItems) { Progress status = (Progress) session.getAttribute("status"); try { Thread.sleep(5); } catch (InterruptedException e) { e.printStackTrace(); } status.setpBytesRead(pBytesRead); status.setpContentLength(pContentLength); status.setpItems(pItems); //System.out.println(">>>>>>>>>>>>>>>>>>>>"+status); } }
4、自定義擴展org.springframework.web.multipart.commons.CommonsMultipartResolver類,重寫public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException辦法:
CustomMultipartResolver.java
package com.yunfang.banks.listener; import java.util.List; import javax.servlet.http.HttpServletRequest; import org.apache.commons.fileupload.servlet.ServletFileUpload; 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.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; } @Override @SuppressWarnings("unchecked") public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException { 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 ex) { throw new MultipartException("Could not parse multipart servlet request", ex); } } }
5、uploadController.java
@RequestMapping("UserControllers/progress") public void uploadFile(HttpServletRequest request,HttpServletResponse response, @RequestParam("file") CommonsMultipartFile file) throws IOException { response.setContentType("text/html"); response.setCharacterEncoding("GBK"); PrintWriter out; boolean flag = false; if (file.getSize() > 0) { //文件上傳的地位可以自定義 flag = FileUploadUtil.upLoadFile(file, request); } out = response.getWriter(); if (flag == true) { out.print("1"); } else { out.print("2"); } }
6、FileUploadUtil.java
import java.io.File; import javax.servlet.http.HttpServletRequest; import org.springframework.web.multipart.MultipartFile; public class FileUploadUtil { public static Boolean uploadFile(HttpServletRequest request, MultipartFile file) { System.out.println("開端"); String path = request.getSession().getServletContext().getRealPath("upload"); String fileName = file.getOriginalFilename(); System.out.println(path); File targetFile = new File(path, fileName); if (!targetFile.exists()) { targetFile.mkdirs(); } // 保管 try { file.transferTo(targetFile); return true; } catch (Exception e) { e.printStackTrace(); return false; } } }
7、前台頁面
<%@ page language="java" import="java.util.*" pageEncoding="Utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <link href="css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> .file-box { position: relative; width: 340px } .txt { height: 22px; border: 1px solid #cdcdcd; width: 180px; vertical-align: middle; margin: 0; padding: 0 } .btn { border: 1px solid #CDCDCD; height: 24px; width: 70px; vertical-align: middle; margin: 0; padding: 0 } .file { position: absolute; top: 0; right: 80px; height: 24px; filter: alpha(opacity : 0); opacity: 0; width: 260px; vertical-align: middle; margin: 0; padding: 0 } </style> <%--<script type="text/javascript"> function myInterval() { $("#progress").html(""); $.ajax({ type: "POST", url: "<%=basePath%>UserControllers/getSessions", data : "1=1", dataType : "text", success : function(msg) { var data = msg; console.log(data); $("#pdiv").css("width", data + "%"); $("#progress").html(data + "%"); } }); } function autTime() { setInterval("myInterval()", 200);//1000為1秒鐘 } </script> --%> <script type="text/javascript"> function UpladFile() { var fileObj = document.getElementById("file").files[0]; // js 獲取文件對象 var FileController = "UserControllers/progress"; // 接納上傳文件的後台地址 // 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() { alert("上傳完成!"); //$('#myModal').modal('hide'); }; //監聽progress事情 xhr.upload.addEventListener("progress", progressFunction, false); xhr.send(form); } function progressFunction(evt) { var progressBar = document.getElementById("progressBar"); var percentageDiv = document.getElementById("percentage"); if (evt.lengthComputable) { progressBar.max = evt.total; progressBar.value = evt.loaded; percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"; } } </script> </head> <body > <div class="row bootstrap-admin-no-edges-padding"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> <div class="text-muted bootstrap-admin-box-title">文件管理</div> </div> <div class="bootstrap-admin-panel-content"> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">上傳</button> <input type="text" id="test"> </div> </div> </div> </div> <!-- 模態框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">文件上傳進度</h4> </div> <div class="modal-body"> <progress id="progressBar" value="0" max="100" > </progress> <span id="percentage" ></span> <br> <br> <div class="file-box"> <input type='text' name='textfield' id='textfield' class='txt' /> <input type='button' class='btn' value='閱讀...' /> <input type="file" name="file" class="file" id="file" size="28" onchange="document.getElementById('textfield').value=this.value" /> <input type="submit" name="submit" class="btn" value="上傳" onclick="UpladFile()" /> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">封閉 </button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal --> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所協助,也希望大家多多支持。