EXTJS+JSP上傳文件帶進度條

需求來源是這樣的：上傳一個很大的excel文件到server， server會解析這個excel， 然后一條一條的插入到數據庫，整個過程要耗費很長時間，因此當用戶點擊上傳之后，需要顯示一個進度條，并且能夠根據后臺的接收的數據量和處理的進度及時更新進度條。
分析：后臺需要兩個組件，uploadController.jsp用來接收并且處理數據，它會動態的把進度信息放到session，另一個組件processController.jsp用來更新進度條；當用戶點“上傳”之后，form被提交給uploadController.jsp，同時用js啟動一個ajax請求到processController.jsp，ajax用獲得的進度百分比更新進度條的顯示進度，而且這個過程每秒重復一次；這就是本例的基本工作原理。
現在的問題是server接收數據的時候怎么知道接收的數據占總數據的多少？ 如果我們從頭自己寫一個文件上傳組件，那這個問題很好解決，關鍵是很多時候我們都是用的成熟的組件，比如apache commons fileupload； 比較幸運的是，apache早就想到了這個問題，所以預留了接口可以用來獲取接收數據的百分比；因此我就用apache commons fileupload來接收上傳文件。
uploadController.jsp：

[java] view plaincopyprint?
  1. <%@?page?language="java"?import="java.util.*,?java.io.*,?org.apache.commons.fileupload.*,?org.apache.commons.fileupload.disk.DiskFileItemFactory,?org.apache.commons.fileupload.servlet.ServletFileUpload"?pageEncoding="utf-8"%>??
  2. <%??
  3. //注意上面的import的jar包是必須的 ??
  4. //下面是使用apache?commons?fileupload接收上傳文件； ??
  5. FileItemFactory?factory?=?new?DiskFileItemFactory();??
  6. ServletFileUpload?upload?=?new?ServletFileUpload(factory);??
  7. //因為內部類無法引用request，所以要實現一個。 ??
  8. class?MyProgressListener?implements?ProgressListener{??
  9. ????private?HttpServletRequest?request?=?null;??
  10. ????MyProgressListener(HttpServletRequest?request){??
  11. ????????this.request?=?request;??
  12. ????}??
  13. ????public?void?update(long?pBytesRead,?long?pContentLength,?int?pItems)?{??
  14. ????????double?percentage?=?((double)pBytesRead/(double)pContentLength);??
  15. ????????//上傳的進度保存到session，以便processController.jsp使用 ??
  16. ????????request.getSession().setAttribute("uploadPercentage",?percentage);??
  17. ????}??
  18. }??
  19. upload.setProgressListener(new?MyProgressListener(request));??
  20. List?items?=?upload.parseRequest(request);??
  21. Iterator?iter?=?items.iterator();??
  22. while?(iter.hasNext())?{??
  23. ????FileItem?item?=?(FileItem)?iter.next();??
  24. ????if?(item.isFormField()){??
  25. ??????????
  26. ????}?else?{??
  27. ????????//String?fieldName?=?item.getFieldName(); ??
  28. ????????String?fileName?=?item.getName();??
  29. ????????//String?contentType?=?item.getContentType(); ??
  30. ???????System.out.println();??
  31. ????????boolean?isInMemory?=?item.isInMemory();??
  32. ????????long?sizeInBytes?=?item.getSize();??
  33. ????????File?uploadedFile?=?new?File("c://"?+?System.currentTimeMillis()?+?fileName.substring(fileName.lastIndexOf(".")));??
  34. ????????item.write(uploadedFile);??
  35. ????}??
  36. }??
  37. out.write("{success:true,msg:'保存上傳文件數據并分析Excel成功!'}");??
  38. out.flush();??
  39. %>??

processController.jsp：

