广告合作QQ：76874919

基于AJAX的文件上传显示进度条实现

Ajax 2020-05-31
基于Ajax的文件上传要实现的功能要求，要在用户提交了上传按钮请求后，客户端其页面要显示文件上传进度条。

其整个功能时序图如图所示。

简单的说，要实现在客户端显示进度条，需要做的是：当客户端提交上传文件请求后，服务器在上传文件的过程中，将上传进度情况保存到Session中，客户端周期性的发送请求来获取保存在Session中值，以获取上传文件的进度信息。

1.新建web工程AjaxUpload。

2.将commons-fileupload-1.2.1-bin.zip包中的commons-fileupload-1.2.1.jar文件和commons-io-1.4-bin.zip包中的commons-io-1.4.jar文件拷贝到web工程下的WEB-INF\lib目录下。

3.由于本实例涉及到多个类，处理此类问题最好是给相应的类打包进行管理。在web工程src目录下新建一个包com.ncu.upload。

4.服务器端实现。

首先要创建一个用来保存文件上传状态的类FileUploadStatus。其源码如下：

Java代码
  1. packagecom.ncu.upload;
  3. importjava.util.*;
  5. publicclassFileUploadStatus{
  6. //上传总量
  7. privatelonguploadTotalSize=0;
  8. //读取上传总量
  9. privatelongreadTotalSize=0;
  10. //当前上传文件号
  11. privateintcurrentUploadFileNum=0;
  12. //成功读取上传文件数
  13. privateintsuccessUploadFileCount=0;
  14. //状态
  15. privateStringstatus="";
  16. //处理起始时间
  17. privatelongprocessStartTime=0l;
  18. //处理终止时间
  19. privatelongprocessEndTime=0l;
  20. //处理执行时间
  21. privatelongprocessRunningTime=0l;
  22. //上传文件URL列表
  23. privateListuploadFileUrlList=newArrayList();
  24. //取消上传
  25. privatebooleancancel=false;
  26. //上传base目录
  27. privateStringbaseDir="";
  29. publicStringgetBaseDir(){
  30. returnbaseDir;
  31. }
  32. publicvoidsetBaseDir(StringbaseDir){
  33. this.baseDir=baseDir;
  34. }
  35. publicbooleangetCancel(){
  36. returncancel;
  37. }
  38. publicvoidsetCancel(booleancancel){
  39. this.cancel=cancel;
  40. }
  41. publicListgetUploadFileUrlList(){
  42. returnuploadFileUrlList;
  43. }
  44. publicvoidsetUploadFileUrlList(ListuploadFileUrlList){
  45. this.uploadFileUrlList=uploadFileUrlList;
  46. }
  47. publiclonggetProcessRunningTime(){
  48. returnprocessRunningTime;
  49. }
  50. publicvoidsetProcessRunningTime(longprocessRunningTime){
  51. this.processRunningTime=processRunningTime;
  52. }
  53. publiclonggetProcessEndTime(){
  54. returnprocessEndTime;
  55. }
  56. publicvoidsetProcessEndTime(longprocessEndTime){
  57. this.processEndTime=processEndTime;
  58. }
  59. publiclonggetProcessStartTime(){
  60. returnprocessStartTime;
  61. }
  62. publicvoidsetProcessStartTime(longprocessStartTime){
  63. this.processStartTime=processStartTime;
  64. }
  65. publiclonggetReadTotalSize(){
  66. returnreadTotalSize;
  67. }
  68. publicvoidsetReadTotalSize(longreadTotalSize){
  69. this.readTotalSize=readTotalSize;
  70. }
  71. publicintgetSuccessUploadFileCount(){
  72. returnsuccessUploadFileCount;
  73. }
  74. publicvoidsetSuccessUploadFileCount(intsuccessUploadFileCount){
  75. this.successUploadFileCount=successUploadFileCount;
  76. }
  77. publicintgetCurrentUploadFileNum(){
  78. returncurrentUploadFileNum;
  79. }
  80. publicvoidsetCurrentUploadFileNum(intcurrentUploadFileNum){
  81. this.currentUploadFileNum=currentUploadFileNum;
  82. }
  83. publicStringgetStatus(){
  84. returnstatus;
  85. }
  86. publicvoidsetStatus(Stringstatus){
  87. this.status=status;
  88. }
  89. publiclonggetUploadTotalSize(){
  90. returnuploadTotalSize;
  91. }
  92. publicvoidsetUploadTotalSize(longuploadTotalSize){
  93. this.uploadTotalSize=uploadTotalSize;
  94. }
  96. }

