專利名稱：一種基于Tapestry框架的圖片實(shí)時(shí)預(yù)覽方法
技術(shù)領(lǐng)域：
本發(fā)明涉及計(jì)算機(jī)領(lǐng)域，特別是涉及一種基于Testry框架的圖片實(shí)時(shí)預(yù)覽方法。
技術(shù)背景
圖片上傳預(yù)覽是一種在圖片上傳之前對(duì)圖片進(jìn)行本地預(yù)覽的技術(shù)，使用該技術(shù)。 使用戶選擇圖片后能立即查看圖片，提高用戶體驗(yàn)。但隨著瀏覽器安全性的提高，以及許多不同內(nèi)核的瀏覽器出現(xiàn)，要實(shí)現(xiàn)圖片上傳預(yù)覽也越來越困難。
圖片預(yù)覽主要包括兩個(gè)部分從file表單控件獲取圖像數(shù)據(jù)，根據(jù)數(shù)據(jù)顯示預(yù)覽圖像。
程序的file和img屬性就是用來保存file控件和顯示預(yù)覽圖像的容器的，而img 還必須是img元素。
現(xiàn)在的互聯(lián)網(wǎng)應(yīng)用中主要有兩種實(shí)現(xiàn)方式，一種是通過后臺(tái)調(diào)用，這種方式對(duì)服務(wù)器會(huì)造成一定的壓力。另一種是通過JavMcript來實(shí)現(xiàn)，但這種方式對(duì)于瀏覽器的兼容性比較差，導(dǎo)致圖片預(yù)覽失敗或者上傳不成功，給用戶體驗(yàn)帶來不便，而且如果出現(xiàn)網(wǎng)絡(luò)斷線以及用戶誤操作，會(huì)導(dǎo)致之前上傳的圖片信息丟失要重新進(jìn)行圖片上傳，降低用戶體驗(yàn)。
所以，需要提供一種新的圖片上傳預(yù)覽方法，可以在實(shí)現(xiàn)圖片上傳及預(yù)覽的同時(shí)， 給予更好用戶體驗(yàn)，節(jié)省服務(wù)器資源的浪費(fèi)，降低服務(wù)器的壓力。發(fā)明內(nèi)容
本發(fā)明的目的在于提供一種基于Tapestry框架的圖片實(shí)時(shí)預(yù)覽方法，可以在實(shí)現(xiàn)圖片上傳及預(yù)覽，給予更好用戶體驗(yàn)，節(jié)省服務(wù)器資源的浪費(fèi)，降低服務(wù)器的壓力，同時(shí)也解決了現(xiàn)有技術(shù)中多瀏覽器兼容的問題。
為解決以上技術(shù)問題，本發(fā)明提供一種基于Tapestry框架的圖片實(shí)時(shí)預(yù)覽方法， 包括
客戶端取得用戶上傳的圖片及圖片信息，傳遞到文件服務(wù)器；
文件服務(wù)器將圖片存儲(chǔ)到文件系統(tǒng)，回傳路徑給服務(wù)端；
服務(wù)端根據(jù)返回地址的路徑，把頁面圖片的地址欄更改成文件系統(tǒng)的中地址欄， 在客戶端實(shí)現(xiàn)圖片預(yù)覽。
進(jìn)一步地，客戶端取得用戶上傳的圖片及圖片信息，傳遞到文件服務(wù)器；具體包括
在客戶端頁面組件中添加上傳控件，設(shè)置上傳控件的上傳參數(shù)及配置調(diào)用服務(wù)地址；
在圖片上傳過程中直接對(duì)圖片操作，使圖片與所操作的對(duì)象進(jìn)行關(guān)聯(lián)，動(dòng)態(tài)顯示圖片信息；
客戶端取得用戶上傳的圖片，通過上傳控件取得上傳圖片信息，傳遞到文件服務(wù)ο
進(jìn)一步地，文件服務(wù)器將圖片存儲(chǔ)到文件系統(tǒng)，回傳路徑給服務(wù)端；具體包括
文件服務(wù)器的文件系統(tǒng)中配置文件上傳服務(wù)，在文件系統(tǒng)中對(duì)上傳的圖片進(jìn)行存儲(chǔ)；
圖片上傳后，文件服務(wù)器把圖片在文件系統(tǒng)中的路徑返回到服務(wù)端。
進(jìn)一步地，服務(wù)端根據(jù)返回的地址路徑，把頁面圖片的地址欄更改成文件系統(tǒng)的中地址欄，在客戶端實(shí)現(xiàn)圖片預(yù)覽；具體包括服務(wù)端根據(jù)返回的地址路徑，通過 JavaScript修改客戶端中img的src路徑，把頁面圖片的地址欄更改成文件系統(tǒng)的中地址欄，在客戶端實(shí)現(xiàn)圖片預(yù)覽。
進(jìn)一步地，所述Tapestry框架是Tapestry5. 1框架。
與現(xiàn)有技術(shù)相比，本發(fā)明提供的一種基于T5的圖片實(shí)時(shí)預(yù)覽方法，是采用基于 Tapestry5. 1框架，根據(jù)Tapestry框架的特點(diǎn)，把圖片上傳及預(yù)覽功能寫成一個(gè)頁面組件， 實(shí)現(xiàn)圖片上傳及預(yù)覽功能，給予更好的用戶體驗(yàn)；基于Tapestry框架實(shí)現(xiàn)圖片預(yù)覽的同時(shí)，已經(jīng)將圖片存儲(chǔ)到獨(dú)立的文件系統(tǒng)或獨(dú)立的圖片空間中，對(duì)于當(dāng)前服務(wù)器的不會(huì)產(chǎn)生影響，不會(huì)給服務(wù)器增加壓力負(fù)擔(dān)，降低了服務(wù)器的壓力，節(jié)省了服務(wù)器資源的浪費(fèi)；此外， 由于使用圖片有效地與頁面結(jié)合在一起，在不同的瀏覽器中，都能正確的展示圖片的預(yù)覽效果，速度快，穩(wěn)定性有顯著的提高，不會(huì)有兼容性的影響，解決了現(xiàn)有技術(shù)中多瀏覽器兼容的問題，也克服了因?yàn)樯蟼髦苯訉?duì)服務(wù)端進(jìn)行操作，而給服務(wù)器增加壓力的問題。此外， 在其他的以Tapestry為框架的方案中，只需修改上傳調(diào)用的服務(wù)地址，就可以重復(fù)利用上述頁面組件來顯示圖片預(yù)覽功能，具有很好的通用性。