[java] view plaincopyprint?
  1. <%@?page?language="java"?import="java.util.*"?contentType?=?"text/html;charset=UTF-8"?pageEncoding="utf-8"%>??
  2. <%??
  3. ????//注意上面的抬頭是必須的。否則會有ajax亂碼問題。 ??
  4. ????//從session取出uploadPercentage并送回瀏覽器 ??
  5. ????Object?percent?=?request.getSession().getAttribute("uploadPercentage");??
  6. ????String?msg?=?"";??
  7. ????double?d?=?0;??
  8. ????if(percent==null){??
  9. ????????d?=?0;??
  10. ????}??
  11. ????else{??
  12. ????????d?=?(Double)percent;??
  13. ????????//System.out.println("+++++++processController:?"?+?d); ??
  14. ????}??
  15. ????if(d<1){??
  16. ????//d<1代表正在上傳， ??
  17. ????????msg?=?"正在上傳文件...";??
  18. ????????out.write("{success:true,?msg:?'"+msg+"',?percentage:'"?+?d?+?"',?finished:?false}");??
  19. ????}??
  20. ????else?if(d>=1){??
  21. ????????//d>1?代表上傳已經結束，開始處理分析excel， ??
  22. ????????//本例只是模擬處理excel，在session中放置一個processExcelPercentage，代表分析excel的進度。 ??
  23. ????????msg?=?"正在分析處理Excel...";??
  24. ????????String?finished?=?"false";??
  25. ????????double?processExcelPercentage?=?0.0;??
  26. ????????Object?o?=?request.getSession().getAttribute("processExcelPercentage");??
  27. ????????if(o==null){??
  28. ????????????processExcelPercentage?=?0.0;??
  29. ????????????request.getSession().setAttribute("processExcelPercentage",?0.0);??
  30. ??????????????
  31. ????????}??
  32. ????????else{??
  33. ????????????//模擬處理excel,百分比每次遞增0.1? ??
  34. ????????????processExcelPercentage?=?(Double)o?+?0.1;??
  35. ????????????request.getSession().setAttribute("processExcelPercentage",?processExcelPercentage);??
  36. ????????????if(processExcelPercentage>=1){??
  37. ????????????????//當processExcelPercentage>1代表excel分析完畢。 ??
  38. ????????????????request.getSession().removeAttribute("uploadPercentage");??
  39. ????????????????request.getSession().removeAttribute("processExcelPercentage");??
  40. ????????????????//客戶端判斷是否結束的標志 ??
  41. ????????????????finished?=?"true";??
  42. ????????????}??
  43. ????????}??
  44. ????????out.write("{success:true,?msg:?'"+msg+"',?percentage:'"?+?processExcelPercentage?+?"',?finished:?"+?finished?+"}");??
  45. ????????//注意返回的數據，success代表狀態 ??
  46. ????????//percentage是百分比 ??
  47. ????????//finished代表整個過程是否結束。 ??
  48. ????}??
  49. ????out.flush();??
  50. %>??

表單頁面upload.html：