由于要在客户端要显示进度条，所以在上传过程中服务器端需要监视和维护上传状态的信息，此过程需要处理的数据信息是：不断更新Session中保存的FileUploadStatus实例的信息，如：已经上传的字节数，上传文件的总大小等。FileUpload现在的1.2版本为监视上传进度提供了内建的支持，可以直接继承类ProgressListener，然后重载update()方法，在该方法中添加自己要处理的代码，最后在文件上传处理代码（后面会讲到）中通过为ServletFileUpload对象注册创建的监听类。监听类UploadListener的源代码如下：

Java代码
  1. packagecom.ncu.upload;
  3. importjavax.servlet.http.HttpSession;
  5. importorg.apache.commons.fileupload.ProgressListener;
  7. publicclassUploadListenerimplementsProgressListener{
  9. privateHttpSessionsession=null;
  11. publicUploadListener(HttpSessionsession){
  12. this.session=session;
  13. }
  14. /**
  15. *更新状态
  16. *@parampBytesRead读取字节总数
  17. *@parampContentLength数据总长度
  18. *@parampItems当前正在被读取的field号
  19. */
  20. publicvoidupdate(longpBytesRead,longpContentLength,intpItems){
  21. FileUploadStatusfuploadStatus=UploadServlet.takeOutFileUploadStatusBean(this.session);
  22. fuploadStatus.setUploadTotalSize(pContentLength);
  23. //读取完成
  24. if(pContentLength==-1){
  25. fuploadStatus.setStatus("完成对"+pItems+"个文件的读取：读取了"+pBytesRead+"/"+pContentLength+"bytes.");
  26. fuploadStatus.setReadTotalSize(pBytesRead);
  27. fuploadStatus.setCurrentUploadFileNum(pItems);
  28. fuploadStatus.setProcessEndTime(System.currentTimeMillis());
  29. fuploadStatus.setProcessRunningTime(fuploadStatus.getProcessEndTime());
  30. }else{//读取过程中
  31. fuploadStatus.setStatus("当前正在处理第"+pItems+"个文件:已经读取了"+pBytesRead+"/"+pContentLength+"bytes.");
  32. fuploadStatus.setReadTotalSize(pBytesRead);
  33. fuploadStatus.setCurrentUploadFileNum(pItems);
  34. fuploadStatus.setProcessRunningTime(System.currentTimeMillis());
  35. }
  36. //System.out.println("已经读取："+pBytesRead);
  37. UploadServlet.storeFileUploadStatusBean(this.session,fuploadStatus);
  38. }
  40. }

有了前面两个类的基础，下来我们可以动手去实现真正处理整个操作Servlet类。源代码如下。

