java ajax多文件上传并展示上传进度信息

最新推荐文章于 2021-08-05 23:38:32 发布

xiaosheng_papa

最新推荐文章于 2021-08-05 23:38:32 发布

阅读量1.7k

点赞数 1

分类专栏： javaWeb Ajax jQuery 文章标签： ajax

本文链接：https://blog.csdn.net/xiaosheng_papa/article/details/77528826

版权

javaWeb 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

Ajax

3 篇文章 0 订阅

订阅专栏

java使用ajax多文件上传，并带文本描述，且纯js展示上传进度信息。

实现原理：使用commons-fileupload架包自带的上传监听器，把监听信息存入session，然后页面通过ajax定时读取session信息，从而展现上传进度。

技术资源：commons-fileupload.jar、commons-io.jar、jquery-form.js

页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>多文件上传带进度条</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="css/easyui.css">
	<script src="js/jquery-1.11.min.js"></script>
	<script src="js/jquery.form.js"></script>
	<script src="js/jquery.easyui.min.js"></script>
	<style type="text/css">
		.line {width:500px;height:50px;text-align:center;}
		.left {display:inline;float:left;width:150px;text-align:right;}
		.right {display:inline;float:right;width:350px;text-align:left;}
		.bar {width:400px;height:30px;}
	</style>
  </head>
  <script type="text/javascript">
  	var timestamp = 0;
  	function upload(){
  		var file1 = $("#file1").val();
  		var file2 = $("#file2").val();
  		if(file1==""&&file2==""){
  			alert("请选择上传文件");
  			return;
  		}
  		clearBar();
  		$("#btn1").attr("disabled","disabled");
  		
  		timestamp = new Date().getTime();
  		$("#timestamp").val(timestamp);
  		uploadFlag = true;
  		uploadStatus();//监听上传进度信息
  		$("#form1").ajaxSubmit({
		    url:"<%=basePath%>/UploadFileServlet",
		    type:"POST",
		    success:function(res){
			  if(res=="true"){
				  uploadFlag = false;
				  $("#btn1").removeAttr("disabled");
				  $("#form1")[0].reset();
			  }else{
				  $("#btn1").removeAttr("disabled");
				  $("#progressMsg").empty();
				  $("#progressMsg").html("上传失败!!!"); 
			  }
			},
			error:function(msg){
				alert("出错了");
			}
 		}); 
  		
  	}
	function clearBar(){
		//$("#progressBar").progressbar("resize");//恢复进度条到原始宽度
		//$("#progressBar").progressbar("resize",400);//更改进度条到指定宽度
		$("#progressBar").progressbar("setValue", 0);
		$("#progressMsg").empty();
	}
	var preBytesRead = 0;//上一秒的已上传大小
  	function execuBar(bytesRead,contentLength,startTime){
  		if(bytesRead <= contentLength){
	  		var progressMsg = "上传文件总大小："+getByte(contentLength)+" ，已上传大小："+getByte(bytesRead);
			if(bytesRead!=contentLength){
				progressMsg+=" ，上传速度："+getByte(bytesRead-preBytesRead)+"/S";
			}else{
				progressMsg+=" ，上传完成！";
			}
	  		$("#progressMsg").empty();
			$("#progressMsg").html(progressMsg);

			var value = $("#progressBar").progressbar("getValue");
			if (value < 100){
				var bfb = (bytesRead-preBytesRead)/(contentLength/100);//下载百分比
				value += parseFloat(bfb.toFixed(5));
				var num = Math.ceil(parseFloat(value.toFixed(5))*10000)/10000;
				$("#progressBar").progressbar("setValue", num);
				
				preBytesRead = bytesRead;
				if(bytesRead!=contentLength){
					setTimeout("uploadStatus()", 1000);
				}
			}
  		}
	};
	function uploadStatus(){
		$.ajax({
			url:"<%=basePath%>/UploadStatusServlet",
			type: "post",
            data: {timestamp:timestamp},
            dataType: "json",
		    success:function(res){
		    	if(res&&res!=null&&res!=""){
		    		execuBar(res.bytesRead,res.contentLength,res.startTime);
		    	}else{
		    		setTimeout("uploadStatus()", 500);
		    	}
			},
			error:function(msg){
				alert("获取上传进度出错了");
			}
		});
	}
	function getByte(size){
		if(size<1024){
			return size +"B";
		}else if(size<1024*1024){
			var kb = size/(1024);
			return kb.toFixed(2) +"KB";
		}else if(size<1024*1024*1024){
			var mb = size/(1024*1024);
			return mb.toFixed(2) +"MB";
		}else if(size<1024*1024*1024*1024){
			var gb = size/(1024*1024*1024);
			return gb.toFixed(2) +"GB";
		}else{
			return "未知大小";
		}
	}
	var uploadFlag = false;
	//监听页面刷新或关闭事件
	window.onbeforeunload = function() {   
        if(uploadFlag){
        	return "文件正在上传,确定离开本页面吗？";	
        }
   }  
  </script>
  <body >
    <h2>java文件上传显示上传进度条</h2>
    <form id="form1" action="/UploadServlet" method="post" enctype="multipart/form-data">
    	<div class="line">
    		<div class="left">
    			上传时间戳：
    		</div>
    		<div class="right">
    			<input type="text" id="timestamp" name="timestamp" readonly="readonly" value=""/>
    		</div>
    	</div>
    	<div class="line">
    		<div class="left">
    			文件1：
    		</div>
    		<div class="right">
    			<input type="file" id="file1" name="file1" value=""/>
    		</div>
    	</div>
    	<div class="line">
    		<div class="left">
    			文件1说明：
    		</div>
    		<div class="right">
    			<input type="text" id="file1text" name="file1text" value=""/>
    		</div>
    	</div>
    	
    	<div class="line">
    		<div class="left">
    			文件2：
    		</div>
    		<div class="right">
    			<input type="file" id="file2" name="file2" value=""/>
    		</div>
    	</div>
    	<div class="line">
    		<div class="left">
    			文件2说明：
    		</div>
    		<div class="right">
    			<input type="text" id="file2text" name="file2text" value=""/>
    		</div>
    	</div>
    	
    	<div class="line">
    		<input type="button" id="btn1" value="上传文件" οnclick="upload()"/>
    	</div>
    </form>
    <div class="line">
   		<div id="progressBar" class="easyui-progressbar"></div>
   		<div id="progressMsg" style="font-size:12px;"></div>
   	</div>
  </body>