[xhtml] view plaincopyprint?
  1. <html>??
  2. ????<head>??
  3. ????????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>??
  4. ????????<title>File?Upload?Field?Example</title>??
  5. ????????<link?rel="stylesheet"?type="text/css"??
  6. ????????????href="ext/resources/css/ext-all.css"?/>??
  7. ????????<script?type="text/javascript"?src="ext/adapter/ext/ext-base.js">?</script>??
  8. ????????<script?type="text/javascript"?src="ext/ext-all.js">?</script>??
  9. ????????<style>??
  10. </style>??
  11. ????</head>??
  12. ????<body>??
  13. ????????<a?href="http://blog.csdn.net/sunxing007">sunxing007</a>??
  14. ????????<div?id="form"></div>??
  15. ????</body>??
  16. ????<script>??
  17. var?fm?=?new?Ext.FormPanel({??
  18. ????title:?'上傳excel文件',??
  19. ????url:'uploadController.jsp?t='?+?new?Date(),??
  20. ????autoScroll:true,??
  21. ????applyTo:?'form',??
  22. ????height:?120,??
  23. ????width:?500,??
  24. ????frame:false,??
  25. ????fileUpload:?true,??
  26. ????defaultType:'textfield',??
  27. ????labelWidth:200,??
  28. ????items:[{??
  29. ????????xtype:'field',??
  30. ????????fieldLabel:'請選擇要上傳的Excel文件?',??
  31. ????????allowBlank:false,??
  32. ????????inputType:'file',??
  33. ????????name:'file'??
  34. ????}],??
  35. ????buttons:?[{??
  36. ????????text:?'開始上傳',??
  37. ????????handler:?function(){??
  38. ????????????//點擊'開始上傳'之后，將由這個function來處理。??
  39. ????????????if(fm.form.isValid()){//驗證form，?本例略掉了??
  40. ????????????//顯示進度條??
  41. ????????????????Ext.MessageBox.show({???
  42. ????????????????????title:?'正在上傳文件',???
  43. ????????????????????//msg:?'Processing...',???
  44. ????????????????????width:240,???
  45. ????????????????????progress:true,???
  46. ????????????????????closable:false,???
  47. ????????????????????buttons:{cancel:'Cancel'}???
  48. ????????????????});???
  49. ????????????????//form提交??
  50. ????????fm.getForm().submit();??
  51. ????????//設置一個定時器，每500毫秒向processController發送一次ajax請求??
  52. ????????????var?i?=?0;??
  53. ????????????var?timer?=?setInterval(function(){??
  54. ????????????????????//請求事例??
  55. ??????????????????Ext.Ajax.request({??
  56. ??????????????????//下面的url的寫法很關鍵，我為了這個調試了好半天??
  57. ??????????????????//以后凡是在ajax的請求的url上面都要帶上日期戳，??
  58. ??????????????????//否則極有可能每次出現的數據都是一樣的，??
  59. ??????????????????//這和瀏覽器緩存有關??
  60. ????????????????????????url:?'processController.jsp?t='?+?new?Date(),??
  61. ????????????????????????method:?'get',??
  62. ????????????????????????//處理ajax的返回數據??
  63. ????????????????????????success:?function(response,?options){??
  64. ????????????????????????????status?=?response.responseText?+?"?"?+?i++;??
  65. ????????????????????????????var?obj?=?Ext.util.JSON.decode(response.responseText);??
  66. ????????????????????????????if(obj.success!=false){??
  67. ????????????????????????????????if(obj.finished){??
  68. ????????????????????????????????????clearInterval(timer);?????
  69. ????????????????????????????????????//status?=?response.responseText;??
  70. ????????????????????????????????????Ext.MessageBox.updateProgress(1,?'finished',?'finished');??
  71. ????????????????????????????????????Ext.MessageBox.hide();??
  72. ????????????????????????????????}??
  73. ????????????????????????????????else{??
  74. ????????????????????????????????????Ext.MessageBox.updateProgress(obj.percentage,?obj.msg);???
  75. ????????????????????????????????}??
  76. ????????????????????????????}??
  77. ????????????????????????},??
  78. ????????????????????????failure:?function(){??
  79. ????????????????????????????clearInterval(timer);??
  80. ????????????????????????????Ext.Msg.alert('錯誤',?'發生錯誤了。');??
  81. ????????????????????????}???
  82. ????????????????????});??
  83. ????????????},?500);??
  84. ??????????????????
  85. ????????????}??
  86. ????????????else{??
  87. ????????????????Ext.Msg.alert("消息","請先選擇Excel文件再上傳.");??
  88. ????????????}??
  89. ????????}???
  90. ????}]??
  91. });??
  92. </script>??
  93. </html>??
??

把這三個文件放到tomcat/webapps/ROOT/, 同時把ext的主要文件也放到這里，啟動tomcat即可測試：http://localhost:8080/upload.html
我的資源里面有完整的示例文件：http://download.csdn.net/detail/hanghangaidoudou/4987201， 下載zip文件之后解壓到tomcat/webapps/ROOT/即可測試。

最后需要特別提醒，因為用到了apache 的fileUpload組件，因此，需要把common-fileupload.jar放到ROOT/WEB-INF/lib下。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/388401.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/388401.shtml
英文地址，請注明出處：http://en.pswp.cn/news/388401.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

android Json詳解

android Json詳解

Json:一種輕量級的數據交換格式&#xff0c;具有良好的可讀和便于快速編寫的特性。業內主流技術為其提供了完整的解決方案&#xff08;有點類似于正則表達式 &#xff0c;獲得了當今大部分語言的支持&#xff09;&#xff0c;從而可以在不同平臺間進行數據交換。JSON采用兼容性…
閱讀更多...
react實踐

react實踐

