文件上传进度条-----servlet+js

最新推荐文章于 2025-08-14 09:11:10 发布

原创最新推荐文章于 2025-08-14 09:11:10 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript #ViewUI

分享了如何自己实现文件上传进度条的功能，包括代码实现和遇到的同事反应，强调了亲手实现技术的价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

闲的没事，突然想起读书的时候文件上传进度条没有实现，现在想想，那时候真是太聪明了。如今，就刚刚，蛋疼得我做了一个，正如我所想到的一样，同事们确实是一阵嘲笑，还有一个小伙子居然说：‘这种东西网上很多成熟的东西了，我们不应该拘泥于这种小技术、、、’；我晕倒了，哎，学校里没实现的东西，虽然现在看来信手拈来，但是，自己做的东西总比网上荡好，我们很多同事就是这样，网上荡。。。对此，我只能说无语。。。。

其实上传进度条很简单，最简单的就是我下面的了，当然复杂的也有，不过我没用过。我以前也是用flash的，

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传进度条实例</title>
<link style="text/css" rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="script/upload.js"></script>
</head>
<body>

	<fieldset>
		<legend>文件上传实例</legend>
		<form id="form" action="file.upload" method="post" enctype="multipart/form-data" target="frm">
			请选择上传的文件：<input type="file" name="uploadFile" />
		</form>
		<button id="btn">上传</button>
	</fieldset>

	<fieldset>
		<legend>进度显示</legend>
		<div id="process"><div id="data"></div></div>
	</fieldset>
	<iframe id="frm" name="frm" style="display:none;"></iframe>
</body>
</html>


package servlet;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
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.DefaultFileItemFactory;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


@SuppressWarnings("deprecation")
public class UpLoad extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@SuppressWarnings("rawtypes")
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		DefaultFileItemFactory factory = new DefaultFileItemFactory();
		HttpSession session = request.getSession();
		ServletFileUpload upload = new ServletFileUpload(factory);
		try{
			List tempList = upload.parseRequest(request);
			Iterator it = tempList.iterator();
			while(it.hasNext()){
				FileItem item = (FileItem)it.next();
				if(item.isFormField()){
					/**处理常规文本域**/
				}else{
					if(item.getName()!=null&&!item.getName().equals("")){
						Long size = item.getSize();
						System.out.println(size);
						File tempFile = new File("F:/"+item.getName());
						byte[] b = new byte[100];

						InputStream in = item.getInputStream();
						OutputStream out =new FileOutputStream(tempFile);
						int len = 0;
						int current = 0;
						session.setAttribute("total", size);
						while((len=in.read(b))>0){
							current += len;

							Thread.sleep(10);//故意延迟，以便看出效果
							session.setAttribute("current", current);
							out.write(b,0,len);
						}
					}
				}
			}
		}catch(Exception e){
			e.printStackTrace();
		}
	}

}


var total = 0;//文件总大小
var current = 0;//当前大小
var present= 0;//百分比
var timer = null;//定时触发事件
(function($){
	$(function(){
		$('#btn').click(function(){
		    timer = window.setInterval('getData()', 500);
		    $('#btn').attr('disabled','disabled');
			$('#form').submit();
		});
	});
})(jQuery);
var getData = function(){
	$.ajax({
		url:'file.data',
		success:function(msg){
			msg = eval('(' + msg + ')');
			total = msg.total;
			current = msg.current;
			if(present==100){
				$('#btn').attr('disabled','');
				window.clearInterval(timer);
			}
			present= (current/total)*100;
			$('#data').attr('innerHTML',present.toFixed(2)+'%');
		}
	});
};