JavaWEB+Ajax实现文件上传

准备：我们需要找一张绿色或者其它颜色的背景图，放在photo文件夹里就好哈，然后加jar：common-io和commo-fileupload就可以哈

创建progress.css文件：

.pro{

  height:15px;

  width:500px;

  background: #FFFFF0;

  border: 1px solid #8FBC8F;

  margin: 0;

  padding: 0;

  display:none;

  position: relative;

  left:25px;

  float:left;

}

创建uploadAjax.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()); 

}
//回调函数
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);
  }
 }
}

调用和引入

<link rel="stylesheet" type="text/css" href="css/progress.css">

<script type="text/javascript" src="js/uploadAjax.js" charset="UTF-8"></script>

<div class="am-g">
      <div class="am-u-sm-12" align="left">
    	<div class="am-form-group">
		<form action="<%=basePath %>UploadSpotImgServlet" name="f1" id="f1" method="post" enctype="multipart/form-data" target="if">
	 		<div class="field">
                <a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="30" type="file" name="logo" data-validate="required:请选择上传文件,regexp#.+.(jpg|jpeg|png|gif)$:只能上传jpg|gif|png格式文件" /></a>
             </div>
             <br>
             <input type="reset" name="res1" value="重置"  class="am-btn am-btn-primary" />
             <input type="submit" name="but1" value="提交" onclick="go();" class="am-btn am-btn-primary" />
		</form><br>
		<div id="pro" class="pro" align="left" style="height:1px;width:600px;">
 		<img alt="" src="photo/progress.png" width="0px" id="imgpro">
		</div>
  		<span id="prop" style="width:15px;height:15px;display: none;">0%</span>
  		<br><br>
		<iframe id="if" name="if" src="" style="display: none"></iframe>

	   </div>
     </div>
   </div>

创建UploadSpotImgServlet

public class UploadSpotImgServlet extends HttpServlet {

	/**
	 *
	 */
	private static final long serialVersionUID = 1L;

	private String fileName;

	private File tempFile;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置编码格式为utf-8
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out1 = response.getWriter();

		request.setCharacterEncoding("UTF-8");
		//获取session，保存进度和上传结果，上传结果初始值为NOK，当为Ok表示上传完成
		HttpSession session=request.getSession();
		session.setAttribute("prog", "0");
		session.setAttribute("result", "NOK");
		session.setAttribute("error", "");
		String error="";
		//给上传的文件设一个最大值，这里是不得超过50MB
		int maxSize=50*1024*1024;
		//创建工厂对象和文件上传对象
		DiskFileItemFactory factory=new DiskFileItemFactory();
		ServletFileUpload upload=new ServletFileUpload(factory);
		try {
			//解析上传请求
			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();
				      fileName=item.getName();
				      if(upFileSize>maxSize){
				       error="您上传的文件太大了，请选择不超过50MB的文件!";
				       break;
				      }
				      //此时文件暂存在服务器的内存中，构造临时对象
				      tempFile=new File(fileName);
				      //指定文件上传服务器的目录及文件名称
				      File file=new File("D:\\MyEclipse\\workspace\\TourismSystemServer\\WebRoot\\source\\images",tempFile.getName());
				      //构造输入流读文件
				      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){
				       //计算文件进度
				       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="没选择上传文件！";
			     	}
			    }
		   }

		  Constant.ImgPath.path = "/source/images/"+tempFile.getName();
		  //System.out.println(Constant.ImgPath.path);
		   response.sendRedirect(Constant.WEB_URL_ADDSPOTINFO);

		} catch (Exception e) {
			e.printStackTrace();
			error="上传文件出现错误:"+e.getMessage();
		}
		if(!error.equals("")){
			session.setAttribute("error", error);
		}else{
			session.setAttribute("result", "OK");
		}

		out1.flush();
		out1.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

ok,这样我们就可以上传文件到我们制定的文件夹里哦，还有结合Ajax，就不会出现页面刷新的情况了哦！