使用org.apache.commons.fileupload，在SpringMVC框架中实现带进度条上传多个文件（Java实现）

最近使用org.apache.commons.fileupload，在SpringMVC框架下做了一个带进度条上传文件功能，做个备忘，顺便分享给大家。

上次前的效果为：

上次后的效果：

项目目录结构为：

前端代码为：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<title>文件上传</title>
<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link href="static/css/bootstrap.min.css" rel="stylesheet" />
<link href="static/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="static/css/font-awesome.min.css" rel="stylesheet" />

<script src="static/js/jquery-1.9.1.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/ace-elements.min.js"></script>
<script src="static/js/ace.min.js"></script>
<script src="static/js/bootstrap-datepicker.min.js" type="text/javascript" ></script>
<script src="static/js/bootbox.min.js" type="text/javascript" ></script>
<script src="static/js/jquery.tips.js" type="text/javascript" ></script>

<script type="text/javascript">
function errInfo(fieldId,fieldInfo){
   $(fieldId).tips({side:3,msg:fieldInfo,bg:'#AE81FF',time:2});
   $(fieldId).focus();
}
</script>
</head>
<script type="text/javascript">
var count=100;
var original=new Array;//原始数组
//给原始数组original赋值
for (var i=0;i<count;i++){
original[i]=i;
}

function add(){
   var file1 = $("#file1").val();
   if(file1 == null || file1 == ""){
       $("#file1").tips({side:3,msg:'软件必须上传！',bg:'#AE81FF',time:2});
       $("#file1").focus();
       return false;
   }
   var file2 = $("#file2").val();
   if(file2 == null || file2 == ""){
       $("#file2").tips({side:3,msg:'首页必须上传！',bg:'#AE81FF',time:2});
       $("#file2").focus();
       return false;
   }
if(window.confirm('您确认要提交上述数据信息吗？')){
        document.getElementById("form").action="<%=basePath%>upload/save.do";
       document.getElementById("form").submit();
   var eventFun = function(){
$.ajax({
type: 'GET',
url: '<%=basePath%>upload/process.do',
data: {},
dataType: 'json',
success : function(data){
$('#proBar').css('width',data.rate+''+'%');
$('#proBar').empty();
$('#proBar').append(data.show);
if(data.rate == 100){
window.clearInterval(intId);
cancel();
}
}});};
var intId = window.setInterval(eventFun,500);
   }
}

function fileType(obj,objIndex){
   var uploadfile = $(obj).val();
   var filename=$(obj).attr("name");
   if("filetmp"==filename){
       $(obj).attr("name","file"+new Date().getTime());
   }

   if(uploadfile!=""){
       var imgSize=$(obj).context.files[0].size/1024;//得到图片的大小（单位kb）
       var types = [ "rar", "zip", "iso"];
       var fileTypsInfo=parentClass+"素材只支持rar,zip,iso格式！";
       var fileMaxSize=100;//单元M
       if(objIndex==1){
           types = ["exe", "rar", "zip", "iso"];
           fileTypsInfo=parentClass+"素材只支持 exe,rar,zip,iso格式！";
       }else if(objIndex==2){
           types = ["jpg", "png", "bmp"];
           fileTypsInfo=parentClass+"预览图只支持jpg,png,bmp格式！";
       }
       var ext = uploadfile.substring(uploadfile.length-3).toLowerCase();
       var sing = false;
       for(var i=0; i<types.length;i++){
           if (ext==types[i]){
               sing = true;
           }
       }
       if(!sing){
           $(obj).val("");
           alert(fileTypsInfo);
           return false;
       }
       if(imgSize>1024*fileMaxSize){
           $(obj).val("");
           alert("只允许上传小于"+fileMaxSize+"M的图片!");
           return false;
       }if(imgSize<5){
       $(obj).val("");
           alert("只允许上传大于5K的文件!");
           return false;
       }
   }
   return true;
}

function selectfile1(){
   document.getElementById("file1").click();
}

</script>
<body>
<div class="container-fluid" id="main-container">
<div id="page-content" class="clearfix">
<div class="row-fluid">
   <div class="row-fluid">
   <div>
       <form action="<%=basePath%>upload/save.do" method="post" id="form" enctype="multipart/form-data" target="uploadf">
           <table align="center" style="width: 100%;">
               <tr align="left">
                   <td align="right"><font color="red">*</font>上传软件：</td>
                   <td align="left">
                   <input name="file1" id="file1" type="file" onchange="fileType(this,1)"/>
                   </td>
               </tr>
               <tr align="left">
                   <td align="right"><font color="red">*</font>上传首页图片：</td>
                   <td align="left">
                   <input name="file2" id="file2" type="file" onchange="fileType(this,2)"/>
                   </td>
               </tr>

               <tr align="left" id="addrow" style="display:none;">
                   <td align="right"></td>
                   <td align="left">
                   <input name="filetmp" id="file1" type="file" onchange="fileType(this,1)"/>
                   <input name="filetmp" id="file2" type="file" onchange="fileType(this,2)"/>

                   </td>
               </tr>
               <tr align="left">
                   <td align="right">上传进度：</td>
                   <td align="left">
                       <div class="progress progress-success progress-striped" style="width:100%">
