下面給大家分享下基于ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條。在jsp部分，需要設(shè)計(jì)一個(gè)表單，form的屬性添加 enctype="multipart/form-data"，設(shè)計(jì)一個(gè)iframe，作為隱藏。form的target等于iframe的name;

在servlet部分：文件上傳用的Commons-FileupLoad，需要兩個(gè)Jar，commons-fileupload和commons-io,少了第二個(gè)會(huì)報(bào)出找不到類的異常；

第一個(gè)servlet處理上傳，及把上傳進(jìn)度保存到session,第二個(gè)servlet處理ajax請(qǐng)求,回傳session保存的進(jìn)度值；

進(jìn)度條：可以用ajax拿到回傳的進(jìn)度值，改變圖片的width實(shí)現(xiàn)變化；

jsp代碼：

<%@ 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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/progress.css">
<script type="text/javascript" src="js/ul.js" charset="gbk"></script>
</head>
<body>
<form action="UploadServlet" name="f1" id="f1" method="post" enctype="multipart/form-data" target="if">
 <input type="file" name="file1" /><br><br>
 <input type="reset" name="res1" value="重置"/>
 <input type="button" name="but1" value="提交" onclick="go();"/>
</form><br>
<div id="pro" class="pro" align="left">
 <img alt="" src="photo/progress.png" width="0" height="15" id="imgpro">
</div>
  <span id="prop" style="width:15px;height:15px;display: none;">0%</span>
<iframe id="if" name="if" src="" style="display: none"></iframe>
</body>
</html>

這是index.jsp里的代碼：

提交后還在當(dāng)前頁(yè)顯示進(jìn)度，所以要用到iframe，提交后的返回放到隱藏的iframe里，不影響頁(yè)面效果；

css代碼：

復(fù)制代碼代碼如下:

.pro{

  height:15px;

  width:500px;

  background: #FFFFF0;

  border: 1px solid #8FBC8F;

  margin: 0;

  padding: 0;

  display:none;

  position: relative;

  left:25px;

  float:left;

}

js代碼

function go(){
 f1.submit();
 document.getElementById("pro").style.display="block";
 document.getElementById("prop").style.display="";
 timer=setInterval("getP()",50);
 
}

var xmlHttpRequest;
function getP(){
 
 if(window.XmlHttpRequest){
  xmlHttpRequest=new XmlHttpRequest();
 }else{
  xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
 } 
 
 xmlHttpRequest.onreadystatechange=callBack; 
 url="getProgressServlet";
 xmlHttpRequest.open("post",url,true);
 
 xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlHttpRequest.send("&timeStamp="+(new Date()).getTime()); 
 
}
//回調(diào)函數(shù)
function callBack(){
 
 if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){ 
  
  result=xmlHttpRequest.responseText;
  var result=result.replace(/(^\s*)|(\s*$)/g, "");
  var res=result.split(",");
  var flag=res[1]; 
  var per=parseInt(res[0]);
  var err=res[2];
  document.getElementById("imgpro").style.width=per*5+"px";
  document.getElementById("prop").innerHTML=per+"%";
  if(flag=="OK"){
   window.clearInterval(timer);
   alert("上傳成功！");
   document.getElementById("pro").style.display="none";
   document.getElementById("prop").innerHTML="";
   f1.reset();
  }
  if(err!=""||err.length>0){
   window.clearInterval(timer);
   alert(err);
  }
  if(flag==null){
   window.clearInterval(timer);
  }
 }
}

flag為上傳成功標(biāo)記，err為出錯(cuò)標(biāo)記；

servlet代碼（UploadServlet）：

package com.ul.servlet;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
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.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


public class UploadServlet extends HttpServlet {
 
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doPost(request, response); 
 }

 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  //設(shè)置編碼格式為utf-8
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8"); 
  //獲取session，保存進(jìn)度和上傳結(jié)果，上傳結(jié)果初始值為NOK，當(dāng)為Ok表示上傳完成
  HttpSession session=request.getSession();
  session.setAttribute("prog", "0");
  session.setAttribute("result", "NOK"); 
  session.setAttribute("error", "");
  String error="";
  //給上傳的文件設(shè)一個(gè)最大值，這里是不得超過(guò)50MB
  int maxSize=50*1024*1024;
  //創(chuàng)建工廠對(duì)象和文件上傳對(duì)象
  DiskFileItemFactory factory=new DiskFileItemFactory();
  ServletFileUpload upload=new ServletFileUpload(factory);
  try {
   //解析上傳請(qǐng)求
   List items=upload.parseRequest(request);
   Iterator itr=items.iterator();
   
   while(itr.hasNext()){
    FileItem item=(FileItem)itr.next();
    //判斷是否為文件域
    if(!item.isFormField()){
     if(item.getName()!=null&&!item.getName().equals("")){
      //獲取上傳文件大小和文件名稱
      long upFileSize=item.getSize();   
      String fileName=item.getName();
      if(upFileSize>maxSize){
       error="您上傳的文件太大了，請(qǐng)選擇不超過(guò)50MB的文件!";
       break;
      }
      //此時(shí)文件暫存在服務(wù)器的內(nèi)存中，構(gòu)造臨時(shí)對(duì)象
      File tempFile=new File(fileName);
      //指定文件上傳服務(wù)器的目錄及文件名稱
      File file=new File("f:\\temp",tempFile.getName());
      //構(gòu)造輸入流讀文件
      InputStream is=item.getInputStream();
      int length=0;
      byte[] by=new byte[1024];
      double persent=0;
      FileOutputStream fos=new FileOutputStream(file);
      PrintWriter out=response.getWriter();
      while((length=is.read(by))!=-1){
       //計(jì)算文件進(jìn)度
       persent+=length/(double)upFileSize*100D;
       fos.write(by, 0, length);
       session.setAttribute("prog", Math.round(persent)+""); 
       Thread.sleep(10);
      }
      fos.close();
      Thread.sleep(1000);
     }else{
      error="沒(méi)選擇上傳文件！";
     }
    }
   }
   
   
  } catch (Exception e) {
   e.printStackTrace();
   error="上傳文件出現(xiàn)錯(cuò)誤:"+e.getMessage();
  }
  if(!error.equals("")){ 
   session.setAttribute("error", error);
  }else{
   session.setAttribute("result", "OK");
  }
 }
}

不要忘記commons-io包

servlet代碼（getProgressServlet）：

package com.ul.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;

public class getProgressServlet extends HttpServlet {
 
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doPost(request, response);
 }


 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  HttpSession sesson=request.getSession(); 
  PrintWriter out=response.getWriter(); 
  String str=(String)sesson.getAttribute("prog")+"";
  String res=(String)sesson.getAttribute("result");
  String err=(String)sesson.getAttribute("error");
  System.out.println(str+","+res+","+err);
  out.print(str+","+res+","+err);

  out.flush();
  out.close();
 }

}

效果圖如下：