ServletFileUpload上传文件带进度条

最新推荐文章于 2021-03-19 16:02:08 发布

原创

最新推荐文章于 2021-03-19 16:02:08 发布 · 4.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#servletupload #web #javaweb

ServletFileUpload上传文件带进度条

涉及了两个架包:commons-io-2.0.1.jar,commons-fileupload-1.2.2.jar,还有一个jquery-2.2.4-min.js（下载链接：http://jquery.com/download/）

1. 文件上传页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  </head>
  <script type="text/javascript"  src="${pageContext.request.contextPath}/js/jquery-2.2.4.min.js"></script>
  <script type="text/javascript">
       var progress;
       var uploadProcessTimer = null;
       
        function formSubmit(){  
           uploadProcessTimer =window.setInterval("getFileUploadProcess()",100);//每隔100毫秒执行callback
           document.forms[0].submit();
        }  
         function getFileUploadProcess() {  
              $.ajax({
	                 type:"GET",
	                 url:"servlet/fileUploadStatusServlet",
	                 dataType:"text",
	                 cache:false,
	                 success:function(data){
	                        
	                         
	                     if(data=="100%"){
	                         window.clearInterval(uploadProcessTimer);
	                     }else{
    				          progress=data;
	                         $("#show").width(data);
	                         $("#msg").text(data);
	                     }
	                 }
             });
          };
      
  </script>
  <body>
    <form action="${pageContext.request.contextPath}/servlet/fileUploadServlet" method="post" enctype="multipart/fo