<div id = 'proBar' class="bar" style="width: 0%"></div>
</div>
                   </td>
               </tr>
               <tr align="left">
                   <td align="left"></td>
                   <td align="left">
                   <input type="button" value="确认" onclick="javacript:add();" style="width: 80px;height: 30px;border-top-width: -10px;" class='btn btn-lg btn-danger' />
                   </td>
               </tr>
               </table>
               <iframe name="uploadf" style="display:none"></iframe>
       </form>
       </div>
   </div>
   </div>

   </div>
   </div>
</body>
</html>

后端代码为：

   @RequestMapping(value = "/save", method = { RequestMethod.GET,
           RequestMethod.POST })
   public ModelAndView save(HttpServletRequest request) throws IllegalStateException, IOException {

           boolean isMultipart = ServletFileUpload.isMultipartContent(request);
   if(!isMultipart){
       return toshow(request);
   }
   // Create a factory for disk-based file items
   FileItemFactory factory = new DiskFileItemFactory();
   final HttpSession hs = request.getSession();
   // Create a new file upload handler
   ServletFileUpload upload = new ServletFileUpload(factory);
   upload.setHeaderEncoding("utf-8");
   upload.setProgressListener(new ProgressListener(){
   public void update(long pBytesRead, long pContentLength, int pItems) {
   ProcessInfo pri = new ProcessInfo();
   pri.itemNum = pItems;
   pri.readSize = pBytesRead;
   pri.totalSize = pContentLength;
   pri.show = pBytesRead+"/"+pContentLength+" byte";
   pri.rate = Math.round(new Float(pBytesRead) / new Float(pContentLength)*100);
   hs.setAttribute("proInfo", pri);
   }
   });
   try {
           List items = upload.parseRequest(request);
       Iterator iter = items.iterator();
           String curpath = request.getSession().getServletContext().getRealPath("static/data/3DModel");
           int fileNum = 1;
               // 文件目录
               String filepath = "/" + DateUtil.getFilePath() + "/";
               File firstFolder = new File(curpath + filepath); // 一级文件夹
               if (!firstFolder.exists()) { // 如果一级文件夹存在，则检测二级文件夹
                   firstFolder.mkdir();
               }
       while (iter.hasNext()) {
               FileItem fileItem = (FileItem) iter.next();
       if (fileItem.isFormField()) {
       String name = fileItem.getFieldName();
       String value = fileItem.getString("UTF-8");
       if ("keywords".equals(name)) {
           //
                       }
       } else {
                   if (fileItem != null) {
                       // 取得当前上传文件的文件名称
                       String myFileName = fileItem.getName();
                       System.out.println(myFileName);
                       // 如果名称不为“”,说明该文件存在，否则说明该文件不存在
                       if (myFileName!=null&&myFileName.trim() != "") {
                           //System.out.println(myFileName);
                           String fileType = myFileName.substring(myFileName
                                   .indexOf(".") + 1);
                           String saveFileName=DateUtil.getFileName()+fileNum + "."
                                   + fileType;
                           if (fileNum % 2 == 1) {// 前面的附件
                               System.out.println("文件1大小："+BigDecimal.valueOf(fileItem.getSize()));
                               System.out.println("文件1名称："+saveFileName);
                           } else {
                               System.out.println("文件2大小："+BigDecimal.valueOf(fileItem.getSize()));
                               System.out.println("文件2名称："+saveFileName);
                           }
                           // 定义上传路径
                           String path = curpath + filepath + myFileName;
                           File localFile = new File(path);
                           try {
                               fileItem.write(localFile);
                           } catch (Exception e1) {
                               // TODO Auto-generated catch block
                               e1.printStackTrace();
                           }

                           ++fileNum;
                       }
                   }
   }
       }
           } catch (FileUploadException e1) {
               // TODO Auto-generated catch block
               e1.printStackTrace();
           }
           return this.toshow(request);
   }

文件上传，下载整个项目源码。

使用org.apache.commons.fileupload，在SpringMVC框架中实现带进度条上传多个文件（Java实现）

猜你喜欢