springMVC实现前台带进度条文件上传的示例代码

蒯坚白

2023-03-14

本文向大家介绍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 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

springMVC实现前台带进度条文件上传的示例代码

相关阅读

相关文章

相关问答

相关工具

相关文档