springMVC利用bootstrap实现一个文件上传功能

发布时间:2020-11-11 15:45:53 作者:Leah
来源:亿速云 阅读:294

springMVC利用bootstrap实现一个文件上传功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

监听器类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"  
      closed="true"> 
      <form id="uploadFileForm" method="post" > 
        <input id="file" type="file" > 
        <button id="uploadBtn" class="easyui-linkButton" >上传</button>  
      </form> 
      <div class="progress progress-bar-striped active" > 
        <div id="progressBar" class="progress-bar progress-bar-info" role="progressbar" 
        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" 
        > 
        </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利用bootstrap实现一个文件上传功能

关于springMVC利用bootstrap实现一个文件上传功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

推荐阅读:
  1. SpringMVC如何实现文件上传
  2. 利用SpringMVC和Ajax实现文件上传功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

springmvc bootstrap 文件上传

上一篇:Spring MVC中如何实现输入或输出json格式的文件

下一篇:java项目中如何利用高并发将信息写入数据库

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》