spring MVC + bootstrap实现文件上传示例（带进度条）

最近学习了bootstrap，有结合了spring MVC写了个文件上传的示例，留做笔记，废话不多说，直接上代码

监听器类FileUploadProgressListener.Java

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; 
 
 
@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); 
  } 
  @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

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

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

<!-- 文件上传 --> 
  <bean id="multipartResolver" class="com.gpl.web.listener.CustomMultipartResolver"> 
    <property name="defaultEncoding" value="utf-8"></property> 
    <property name="maxUploadSize" value="838860800"></property> 
  </bean> 

controller层实现

/** 
   * 文件上传 
   * @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(); 
    } 
     
  } 

前端代码

<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代码

$("#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代码

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); 
      } 
    }; 

效果图

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

# springmvc  # 上传进度条  # spring  # mvc  # bootstrap  # springmvc实现上传  # bootstrap fileinput组件整合Springmvc上传图片到本地磁盘  # Spring Boot搭建文件上传服务的方法  # SpringBoot整合BootStrap实战  # SpringBoot+BootStrap多文件上传到本地实例  # 上传  # 文件上传  # 上传文件  # 请先  # 写了  # 不支持  # 请选择  # 多说  # 表单  # 配置文件  # 大家多多  # 实体类  # flag  # gt  # fileItems  # false  # getSize  # setProgressListener  # lt  # SizeLimitExceededException 

相关文章： TestNG的testng.xml配置文件怎么写  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  早安海报制作网站推荐大全,企业早安海报怎么每天更换？  网站制作知乎推荐,想做自己的网站用什么工具比较好？  如何快速使用云服务器搭建个人网站？  英语简历制作免费网站推荐,如何将简历翻译成英文？  C++中引用和指针有什么区别？（代码说明）  ppt制作免费网站有哪些,ppt模板免费下载网站？  如何通过服务器快速搭建网站？完整步骤解析  如何在IIS中新建站点并解决端口绑定冲突？  c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  高防服务器租用如何选择配置与防御等级？  建站之星如何防范黑客攻击与数据泄露？  非常酷的网站设计制作软件,酷培ai教育官方网站？  小建面朝正北，A点实际方位是否存在偏差？  如何构建满足综合性能需求的优质建站方案？  如何在服务器上三步完成建站并提升流量？  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  家具网站制作软件,家具厂怎么跑业务？  专业公司网站制作公司,用什么语言做企业网站比较好？  如何登录建站主机？访问步骤全解析  攀枝花网站建设,攀枝花营业执照网上怎么年审？  公众号网站制作网页,微信公众号怎么制作？  制作旅游网站html,怎样注册旅游网站？  网站制作公司排行榜,四大门户网站排名？  建站主机数据库如何配置才能提升网站性能？  如何选择可靠的免备案建站服务器？  PHP正则匹配日期和时间(时间戳转换)的实例代码  单页制作网站有哪些,朋友给我发了一个单页网站，我应该怎么修改才能把他变成自己的呢，请求高手指点迷津？  建站之星体验版：智能建站系统+响应式设计，多端适配快速建站  如何在阿里云高效完成企业建站全流程？  如何获取上海专业网站定制建站电话？  宝塔建站教程：一键部署配置流程与SEO优化实战指南  如何快速搭建高效可靠的建站解决方案？  建站之星各版本价格是多少？  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？  如何选择长沙网站建站模板？H5响应式与品牌定制哪个更优？  南京做网站制作公司,南京哈发网络有限公司，公司怎么样，做网页美工DIV+CSS待遇怎么样？  c# Task.ConfigureAwait(true) 在什么场景下是必须的  建站主机服务器选型指南与性能优化方案解析  如何通过FTP服务器快速搭建网站？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  建站主机SSH密钥生成步骤及常见问题解答？  高防服务器租用首荐平台，企业级优惠套餐快速部署  昆明高端网站制作公司,昆明公租房申请网上登录入口？  建站之星如何实现网站加密操作？  建站之星CMS五站合一模板配置与SEO优化指南  怎么用手机制作网站链接,dw怎么把手机适应页面变成网页？  制作网站哪家好,cc、.co、.cm哪个域名更适合做网站？  高端建站如何打造兼具美学与转化的品牌官网？