此處所說明的附圖用來提供對(duì)本發(fā)明的進(jìn)一步理解，構(gòu)成本發(fā)明的一部分，本發(fā)明的示意性實(shí)施例及其說明用于解釋本發(fā)明，并不構(gòu)成對(duì)本發(fā)明的不當(dāng)限定。在附圖中
圖1是本發(fā)明提供一種基于T5的圖片實(shí)時(shí)預(yù)覽方法的示意圖。
具體實(shí)施方式
為了使本發(fā)明所要解決的技術(shù)問題、技術(shù)方案及有益效果更加清楚、明白，以下結(jié)合附圖和實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
Tapestry框架是一個(gè)位于java servlet容器和Tapestry應(yīng)用程序之間的層。 Tapestry不是一個(gè)獨(dú)立運(yùn)行的服務(wù)器；它是一個(gè)servlet的擴(kuò)展，它運(yùn)行于servlet容器(例如Tomcat)或包含servlet容器的應(yīng)用服務(wù)器中(如Jbose，Websphere，或者 WebLogic) 0 Tapestry應(yīng)用其實(shí)是由一系列頁面組成，而每個(gè)頁面是由可以復(fù)用的組件構(gòu)成。
本發(fā)明提供一種基于Tapestry框架的圖片實(shí)時(shí)預(yù)覽方法，特別是基于 TapeStry5. 1框架的圖片實(shí)時(shí)預(yù)覽方法在Tapestry框架下，在圖片上傳過程中，直接對(duì)圖片進(jìn)行操作，使圖片與所操作的對(duì)象進(jìn)行關(guān)聯(lián)，并且根據(jù)圖片的大小，動(dòng)態(tài)的顯示圖片的格式以及像素長寬等圖片屬性，并將圖片上傳到獨(dú)立的文件存儲(chǔ)系統(tǒng)中，上傳成功之后返回圖片的瀏覽地址，再通過JavMcript修改圖片的src路徑來實(shí)現(xiàn)圖片的預(yù)覽功能。
如圖1所示，本發(fā)明提供一種基于Tapestry框架的圖片實(shí)時(shí)預(yù)覽方法，包括
1、客戶端取得用戶上傳的圖片及圖片信息，傳遞到獨(dú)立的文件服務(wù)器；具體包括
在客戶端頁面組件中，結(jié)合flash插件，在頁面上添加上傳控件，配置調(diào)用服務(wù)地址，根據(jù)需求具體配置上傳控件的上傳參數(shù)，改變配置屬性；
在圖片上傳過程中，直接對(duì)圖片進(jìn)行操作，使圖片與所操作的對(duì)象進(jìn)行關(guān)聯(lián)，并且根據(jù)圖片的大小，動(dòng)態(tài)的顯示圖片的格式以及像素長寬等圖片信息，以及顯示上傳過程；
客戶端取得用戶上傳的圖片，通過上傳控件取得上傳圖片信息，傳遞到獨(dú)立的文件服務(wù)器。
2、文件服務(wù)器將圖片存儲(chǔ)到文件系統(tǒng)，回傳路徑給服務(wù)端；具體包括
文件服務(wù)器包括文件系統(tǒng)，在文件系統(tǒng)中配置文件上傳服務(wù)，根據(jù)業(yè)務(wù)規(guī)則編寫上傳圖片的文件代碼，在文件系統(tǒng)中對(duì)上傳的圖片進(jìn)行存儲(chǔ)；
圖片上傳成功后，文件服務(wù)器調(diào)用回寫方法，把所上傳的圖片在文件系統(tǒng)中的路徑返回到服務(wù)端。
3、服務(wù)端根據(jù)返回的地址路徑，把頁面圖片的地址欄更改成文件系統(tǒng)的中地址欄，在客戶端實(shí)現(xiàn)圖片預(yù)覽；具體包括
服務(wù)端根據(jù)返回的地址路徑，通過JavMcript修改客戶端中img的src路徑，把頁面圖片的地址欄更改成文件系統(tǒng)的中地址欄。這樣就可以在客戶端實(shí)現(xiàn)圖片預(yù)覽的工作。頁面刷新之后，之前上傳的圖片也會(huì)在頁面上保留不會(huì)丟失。
下面將結(jié)合實(shí)施例來詳細(xì)說明本發(fā)明的實(shí)施方式，借此對(duì)本發(fā)明如何應(yīng)用技術(shù)手段來解決技術(shù)問題，并達(dá)成技術(shù)效果的實(shí)現(xiàn)過程能充分理解并據(jù)以實(shí)施。
現(xiàn)在以淘寶大學(xué)圖片上傳作為例子，具體說明本發(fā)明如何實(shí)現(xiàn)圖片的實(shí)時(shí)預(yù)覽。
1、在客戶端的頁面組件中引入圖片上傳及預(yù)覽組件；
2、點(diǎn)擊上傳按鈕，選擇所要上傳的圖片，圖片上傳過程中，直接對(duì)圖片進(jìn)行操作， 使圖片與所操作的對(duì)象進(jìn)行關(guān)聯(lián)，并且根據(jù)圖片的大小，動(dòng)態(tài)的顯示圖片的格式以及像素長寬等圖片信息，以及顯示上傳過程；
3、上傳完成后，客戶端取得用戶上傳的圖片及通過控件取得上傳圖片信息，傳遞到獨(dú)立的文件服務(wù)器；
4、文件服務(wù)器將圖片存儲(chǔ)到文件系統(tǒng)，將圖片的存儲(chǔ)路徑回傳給服務(wù)端；
5、服務(wù)端根據(jù)返回地址的路徑，把頁面圖片的地址欄更改成文件系統(tǒng)的中地址欄，在客戶端的左邊顯示框中顯示所上傳的圖片，達(dá)到預(yù)覽效果。
本發(fā)明提供的一種基于Tapestry框架的圖片實(shí)時(shí)預(yù)覽方法，是采用基于 TapeStry5. 1框架，根據(jù)Tapestry框架的特點(diǎn)，把圖片上傳及預(yù)覽功能寫成一個(gè)頁面組件， 實(shí)現(xiàn)圖片上傳及預(yù)覽功能，給予更好的用戶體驗(yàn)；基于Tapestry框架實(shí)現(xiàn)圖片預(yù)覽的同時(shí)，已經(jīng)將圖片存儲(chǔ)到獨(dú)立的文件系統(tǒng)或獨(dú)立的圖片空間中，對(duì)于當(dāng)前服務(wù)器的不會(huì)產(chǎn)生影響，不會(huì)給服務(wù)器增加壓力負(fù)擔(dān)，降低了服務(wù)器的壓力，節(jié)省了服務(wù)器資源的浪費(fèi)；此外， 由于使用圖片有效地與頁面結(jié)合在一起，在不同的瀏覽器中，都能正確的展示圖片的預(yù)覽效果，速度快，穩(wěn)定性有顯著的提高，不會(huì)有兼容性的影響，解決了現(xiàn)有技術(shù)中多瀏覽器兼容的問題，也克服了因?yàn)樯蟼髦苯訉?duì)服務(wù)端進(jìn)行操作，而給服務(wù)器增加壓力的問題。此外，在其他的以Tapestry為框架的方案中，只需修改上傳調(diào)用的服務(wù)地址，就可以重復(fù)利用上述頁面組件來顯示圖片預(yù)覽功能，具有很好的通用性。
上述說明示出并描述了本發(fā)明的一個(gè)優(yōu)選實(shí)施例，但如前所述，應(yīng)當(dāng)理解本發(fā)明并非局限于本文所披露的形式，不應(yīng)看作是對(duì)其他實(shí)施例的排除，而可用于各種其他組合、 修改和環(huán)境，并能夠在本文所述發(fā)明構(gòu)想范圍內(nèi)，通過上述教導(dǎo)或相關(guān)領(lǐng)域的技術(shù)或知識(shí)進(jìn)行改動(dòng)。而本領(lǐng)域人員所進(jìn)行的改動(dòng)和變化不脫離本發(fā)明的精神和范圍，則都應(yīng)在本發(fā)明所附權(quán)利要求的保護(hù)范圍內(nèi)。
權(quán)利要求
1.一種基于Tapestry框架的圖片實(shí)時(shí)預(yù)覽方法，其特征在于，包括客戶端取得用戶上傳的圖片及圖片信息，傳遞到文件服務(wù)器；文件服務(wù)器將圖片存儲(chǔ)到文件系統(tǒng)，回傳路徑給服務(wù)端；服務(wù)端根據(jù)返回地址的路徑，把頁面圖片的地址欄更改成文件系統(tǒng)的中地址欄，在客戶端實(shí)現(xiàn)圖片預(yù)覽。
2.如權(quán)利要求1所述的方法，其特征在于，客戶端取得用戶上傳的圖片及圖片信息，傳遞到文件服務(wù)器；具體包括在客戶端頁面組件中添加上傳控件，設(shè)置上傳控件的上傳參數(shù)及配置調(diào)用服務(wù)地址；在圖片上傳過程中直接對(duì)圖片操作，使圖片與所操作的對(duì)象進(jìn)行關(guān)聯(lián)，動(dòng)態(tài)顯示圖片 fn息；客戶端取得用戶上傳的圖片，通過上傳控件取得上傳圖片信息，傳遞到文件服務(wù)器。
3.如權(quán)利要求1所述的方法，其特征在于，文件服務(wù)器將圖片存儲(chǔ)到文件系統(tǒng)，回傳路徑給服務(wù)端；具體包括文件服務(wù)器的文件系統(tǒng)中配置文件上傳服務(wù)，在文件系統(tǒng)中對(duì)上傳的圖片進(jìn)行存儲(chǔ)；圖片上傳后，文件服務(wù)器把圖片在文件系統(tǒng)中的路徑返回到服務(wù)端。
4.如權(quán)利要求1所述的方法，其特征在于，服務(wù)端根據(jù)返回的地址路徑，把頁面圖片的地址欄更改成文件系統(tǒng)的中地址欄，在客戶端實(shí)現(xiàn)圖片預(yù)覽；具體包括服務(wù)端根據(jù)返回的地址路徑，通過JavMcript修改客戶端中img的src路徑，把頁面圖片的地址欄更改成文件系統(tǒng)的中地址欄，在客戶端實(shí)現(xiàn)圖片預(yù)覽。
5.如權(quán)利要求1至4任一項(xiàng)所述的方法，其特征在于，所述Tapestry框架是 Tapestry5. 1 框架。
全文摘要
本發(fā)明提供一種基于Tapestry框架的圖片實(shí)時(shí)預(yù)覽方法，包括客戶端取得用戶上傳的圖片及圖片信息，傳遞到文件服務(wù)器；文件服務(wù)器將圖片存儲(chǔ)到文件系統(tǒng)，回傳路徑給服務(wù)端；服務(wù)端根據(jù)返回地址的路徑，把頁面圖片的地址欄更改成文件系統(tǒng)的中地址欄，在客戶端實(shí)現(xiàn)圖片預(yù)覽。通過本發(fā)明提供基于Tapestry框架的圖片實(shí)時(shí)預(yù)覽方法，可以在實(shí)現(xiàn)圖片上傳及預(yù)覽，給予更好用戶體驗(yàn)，節(jié)省服務(wù)器資源的浪費(fèi)，降低服務(wù)器的壓力，同時(shí)也解決了現(xiàn)有技術(shù)中多瀏覽器兼容的問題。
文檔編號(hào)G06F17/30GK102508864SQ20111030503
公開日2012年6月20日 申請(qǐng)日期2011年10月10日 優(yōu)先權(quán)日2011年10月10日
發(fā)明者付章華, 李斌, 潘俊, 祝明遠(yuǎn), 肖飛秋 申請(qǐng)人:深圳中興網(wǎng)信科技有限公司