之前寫過一個jsp的檔案上傳,把檔案上傳的動作製成一個class。而現在要提供的這個範例就比較亂一點了,重點會在增加監控的ProgressListener及Ajax取得上傳進度之資料。
程式需要一個bean放入session裡,專門來存放目前上傳的bytes數及其它資訊,選擇好檔案按下上傳時,會開始上傳動作(使用iframe),並啟動Ajax與Server要求目前上傳進度狀況,把資訊顯示在browser上。
javascript相關
在前一篇[jQuery]利用animate來製作左右移動圖片展示器有利用jQuery來製作Animate效果,來製作左右移動圖片的照片或產品展示器,不過就只能針對同種分類或同性資的照片來做效果,如果有多種分類照片或產品就需要再做一份一樣的內容,這裡提供一個解決的方案,再做一次Animate,不過這次是上下移動來選擇不同列的圖片(照片)資料。
不同分類的圖片,利用不同的ul來分開,然後在ul的前面再加上一個Div來做上下移動的框架,左右移動則是利用ul這個tag,當移動到那一列的框架,把index記錄起來,如此左移及右移按鈕才可針對目前列來做移動。
ul及img都有title這個屬性,所以利用此屬性來當上方分類名稱。
效果截圖如下:
這個範例應該有很多人做過了,十分實用,如果把圖片縮小些,然後再加上燈箱的效果,應該可以拿來當展示產品或是照片等資訊,這個範例的發想是由男丁格爾的範例[jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播來做修改的。
jQuery-Animate-API用法animate({css內容},[速度(整數)],[easing(linear/easein)],[callback])
想法,外層利用一個Div框住要製作動畫的內容,設定css的position: relative;然後內層的資料都用position: absolute;來設定left及top的pixel,如此可以把元件浮在最外層Div框的相對位置。
需要二個按鈕,浮在左邊及右邊,設定動作向左移及向右移。
畫面如下:範例網址
img元件設定title屬性的話,那文字會顯示在圖片下方一條bar上