jsp檔案上傳並利用Ajax製作ProgressBar監控上傳進度

之前寫過一個jsp的檔案上傳,把檔案上傳的動作製成一個class。而現在要提供的這個範例就比較亂一點了,重點會在增加監控的ProgressListener及Ajax取得上傳進度之資料。

程式需要一個bean放入session裡,專門來存放目前上傳的bytes數及其它資訊,選擇好檔案按下上傳時,會開始上傳動作(使用iframe),並啟動Ajax與Server要求目前上傳進度狀況,把資訊顯示在browser上。

FileUpload2.jpg




這個專案需要使用二個額外的jar framework,分別為Apache FiluploadApache common io,而Fileupload需要1.2以上版本才支援ProgressListener。

存入上傳資訊的bean

監控的ProgressListener

在上傳時,會一直呼叫ProgressListener的update函數。

上傳畫面html

onsubmit時順便啟動Ajax動作來監控上傳進度,而ProgressBar則是由取得的資料利用css的width來設定目前上傳量。

Ajax的javascript內容

reuqest取得資料後,如果還沒上傳完成,則再利用setTimeout,一秒後重新再要求資料。

上傳動作

因為在form表單時已經設定target為iframe,所以並不會把目前頁面帶離,只會在iframe裡進行上傳動作,而iframe本身設定為看不到。

取得監控的上傳資料

利用ajax要求這個程式來取得目前上傳的進度

執行畫面,一開始狀況及按下確認後畫面

FileUpload1.jpg

FileUpload2.jpg

原始碼下載

Xuite WebHd|

12 comments on “jsp檔案上傳並利用Ajax製作ProgressBar監控上傳進度

  1. 写的真好

    最近有个项目正好能用上了

    但是,有个问题啊
    session.setAttribute("status",status);
    这里,resin报错了,说status 一定要序列化哦。

    可能的话,加我q聊聊吧。。。二九601899

  2. 另外 我執行時候有發生一個問題

    第一次上傳 progress bar 不會動 但檔案會上傳

    refresh一次後 就都沒有問題

    請問這個要怎麼解決呢?

      • @yku, 這個問題我也有看到, 好像傳40MB以上的檔案時, Ajax那邊的UploadStatus.jsp會變成另一個session, 以致於getAttribute回傳都為null, 所以status bean就沒有資料, progressbar就沒有資料可以進一步處理, 但檔案還是可上傳成功,
        如果是較小Size的檔案, 就不會出現這個問題, session也會跟做上傳動作的jsp是同一個session.
        還不知道為什麼@@....

        • @Pati, 抱歉現在才回你
          以你的描述其實看不出來是什麼問題
          基本上session的控制在web container上,不太可能發生這種狀況
          是否您的browser有裝自動清除cookie或記憶體功能呢?
          再check您的程式看看,是否有動作reset session to null
          還是您可以提供您的程式碼呢?

          • @yku, 感謝回覆, 你用大檔案可以複製我看到的現象嗎?下面是我的囉哩囉嗦, 呵~
            這個狀況,我用你的範例跟自己改的例子(不透過jsp調用自訂的Servlet Class, 直接利用HttpServlet的doGet/dePost),都會出現, 以下是用你提供的範例做的觀察,
            環境: Windows7 + Apache Tomcat/7.0.25
            Browser: IE 9/Chrome 22/Firefox 15

            1. 在第一次使用傳檔時, 選檔案大一點,40MB以上, 現象就會出現,
            在你的例子就會跑到out.println("未有上傳資料");
            傳檔的部份是沒問題的,還是可以成功跑完, 但就Progress狀態有問題,是null,
            這時到Tomcat的App Manager看, Application的session會出現兩個, 兩個創建時間幾乎同時,
            但其中一個的被使用時間(Used Time)為0, 也就是未被使用,
            這時再去使用傳檔, 一切看起來就都會正常, Progress狀態也有出現, 而且Progress狀態應該是用到剛剛那個沒有被用到的session, 因為Used Time有值了, 大概就是傳檔花費的時間, 而另一個第一次傳檔用到的session, 這次及之後也就沒有更新。

            2. 而當上傳檔案大小40MB以下時, 不會有這個問題,
            這時到Tomcat的App Manaer看, Application的session只有一個, 一切看來正常。

          • @yku, 感謝回覆, 你用大檔案可以複製我看到的現象嗎?下面是我的囉哩囉嗦, 呵~
            這個狀況,我用你的範例跟自己改的例子(不透過jsp調用自訂的Servlet Class, 直接利用HttpServlet的doGet/dePost),都會出現,以下是用你提供的範例做的觀察,
            環境: Windows7 + Apache Tomcat/7.0.25
            Browser: IE 9/Chrome 22/Firefox 15

            1. 在第一次使用傳檔時, 選檔案大一點,40MB以上, 現象就會出現,
            在你的例子就會跑到out.println("未有上傳資料");
            傳檔的部份是沒問題的,還是可以成功跑完, 但就Progress狀態有問題,是null,
            這時到Tomcat的App Manager看, Application的session會出現兩個, 兩個創建時間幾乎同時,
            但其中一個的被使用時間(Used Time)為0, 也就是未被使用,
            這時再去使用傳檔, 一切看起來就都會正常, Progress狀態也有出現, 而且Progress狀態應該是用到剛剛那個沒有被用到的session, 因為Used Time有值了, 大概就是傳檔花費的時間, 而另一個第一次傳檔用到的session, 這次及之後也就沒有更新。

            2. 而當上傳檔案大小40MB以下時, 不會有這個問題,
            這時到Tomcat的App Manaer看, Application的session只有一個, 一切看來正常。

1 Pings/Trackbacks 於 "jsp檔案上傳並利用Ajax製作ProgressBar監控上傳進度"

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

*