React 最佳實踐一、 React 與 AJAXReact 只負責處理 View 這一層&#xff0c;它本身不涉及網絡請求 /AJAX: 第一&#xff0c;用什么技術從服務端獲取數據&#xff1b; 第二&#xff0c;獲取到的數據應該放在 react 組件的什么位置。 事實上是有很多的&#xff1a;fetch()、fetc…
閱讀更多...
什么樣的代碼是好代碼_什么是好代碼？

什么樣的代碼是好代碼_什么是好代碼？

什么樣的代碼是好代碼編碼最佳實踐 (Coding Best-Practices) In the following section, I will introduce the topic at hand, giving you a sense of what this post will cover, and how each argument therein will be approached. Hopefully, this will help you decide w…
閱讀更多...
nginx比較apache

nginx比較apache

話說nginx在大壓力的環境中比apache的表現要好&#xff0c;于是下載了一個來折騰一下。 下載并編譯安裝&#xff0c;我的編譯過程有點特別&#xff1a; 1。去除調試信息&#xff0c;修改$nginx_setup_path/auto/cc/gcc這個文件&#xff0c;將 CFLAGS"$CFLAGS -g" …
閱讀更多...
計算機主板各模塊復位,電腦主板復位電路工作原理分析

計算機主板各模塊復位,電腦主板復位電路工作原理分析

電源、時鐘、復位是主板能正常工作的三大要素。主板在電源、時鐘都正常后&#xff0c;復位系統發出復位信號&#xff0c;主板各個部件在收到復位信號后&#xff0c;同步進入初始化狀態。如圖7-11所示為復位電路的工作原理圖&#xff0c;各個十板實現復位的電路不盡相同&#xf…
閱讀更多...
Docker制作dotnet core控制臺程序鏡像

Docker制作dotnet core控制臺程序鏡像

(1)首先我們到某個目錄下&#xff0c;然后在此目錄下打開visual studio code. 2.編輯docker file文件如下: 3.使用dotnet new console創建控制臺程序; 4.使用docker build -t daniel/console:dev .來進行打包; 5.啟動并運行鏡像; 6.我們可以看到打包完的鏡像將近2G,因為我們使用…
閱讀更多...
【362】python 正則表達式

【362】python 正則表達式

參考&#xff1a;正則表達式 - 廖雪峰 參考&#xff1a;Python3 正則表達式 - 菜鳥教程 參考&#xff1a;正則表達式 - 教程 re.match 嘗試從字符串的起始位置匹配一個模式&#xff0c;如果不是起始位置匹配成功的話&#xff0c;match()就返回none。 re.search 掃描整個字符串并…
閱讀更多...
在Python中使用Twitter Rest API批量搜索和下載推文

在Python中使用Twitter Rest API批量搜索和下載推文

數據挖掘 &#xff0c; 編程 (Data Mining, Programming) Getting Twitter data獲取Twitter數據 Let’s use the Tweepy package in python instead of handling the Twitter API directly. The two things we will do with the package are, authorize ourselves to use the …
閱讀更多...
第一套數字電子計算機,計算機試題第一套

第一套數字電子計算機,計算機試題第一套

《計算機試題第一套》由會員分享&#xff0c;可在線閱讀&#xff0c;更多相關《計算機試題第一套(5頁珍藏版)》請在人人文庫網上搜索。1、計算機試題第一套1、計算機之所以能自動運算,就是由于采用了工作原理。A、布爾邏輯。B 儲存程序。C、數字電路。D,集成電路答案選B2、“長…
閱讀更多...
Windows7 + Nginx + Memcached + Tomcat 集群 session 共享

Windows7 + Nginx + Memcached + Tomcat 集群 session 共享

一&#xff0c;環境說明 操作系統是Windows7家庭版&#xff08;有點不專業哦&#xff0c;呵呵&#xff01;&#xff09;&#xff0c;JDK是1.6的版本&#xff0c; Tomcat是apache-tomcat-6.0.35-windows-x86&#xff0c;下載鏈接&#xff1a;http://tomcat.apache.org/ Nginx…
閱讀更多...
git 版本控制(一)

git 版本控制(一)

