Servlet上传文件并显示上传进度

效果图:

前台页面:

上传文件显示进度，需使用jquery form插件，对页面进行一些校验，比如文件非空、文件类型、文件大小、上传进度展示

文件大小检测:

	function IsFileSizeOk(fileid) /* 文件大小检测 */
	{
		try{
			var fileSize=0;
			if(navigator.userAgent.match(/msie/i)) /* IE下的检测方式 ,并不是特别顺利,会出现Automation 服务器不能创建对象的错误*/
				{
				var myFSO = new ActiveXObject("Scripting.FileSystemObject");
			    var filepath = $("#"+fileid).val();
			    var thefile = myFSO.getFile(filepath);
			    var filesize = thefile.size;
				}
			else{
				fileSize=$("#"+fileid)[0].files[0].size;
				fileSize=fileSize/1048576;
			}
			return (fileSize<50.0);
		}catch(e)
		{
			alert("出现异常情况,请换用其它高版本的浏览器尝试");
			return ;
		}
	}

上传进度展示: 

function submitreplyInfo()
	{
		$("#fileuptip").show();
		var bar = $('.bar');
		var percent = $('.percent');
		var status = $('#status');
		$("#postfile").attr("disabled",true);
		$("#postacform").ajaxSubmit({  /* jquery form提交表单 */
			type:'post',
			url:"<%=tempContextUrl%>"+"/UploadFile",
			dataType:"text",
			beforeSend:function(){
				status.empty();
		        var percentVal = '0%';
		        bar.width(percentVal)
		        percent.html(percentVal);
			},
			uploadProgress:function(event,position,total,percentComplete){ /* 上传进度展示 */
				 var percentVal = percentComplete + '%';
			        bar.width(percentVal); 
			        percent.html(percentVal);
			},
			success:function(data1){
				var data=eval("(" + data1+ ")"); /* 服务端返回的是text/plain类型将其转换为json格式 */
				var objc= JSON&&JSON.parse(JSON.stringify(data))||jQuery.parseJSON(data);/* 对json格式进行解析 */
				alert(objc.issuccess==='true');
				if(objc.issuccess==='false')
					{
					$(".errorinfo").text(objc.info);
					}
				else if(objc.issuccess==='true')
					{
					
					$(".errorinfo").css("color","#34E4EC");
					$(".errorinfo").text(objc.info);
					}
			},
			error:function()
			{
				
			}
			,
			complete:function(xhr){
				$("#fileuptip").hide();
			}
		})
		$("#postfile").attr("disabled",false);
	}

页面代码:

<label class="errorinfo"></label>
<div id="fileuptip">
<div class="fileprogress">
<label>上传进度:</label>

<div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>
</div>
</div>
<div id="main">
<form action="" id="postacform" method="post" enctype="multipart/form-data">
<div class="box">
	<div class="lablearea">
	<label class="lableinfo">选择上传文件:</label>
	</div>
		<input type="file" name="file" id="filepho" class="filephol">
		<br/>
	<label class="inputtip labelfileinfo">*文件为word文档 Excel表格 pdf文档 压缩包，必须小于50M</label>
</div>
<input type="submit" id="postfile" value="上传文件">
</form>
</div>

进度条css:

.fileprogress{
	margin-left:75px;
	
}
.fileprogress label{
	display:block;
	float:left;
	margin-top:3px;
}
.progress { position:relative; left:75px;width:400px; border: 1px solid #99CCCC;}
.bar { background-color: #FF9900; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }

服务端代码实现:

实现上传文件的校验保存以及返回信息

package upload;

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

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
@WebServlet("/UploadFile")
public class UploadFile extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
	 private boolean isMultipart;
	 private int maxFileSize = 50*1024* 1024; //允许上传文件的最大值
	 private int maxMemSize = 4* 1024;
	 private File filemenu;
	 private String filestyles[]={"docx","doc","xls","xlsx","pdf","rar","zip"}; //允许上传文件的大小
	 private boolean issuccess=false;
	 private boolean isfilestyle=false;
	 private String info="文件上传非法";
	 private JSONObject jsonObject=new JSONObject();
    public UploadFile() {
        super();
        // TODO Auto-generated constructor stub
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/plain");
	    isMultipart = ServletFileUpload.isMultipartContent(request);
	    if(isMultipart) //提交的request请求包含上传文件请求
	    {
	    	DiskFileItemFactory factory = new DiskFileItemFactory();
		    factory.setSizeThreshold(maxMemSize); //设置内存可存字节数
		    factory.setRepository(factory.getRepository()); //设置临时文件目录
		    ServletFileUpload upload = new ServletFileUpload(factory);
		    try{ 
		      List fileItems = upload.parseRequest(request);
		      Iterator i = fileItems.iterator();
		      while ( i.hasNext () ) 
		      {
		         FileItem fi = (FileItem)i.next();
		         if (!fi.isFormField () )	
		         {
		            String fileName = fi.getName(); //获取上传文件名称
		            String filestyle=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase().trim(); //获得上传文件类型
		            long size = fi.getSize(); //获取上传文件大小
		            for(String style:filestyles)
		            {
		            	if(style.equals(filestyle))
		            	{
		            		isfilestyle=true;
		            		break;
		            	}
		            }
		            System.out.println(isfilestyle);
		            if(isfilestyle)
		            {
		            	if(size>maxFileSize)
		            	{
		            		issuccess=false;
		            		info="上传文件过大!";
		            	}
		            	else{
		            		filemenu=new File(this.getServletContext().getRealPath("/")+File.separator+"upfile");
				            if(!filemenu.exists())
				            	filemenu.mkdir();
				            fi.write(new File(filemenu+File.separator+System.currentTimeMillis()+"."+filestyle));
				            System.out.println(filemenu+File.separator+System.currentTimeMillis()+"."+filestyle);
				            issuccess=true;
			            	info="上传文件成功!";
		            	}
		            }
		            else{
		            	issuccess=false;
		            	info="上传文件类型非法!";
		            }
		            
		         }
		      }

		   }catch(Exception ex) {
		       System.out.println(ex);
		   }
	    }
	    jsonObject.put("issuccess",issuccess+"");
	    jsonObject.put("info",info);
	    response.getWriter().write(jsonObject.toString());
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

源码下载