Java代码
  1. packagecom.ncu.upload;
  3. importjava.io.*;
  4. importjava.util.List;
  6. importjavax.servlet.ServletException;
  7. importjavax.servlet.http.HttpServletRequest;
  8. importjavax.servlet.http.HttpServletResponse;
  9. importjavax.servlet.http.HttpSession;
  11. importorg.apache.commons.fileupload.FileItem;
  12. importorg.apache.commons.fileupload.FileUploadException;
  13. importorg.apache.commons.fileupload.disk.DiskFileItemFactory;
  14. importorg.apache.commons.fileupload.servlet.*;
  16. /**
  17. *ServletimplementationclassforServlet:UploadServlet
  18. *
  19. */
  20. publicclassUploadServletextendsjavax.servlet.http.HttpServletimplementsjavax.servlet.Servlet{
  21. staticfinallongserialVersionUID=1L;
  23. publicstaticfinalStringUPLOAD_STATUS="UPLOAD_STATUS";
  24. publicstaticfinalStringUPLOAD_DIR="/upload";
  26. publicUploadServlet(){
  27. super();
  28. }
  30. /**
  31. *从文件路径中取出文件名
  32. *@paramfilePath
  33. *@return
  34. */
  35. privateStringtakeOutFileName(StringfilePath){
  36. intpos=filePath.lastIndexOf(File.separator);
  37. if(pos>0){
  38. returnfilePath.substring(pos+1);
  39. }
  40. else{
  41. returnfilePath;
  42. }
  43. }
  45. /**
  46. *从request中取出FileUploadStatusBean
  47. *@paramrequest
  48. *@return
  49. */
  50. publicstaticFileUploadStatustakeOutFileUploadStatusBean(HttpSessionsession){
  51. Objectobj=session.getAttribute(UPLOAD_STATUS);
  52. if(obj!=null){
  53. return(FileUploadStatus)obj;
  54. }
  55. else{
  56. returnnull;
  57. }
  58. }
  60. /**
  61. *把FileUploadStatusBean保存到session
  62. *@paramrequest
  63. *@paramuploadStatusBean
  64. */
  65. publicstaticvoidstoreFileUploadStatusBean(
  66. HttpSessionsession,
  67. FileUploadStatusuploadStatusBean){
  68. session.setAttribute(UPLOAD_STATUS,uploadStatusBean);
  69. }
  71. /**
  72. *删除已经上传的文件
  73. *@paramrequest
  74. */
  75. privatevoiddeleteUploadedFile(HttpServletRequestrequest){
  76. FileUploadStatusfUploadStatus=takeOutFileUploadStatusBean(request.getSession());
  77. for(inti=0;i<fUploadStatus.getUploadFileUrlList().size();i++){
  78. FileuploadedFile=newFile(request.getRealPath(UPLOAD_DIR)+
  79. File.separator+fUploadStatus.getUploadFileUrlList().get(i));
  80. uploadedFile.delete();
  81. }
  82. fUploadStatus.getUploadFileUrlList().clear();
  83. fUploadStatus.setStatus("删除已上传的文件");
  84. storeFileUploadStatusBean(request.getSession(),fUploadStatus);
  85. }
  87. /**
  88. *上传过程中出错处理
  89. *@paramrequest
  90. *@paramerrMsg
  91. *@throwsIOException
  92. *@throwsServletException
  93. */
  94. privatevoiduploadExceptionHandle(
  95. HttpServletRequestrequest,
  96. StringerrMsg)throwsServletException,IOException{
  97. //首先删除已经上传的文件
  98. deleteUploadedFile(request);
  99. FileUploadStatusfUploadStatus=takeOutFileUploadStatusBean(request.getSession());
  100. fUploadStatus.setStatus(errMsg);
  101. storeFileUploadStatusBean(request.getSession(),fUploadStatus);
  102. }
  104. /**
  105. *初始化文件上传状态Bean
  106. *@paramrequest
  107. *@return
  108. */
  109. privateFileUploadStatusinitFileUploadStatusBean(HttpServletRequestrequest){
  110. FileUploadStatusfUploadStatus=newFileUploadStatus();
  111. fUploadStatus.setStatus("正在准备处理");
  112. fUploadStatus.setUploadTotalSize(request.getContentLength());
  113. fUploadStatus.setProcessStartTime(System.currentTimeMillis());
  114. fUploadStatus.setBaseDir(request.getContextPath()+UPLOAD_DIR);
  115. returnfUploadStatus;
  116. }
  118. /**
  119. *处理文件上传
  120. *@paramrequest
  121. *@paramresponse
  122. *@throwsIOException
  123. *@throwsServletException
  124. */
  125. privatevoidprocessFileUpload(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
  126. DiskFileItemFactoryfactory=newDiskFileItemFactory();
  127. //设置内存阀值，超过后写入临时文件
  128. //factory.setSizeThreshold(10240000*5);
  129. //设置临时文件存储位置
  130. //factory.setRepository(newFile(request.getRealPath("/upload/temp")));
  131. ServletFileUploadupload=newServletFileUpload(factory);
  132. //设置单个文件的最大上传size
  133. //upload.setFileSizeMax(10240000*5);
  134. //设置整个request的最大size
  135. //upload.setSizeMax(10240000*5);
  136. //注册监听类
  137. upload.setProgressListener(newUploadListener(request.getSession()));
  138. //保存初始化后的FileUploadStatusBean
  139. storeFileUploadStatusBean(request.getSession(),initFileUploadStatusBean(request));
  141. try{
  142. Listitems=upload.parseRequest(request);
  143. //处理文件上传
  144. for(inti=0;i<items.size();i++){
  145. FileItemitem=(FileItem)items.get(i);
  147. //取消上传
  148. if(takeOutFileUploadStatusBean(request.getSession()).getCancel()){
  149. deleteUploadedFile(request);
  150. break;
  151. }
  152. //保存文件
  153. elseif(!item.isFormField()&&item.getName().length()>0){
  154. StringfileName=takeOutFileName(item.getName());
  155. FileuploadedFile=newFile(request.getRealPath(UPLOAD_DIR)+File.separator+fileName);
  156. item.write(uploadedFile);
  157. //更新上传文件列表
  158. FileUploadStatusfUploadStatus=takeOutFileUploadStatusBean(request.getSession());
  159. fUploadStatus.getUploadFileUrlList().add(fileName);
  160. storeFileUploadStatusBean(request.getSession(),fUploadStatus);
  161. Thread.sleep(500);
  162. }
  163. }
  165. }catch(FileUploadExceptione){
  166. e.printStackTrace();
  167. //uploadExceptionHandle(request,"上传文件时发生错误:"+e.getMessage());
  168. }catch(Exceptione){
  169. //TODOAuto-generatedcatchblock
  170. e.printStackTrace();
  171. //uploadExceptionHandle(request,"保存上传文件时发生错误:"+e.getMessage());
  172. }
  173. }
  175. /**
  176. *回应上传状态查询
  177. *@paramrequest
  178. *@paramresponse
  179. *@throwsIOException
  180. */
  181. privatevoidresponseFileUploadStatusPoll(HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException{
  182. FileUploadStatusfUploadStatus=(FileUploadStatus)request.getSession().getAttribute(UPLOAD_STATUS);
  183. //计算上传完成的百分比
  184. longpercentComplete=(long)Math.floor(((double)fUploadStatus.getReadTotalSize()/(double)fUploadStatus.getUploadTotalSize())*100.0);
  185. System.out.println("com:"+percentComplete);
  186. response.setContentType("text/xml");
  187. response.setCharacterEncoding("UTF-8");
  188. response.setHeader("Cache-Control","no-cache");
  189. if(((long)fUploadStatus.getReadTotalSize()==(long)fUploadStatus.getUploadTotalSize())||(fUploadStatus.getCancel()==true)){
  190. response.getWriter().write(fUploadStatus.getStatus().toString()+"success");
  191. }else{
  192. response.getWriter().write(fUploadStatus.getStatus().toString()+"<divclass=\"prog-border\"><divclass=\"prog-bar\"style=\"width:"
  193. +percentComplete+"%;\"></div></div>");
  194. }
  195. }
  196. /**
  197. *处理取消文件上传
  198. *@paramrequest
  199. *@paramresponse
  200. *@throwsIOException
  201. */
  202. privatevoidprocessCancelFileUpload(HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException{
  203. FileUploadStatusfUploadStatus=(FileUploadStatus)request.getSession().getAttribute(UPLOAD_STATUS);
  204. fUploadStatus.setCancel(true);
  205. request.getSession().setAttribute(UPLOAD_STATUS,fUploadStatus);
  206. responseFileUploadStatusPoll(request,response);
  208. }
  210. /**
  211. *在上传文件列表中查找与文件名相关的id
  212. *@paramrequest
  213. *@paramfileName文件名
  214. *@return　找到返回id,否则返回-1
  215. */
  216. privateintfindFileIdInFileUploadedList(HttpServletRequestrequest,StringfileName){
  217. FileUploadStatusfileUploadStatus=takeOutFileUploadStatusBean(request.getSession());
  218. for(inti=0;i<fileUploadStatus.getUploadFileUrlList().size();i++){
  219. if(fileName.equals((String)fileUploadStatus.getUploadFileUrlList().get(i))){
  220. returni;
  221. }
  222. }
  223. return-1;
  224. }
  226. protectedvoiddoGet(HttpServletRequestrequest,IOException{
  227. doPost(request,response);
  228. }
  231. protectedvoiddoPost(HttpServletRequestrequest,IOException{
  232. booleanisMultipart=ServletFileUpload.isMultipartContent(request);
  234. if(isMultipart){
  235. processFileUpload(request,response);
  236. }else{
  237. request.setCharacterEncoding("UTF-8");
  239. if(request.getParameter("uploadStatus")!=null){
  240. responseFileUploadStatusPoll(request,response);
  241. }
  242. if(request.getParameter("cancelUpload")!=null){
  243. processCancelFileUpload(request,response);
  244. }
  245. }
  247. }
  248. }

至此，服务器端的代码已经基本完成。

5.客户端实现

由于在上传文件时需要在同一页面显示对应的进度条控件，因此，在提交表单时当前页面不能被刷新。我们可以通过将表单提交至一个隐藏的iframe中来实现。关于Ajax的技术前面讲过，这里就不再细说，直接给出源代码如下：

HTML代码
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <Meta@H_610_3018@http-equiv="Content-Type"@H_610_3018@content="text/html;charset=UTF-8">
  5. <title>基于Ajax的上传文件显示进度条</title>
  6. <style>
  7. .prog-border{
  8. height:15px;
  9. width:205px;
  10. background:#fff;
  11. border:1pxsolid#000;
  12. margin:0;
  13. padding:0;
  14. }
  15. .prog-bar{
  16. height:11px;
  17. margin:2px;
  18. padding:0px;
  19. background:#178399;
  20. font-size:10pt;
  21. }
  22. body{
  23. font-family:Arial,Helvetica,sans-serif;
  24. font-size:10pt;
  25. }
  26. </style>
  27. <script@H_610_3018@language="javascript"@H_610_3018@type="text/javascript">
  28. <!--
  29. //var@H_610_3018@userName=document.getElementById("userName").value;
  30. //创建跨浏览器的XMLHttpRequest对象
  31. vartimer;
  32. functionstartListener(){
  33. varxmlhttp;
  34. try{
  35. //IE5.0
  36. @H_610_3018@xmlhttp=newActiveXObject('Msxm12.XMLHTTP');
  37. }catch(e){
  38. try{
  39. //IE5.5及更高版本
  40. @H_610_3018@xmlhttp=newActiveXObject('Microsoft.XMLHTTP');
  41. }catch(e){
  42. try{
  43. //其他浏览器
  44. @H_610_3018@xmlhttp=newXMLHttpRequest();
  45. }catch(e){}
  46. }
  47. }
  48. var@H_610_3018@progressStatusText=document.getElementById("progressBar");
  49. xmlhttp.open("get","UploadServlet?@H_610_3018@uploadStatus=true",true);
  50. /**此处Header设置非常重要，必须设置Content-type类型，负责会报错误
  51. */
  52. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  53. @H_610_3018@xmlhttp.onreadystatechange=function(){
  54. if(@H_610_3018@xmlhttp.readyState==4){
  55. if(@H_610_3018@xmlhttp.status==200){
  56. @H_610_3018@progressStatusText.innerHTML="";
  57. @H_610_3018@progressStatusText.innerHTML=xmlhttp.responseText;
  58. var@H_610_3018@temp=xmlhttp.responseText.indexOf("success");
  59. if(temp>0){
  60. window.clearTimeout(timer);
  61. }else{
  62. @H_610_3018@timer=window.setTimeout(startListener,1000);
  63. }
  64. }
  65. }
  66. }
  67. xmlhttp.send(null);
  68. }
  69. functionstartUpload(){
  70. @H_610_3018@timer=window.setTimeout(startListener,1000);
  71. returntrue;
  72. }
  73. functioncancelUpload(){
  74. varxmlhttp;
  75. try{
  76. //IE5.0
  77. @H_610_3018@xmlhttp=newActiveXObject('Msxm12.XMLHTTP');
  78. }catch(e){
  79. try{
  80. //IE5.5及更高版本
  81. @H_610_3018@xmlhttp=newActiveXObject('Microsoft.XMLHTTP');
  82. }catch(e){
  83. try{
  84. //其他浏览器
  85. @H_610_3018@xmlhttp=newXMLHttpRequest();
  86. }catch(e){}
  87. }
  88. }
  89. var@H_610_3018@progressStatusText=document.getElementById("progressBar");
  90. xmlhttp.open("get","UploadServlet?@H_610_3018@cancelUpload=true",true);
  91. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  92. //xmlhttp.setRequestHeader("Content-type","multipart/form-data");
  93. @H_610_3018@xmlhttp.onreadystatechange=function(){
  94. if(@H_610_3018@xmlhttp.readyState==4){
  95. if(@H_610_3018@xmlhttp.status==200){
  96. @H_610_3018@progressStatusText.innerHTML="";
  97. @H_610_3018@progressStatusText.innerHTML=xmlhttp.responseText;
  98. }
  99. }
  100. }
  101. xmlhttp.send(null);
  102. returnfalse;
  103. }
  104. //-->
  105. </script>
  106. </head>
  107. <body>
  108. <div@H_610_3018@id="controlPanel">
  109. <!--这个是隐藏的<iframe>作为表单提交后处理的后台目标
  110. 通过表单form的target属性指定该<iframe>将返回信息显示在<iframe>框架中
  111. -->
  112. <iframe@H_610_3018@id='target_upload'@H_610_3018@name='target_upload'@H_610_3018@src=''@H_610_3018@style='display:none'></iframe>
  113. <form@H_610_3018@id="fileUploadForm"@H_610_3018@name="fileUploadForm"@H_610_3018@action="UploadServlet"
  114. @H_610_3018@enctype="multipart/form-data"@H_610_3018@method="post"@H_610_3018@onsubmit="returnstartUpload();"@H_610_3018@target="target_upload">
  115. <input@H_610_3018@type="file"@H_610_3018@name="file"@H_610_3018@id="file"@H_610_3018@size="40"/><br>
  116. <input@H_610_3018@type="submit"@H_610_3018@name="uploadButton"@H_610_3018@id="uploadButton"@H_610_3018@value="开始上传"/>
  117. <input@H_610_3018@type="button"@H_610_3018@name="cancelUploadButton"@H_610_3018@id="cancelUploadButton"@H_610_3018@value="取消上传"@H_610_3018@onclick="returncancelUpload();"/><br>
  118. </form>
  119. <div@H_610_3018@id="progressBar">
  120. </div>
  121. </div>
  122. </body>
  123. </html>

至此，整个文件上传的实现到此完成，读者可以在此基础上，发挥自己的创新能力，去完善此实例。

Good Luck!

相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/WindrunnerMax/E...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈哈。 为了防止...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax基础原理与应用
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...