</html>

上传servlet:

package com.servlet;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUpload;
import org.apache.commons.fileupload.FileUploadBase;
import org.apache.commons.fileupload.FileUploadBase.FileSizeLimitExceededException;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.RequestContext;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.servlet.ServletRequestContext;

import com.util.UploadListener;
import com.util.UploadStatus;

public class UploadFileServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		  System.out.println("UploadFileServlet上传。。。。。");
		  
		  String flag = "true";
		  request.setCharacterEncoding("utf-8");  
		  
		  //String timestamp = request.getParameter("timestamp");//无法获取,本来想多个页面共享不同session
		  
	      RequestContext requestContext = new ServletRequestContext(request);  
		  //上传文件保存路径
		  String savePath = this.getServletContext().getRealPath("/upload");
		  //上传文件临时缓存路径
		  String tempPath = this.getServletContext().getRealPath("/temp");

		  HttpSession session = request.getSession();
	      PrintWriter out = response.getWriter();  
	      try{
		      if(FileUpload.isMultipartContent(requestContext)){  
		      
		            DiskFileItemFactory factory = new DiskFileItemFactory();  
		            factory.setRepository(new File(tempPath));//设置缓存路径  
		            factory.setSizeThreshold(1024*100);//设置缓冲区的大小为100KB，如果不指定，那么缓冲区的大小默认是10KB
		            
		            ServletFileUpload upload = new ServletFileUpload(factory);  
		            upload.setHeaderEncoding("utf-8");  
		            upload.setFileSizeMax(1024*1024*1000);//设置单个文件上传大小1000M
		            upload.setSizeMax(1024*1024*5000);//设置总上传文件大小5000M
		            
		            upload.setProgressListener(new UploadListener(new UploadStatus(),session));//设置上传进度监听
		            
		            List<FileItem> items = new ArrayList<FileItem>();  
		            try {  
		                items = upload.parseRequest(request);  
		            } catch (FileUploadException e1) { 
		            	flag = "false";
		                System.out.println("文件上传发生错误" + e1.getMessage());  
		            }  
		  
		            Iterator<FileItem> it = items.iterator();  
		            while(it.hasNext()){  
		                FileItem fileItem = it.next();  
		                if(fileItem.isFormField()){//文字框        
		                       System.out.println(fileItem.getFieldName()+"   "+fileItem.getName()+"   "+new String(fileItem.getString().getBytes("iso8859-1"), "gbk"));
		                }else{//文件 流
		                       System.out.println(fileItem.getFieldName() + "   " +   
		                               fileItem.getName() + "   " + fileItem.isInMemory() + "    " +   
		                               fileItem.getContentType() + "   " + fileItem.getSize());  
		        
		                       if(fileItem.getName()!=null && fileItem.getSize()!=0){  
		                               File fullFile = new File(fileItem.getName());  
		                               File newFile = new File(savePath+"/" + fullFile.getName());  
		                               try {  
		                                   fileItem.write(newFile);  
		                               } catch (Exception e) { 
		                            	   flag = "false";
		                                   e.printStackTrace();  
		                               }  
		                       }else{  
		                               System.out.println("文件没有选择 或 文件内容为空");  
		                       }  
		                }  
		        
		            }  
		       }else{
		    	   System.out.println("不是文件上传form");  
		       } 
	      
	      }catch(Exception e){
	    	  flag = "false";
	      }
	       out.write(flag);
	       out.close();
   }  
		
}

