进度条

sxl_bruce

最后来个带上传进度的文件上传。这里需要AJAX的知识，不懂的朋友可以先去了解下。

先看页面的代码

Html代码
<h2>文件上传显示进度</h2>   
<iframe id='target_upload' name='target_upload' src='' style='display: none'></iframe>   
<form id="form3" method="POST" enctype="multipart/form-data" action="AJAXFileUploadServlet" target="target_upload">   
    <input type="file" name="myFile"/><br/>   
    <input type="button" value="提交" id="myButton"/><br/>   
</form>   
<div id="show"></div>  

<h2>文件上传显示进度</h2>
<iframe id='target_upload' name='target_upload' src='' style='display: none'></iframe>
<form id="form3" method="POST" enctype="multipart/form-data" action="AJAXFileUploadServlet" target="target_upload">
<input type="file" name="myFile"/><br/>
<input type="button" value="提交" id="myButton"/><br/>
</form>
<div id="show"></div>
细心的朋友发现多一个iframe和div，iframe的作用是，当我们要显示上传进度的时候，一定是要求页面不能刷新的，因此你会发现form的target属性等于iframe的name属性，也就是说，当form提交数据的时候，当前页面不会刷新，而是iframe刷新了，而iframe又是dispaly:none的，所以看起来页面好像是没有发生跳转。div的作用则是用于显示上传进度。
接下来关注服务器的代码部分，想想其实就可以发现，服务器需要两个Servlet，一个正在用于文件上传，而一个则是用来返回AJAX关于上传进度的数据返回。

这里要介绍fileupload中很好用的一个接口，ProgressListener，她可以用来监听文件的上传进度，使用方法很简单，即在文件上传的代码中加入

Java代码 FileItemFactory factory = new DiskFileItemFactory();   
ServletFileUpload upload = new ServletFileUpload(factory);   
upload.setHeaderEncoding("utf8");// 支持中文文件名  

MyProgressListener myProgressListener = new MyProgressListener(request);   
upload.setProgressListener(myProgressListener);//进行文件上传进度监听