这里有新鲜出炉的精品教程,程序狗速度看过来!
Spring是什么呢?首先它是一个开源的项目,而且目前非常活跃;它是一个基于IOC和AOP的构架多层j2ee系统的框架,但它不强迫你必须在每一层 中必须使用Spring,因为它模块化的很好,允许你根据自己的需要选择使用它的某一个模块;它实现了很优雅的MVC,对不同的数据访问技术提供了统一的接口,采用IOC使得可以很容易的实现bean的装配,提供了简洁的AOP并据此实现Transcation Managment,等等
本篇文章主要介绍了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 style="width: 80%;height: 80%;margin: 0px auto;">
- <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"
- style="width: 100%;height: 20px; "> </progress>
- <span id="percentage" style="color:blue;"></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>
来源: http://www.phperz.com/article/17/1203/358838.html