监听器：

package com.util;

import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.ProgressListener;

/**
 * 上传监听器
 * @author pure
 *
 */
public class UploadListener implements ProgressListener {

    private UploadStatus status;
    private HttpSession session;

    public UploadListener(UploadStatus status,HttpSession session){
        this.status = status;
        this.session = session;
    }

    public void update(long bytesRead, long contentLength, int items) {
        status.setBytesRead(bytesRead);
        status.setContentLength(contentLength);
        status.setItems(items);

        //session.setAttribute("uploadStatus"+timestamp, status);
        session.setAttribute("uploadStatus", status);
        if(bytesRead==contentLength){
        	System.out.println("上传完成,耗时"+(System.currentTimeMillis()-status.getStartTime())+"毫秒。");
        }
        //System.out.println("文件大小为："+contentLength+",已上传："+bytesRead+",items："+items+"，时间戳："+timestamp);
    }
}

上传进度servlet

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.google.gson.Gson;
import com.util.UploadStatus;

/**
 * 获取上传进度信息
 * @author pure
 *
 */
public class UploadStatusServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		String timestamp = request.getParameter("timestamp");
		System.out.println("UploadStatusServlet获取上传进度信息。。。"+timestamp);
		
		HttpSession session = request.getSession();
		
		//UploadStatus status = (UploadStatus)session.getAttribute("uploadStatus"+timestamp);
		UploadStatus status = (UploadStatus)session.getAttribute("uploadStatus");
		
		Gson gson = new Gson();
		
		String jsonStr = gson.toJson(status);
		System.out.println(jsonStr);
		
		if(status!=null && status.getBytesRead()==status.getContentLength()){//下载完成
			session.removeAttribute("uploadStatus");
		}
		PrintWriter out=response.getWriter();
		out.write(jsonStr);
		out.close();
		
	}
}

上传信息实体类：

package com.util;

public class UploadStatus {
	private long bytesRead;//已上传大小(b)
    private long contentLength;//总大小
    private int items;
    private long startTime = System.currentTimeMillis();//上传开始时间

    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 int getItems() {
        return items;
    }
    public void setItems(int items) {
        this.items = items;
    }

    public long getStartTime() {
        return startTime;
    }
    public void setStartTime(long startTime) {
        this.startTime = startTime;
    }
    
    
}

页面效果：