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

效果图

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