新建代碼庫repository 1、在當前目錄新建一個git代碼庫 git init git init projectname 2、下載一個項目&#xff0c;如果已經有了遠端的代碼&#xff0c;則可以使用clone下載 git clone url 增加/刪除/改名文件 1、添加指定文件到暫存區 git add filename 2、添加指定目錄到暫…
閱讀更多...
rollup學習小記

rollup學習小記

周末在家重構網關的Npm包&#xff0c;用到了rollup&#xff0c;記下筆記 rollup適合庫library的開發&#xff0c;而webpack適合應用程序的開發。 rollup也支持tree-shaking&#xff0c;自帶的功能。 package.json 也具有 module 字段&#xff0c;像 Rollup 和 webpack 2 這樣的…
閱讀更多...
大數據 vr csdn_VR中的數據可視化如何革命化科學

大數據 vr csdn_VR中的數據可視化如何革命化科學

大數據 vr csdnAstronomy has become a big data discipline, and the ever growing databases in modern astronomy pose many new challenges for analysts. Scientists are more frequently turning to artificial intelligence and machine learning algorithms to analyze…
閱讀更多...
object-c 日志

object-c 日志

printf和NSlog區別 NSLog會自動加上換行符&#xff0c;不需要自己添加換行符&#xff0c;NSLog會加上時間和進程信息&#xff0c;而printf僅將輸入的內容輸出不會添加任何額外的東西。兩者的輸入類型也是有區別的NSLog期待NSString*&#xff0c;而printf期待const char *。最本…
閱讀更多...
計算機真正管理的文件名是什么,計算機題，請大家多多幫忙，謝謝

計算機真正管理的文件名是什么,計算機題，請大家多多幫忙，謝謝

4、在資源管理器中&#xff0c;若想顯示文件名、文件大小和文件類型&#xff0c;應采用什么顯示方式。( )A、小圖標顯示 B、列表顯示 C、詳細資料顯示 D、縮略圖顯示5、在EXCEL中&#xff0c;可以依據不同要求來提取和匯總數據&#xff0c;4、在資源管理器中&#xff0c;若想顯…
閱讀更多...
小a的排列

小a的排列

鏈接&#xff1a;https://ac.nowcoder.com/acm/contest/317/G來源&#xff1a;牛客網小a有一個長度為nn的排列。定義一段區間是"萌"的&#xff0c;當且僅當把區間中各個數排序后相鄰元素的差為11 現在他想知道包含數x,yx,y的長度最小的"萌"區間的左右端點 …
閱讀更多...
Xcode做簡易計算器

Xcode做簡易計算器

1.創建一個新項目&#xff0c;選擇“View-based Application”。輸入名字“Cal”&#xff0c;這時會有如下界面。 2.選擇Resources->CalViewController.xib并雙擊&#xff0c;便打開了資源編輯對話框。 3.我們會看到幾個窗口。其中有一個上面寫著Library&#xff0c;這里…
閱讀更多...
計算機 編程 教程 pdf,計算機專業教程-第3章編程接口介紹.pdf

計算機 編程 教程 pdf,計算機專業教程-第3章編程接口介紹.pdf

下載第3章 編程接口介紹? DB2 UDB應用程序概述? 嵌入S Q L編程? CLI/ODBC應用程序? JAVA應用程序? DAO 、R D O 、A D O應用程序本章將介紹對DB2 UDB 可用的編程方法及其特色&#xff0c;其中一些方法附有簡單的例子&#xff0c;在這些例子中&#xff0c;有些并不是只適用…
閱讀更多...
導入數據庫怎么導入_導入必要的庫

導入數據庫怎么導入_導入必要的庫

導入數據庫怎么導入重點 (Top highlight)With the increasing popularity of machine learning, many traders are looking for ways in which they can “teach” a computer to trade for them. This process is called algorithmic trading (sometimes called algo-trading)…
閱讀更多...
windows查看系統版本號

windows查看系統版本號

windows查看系統版本號 winR,輸入cmd&#xff0c;確定&#xff0c;打開命令窗口&#xff0c;輸入msinfo32&#xff0c;注意要在英文狀態下輸入&#xff0c;回車。然后在彈出的窗口中就可以看到系統的具體版本號了。 winR,輸入cmd&#xff0c;確定&#xff0c;打開命令窗口&…
閱讀更多...
最新文章

Copyright @ 2022~2023