專利名稱：非標(biāo)準(zhǔn)上傳組件及非標(biāo)準(zhǔn)上傳組件多文件上傳方法
技術(shù)領(lǐng)域：
本發(fā)明涉及計(jì)算機(jī)通訊網(wǎng)絡(luò)中的網(wǎng)頁(yè)技術(shù)，特別涉及網(wǎng)頁(yè)中一種非標(biāo)準(zhǔn)上傳組件及非標(biāo)準(zhǔn)上傳組件多文件上傳方法。現(xiàn)在在網(wǎng)頁(yè)上，只能使用傳統(tǒng)的標(biāo)準(zhǔn)文件上傳組件。標(biāo)準(zhǔn)文件上傳組件是唯一可以將使用者個(gè)人電腦上的文件上傳到WEB服務(wù)器的接口組件。

圖1所示是現(xiàn)有標(biāo)準(zhǔn)上傳組件的外觀示意圖，一般包括輸入框和“瀏覽”按鈕。右邊的“提交”按鈕不是標(biāo)準(zhǔn)上傳組件的一部分，但是瀏覽器需要這個(gè)按鈕來(lái)將文件發(fā)送給服務(wù)器。當(dāng)用戶在頁(yè)面上點(diǎn)擊“瀏覽”按鈕后，就會(huì)出現(xiàn)圖2所示文件選擇框。用戶選擇了要上傳文件后輸入框中會(huì)顯示被選文件路徑，但是此時(shí)文件內(nèi)容還沒(méi)有提交到服務(wù)器，再點(diǎn)擊“提交”按鈕后，瀏覽器才會(huì)將被選文件內(nèi)容提交到服務(wù)器。這樣，需要上傳多個(gè)文件時(shí)，就要反復(fù)點(diǎn)擊“瀏覽”按鈕和“提交”按鈕，并等待瀏覽器上傳，浪費(fèi)用戶時(shí)間，效率低。
在做網(wǎng)頁(yè)時(shí)，WEB網(wǎng)頁(yè)提供者不能控制標(biāo)準(zhǔn)上傳組件的事件和屬性，比如不能在程序里直接將文件的路徑寫(xiě)入到左邊的輸入框里，因?yàn)檫@里涉及到用戶電腦的安全性問(wèn)題。這樣，WEB網(wǎng)頁(yè)提供者就無(wú)法個(gè)性化地定制一種標(biāo)準(zhǔn)文件上傳組件的外觀。同時(shí)，一個(gè)標(biāo)準(zhǔn)上傳組件的模式是固定的——由兩個(gè)組件組合在一起，WEB網(wǎng)頁(yè)提供者不能改變它的外觀和行為。如果需要在頁(yè)面上同時(shí)上傳多個(gè)文件，就需要在頁(yè)面上設(shè)置相應(yīng)多的標(biāo)準(zhǔn)上傳組件，就會(huì)出現(xiàn)圖3所示的頁(yè)面，導(dǎo)致頁(yè)面的擁擠，很不美觀。本發(fā)明的目的在于提供一種可更改上傳組件外觀、美觀的非標(biāo)準(zhǔn)上傳組件，以及一種在單個(gè)上傳組件接口下、可同時(shí)上傳多個(gè)文件的非標(biāo)準(zhǔn)上傳組件多文件上傳方法。
本發(fā)明解決其技術(shù)問(wèn)題所采用的技術(shù)方案是一種非標(biāo)準(zhǔn)上傳組件，包括一個(gè)標(biāo)準(zhǔn)上傳組件，保存在頁(yè)面第一個(gè)層的特定位置上；一個(gè)元素，保存在頁(yè)面第二個(gè)層的對(duì)應(yīng)位置上；其中，兩個(gè)層相互重疊，使得所述標(biāo)準(zhǔn)上傳組件位于所述元素的前端。
其中，第一個(gè)層完全透明。
網(wǎng)頁(yè)上的文字、鏈接，或圖片等都可以作為元素。
本發(fā)明還提供了一種非標(biāo)準(zhǔn)上傳組件多文件上傳方法，非標(biāo)準(zhǔn)上傳組件包括一個(gè)保存在頁(yè)面第一個(gè)層的特定位置上的標(biāo)準(zhǔn)上傳組件，以及一個(gè)保存在頁(yè)面第二個(gè)層的對(duì)應(yīng)位置上的元素；且兩個(gè)層相互重疊，使得所述標(biāo)準(zhǔn)上傳組件位于所述元素的前端；當(dāng)用戶利用所述非標(biāo)準(zhǔn)上傳組件完成一個(gè)上傳文件事件后，上傳管理模塊將當(dāng)前保存在第一個(gè)層里的標(biāo)準(zhǔn)上傳組件移動(dòng)到另一個(gè)位置，同時(shí)創(chuàng)建一個(gè)新的標(biāo)準(zhǔn)上傳組件，并保存在第一個(gè)層里所述特定位置上。
采用網(wǎng)頁(yè)圖像處理技術(shù)將第一個(gè)層透明化。
還包括上傳文件列表，受上傳管理模塊控制，保存在頁(yè)面上，用于將用戶所選擇的文件列表展示出來(lái)。
一個(gè)上傳文件事件包括步驟701，上傳管理模塊獲取要上傳的單個(gè)文件后，將文件添加到緩存中，并更新當(dāng)前已選擇要上傳文件列表；702，上傳管理模塊將當(dāng)前保存在第一個(gè)層里的標(biāo)準(zhǔn)上傳組件移動(dòng)到另一個(gè)位置，同時(shí)創(chuàng)建一個(gè)新的標(biāo)準(zhǔn)上傳組件，并保存在第一個(gè)層里所述特定位置上。
作為本發(fā)明的一個(gè)改進(jìn)，步驟701中，上傳管理模塊獲取要上傳的單個(gè)文件后，首先在緩存中搜索是否存在相同文件，如果沒(méi)有則將文件添加到緩存中，并更新當(dāng)前已選擇要上傳文件列表，否則通知用戶該文件已經(jīng)被添加。
當(dāng)用戶要對(duì)已經(jīng)選擇的上傳文件進(jìn)行刪除時(shí)，上傳管理模塊首先將緩存中的文件刪除，并更新當(dāng)前已選擇要上傳文件列表，然后移除頁(yè)面上對(duì)應(yīng)的標(biāo)準(zhǔn)上傳組件。
當(dāng)用戶選擇完全部要上傳的文件后，上傳所有文件到服務(wù)器。
本發(fā)明通過(guò)將存有標(biāo)準(zhǔn)上傳組件的第一個(gè)層透明化，并增加存有元素的第二個(gè)層，然后將兩個(gè)層疊加，制造出一個(gè)非標(biāo)準(zhǔn)上傳組件，使得WEB網(wǎng)頁(yè)提供者可以通過(guò)更改所述元素來(lái)更改上傳組件的外觀，制作個(gè)性化的上傳組件。本發(fā)明又提供了一種采用所述非標(biāo)準(zhǔn)上傳組件的多文件上傳方法，可以實(shí)現(xiàn)在只有單個(gè)上傳組件接口下，多文件同時(shí)上傳的方法，節(jié)省了使用者的時(shí)間，又避免了多文件上傳時(shí)導(dǎo)致頁(yè)面擁擠的現(xiàn)象，保證了頁(yè)面的美觀。圖1是現(xiàn)有標(biāo)準(zhǔn)上傳組件的外觀圖。
圖2是文件選擇框示意圖。
圖3是采用標(biāo)準(zhǔn)上傳組件多文件上傳示意圖。
圖4是本發(fā)明中透明度為50％時(shí)非標(biāo)準(zhǔn)上傳組件的實(shí)現(xiàn)效果圖。
圖5是本發(fā)明中透明度為80％時(shí)非標(biāo)準(zhǔn)上傳組件的實(shí)現(xiàn)效果圖。
圖6是本發(fā)明非標(biāo)準(zhǔn)上傳組件多文件上傳的完整效果圖。
圖7是本發(fā)明多文件上傳方法的流程圖。下面根據(jù)附圖和具體實(shí)施例對(duì)本發(fā)明作進(jìn)一步闡述。
首先介紹非標(biāo)準(zhǔn)上傳組件的制作方法WEB網(wǎng)頁(yè)提供者先用頁(yè)面上的兩個(gè)層，第一個(gè)層用于保存標(biāo)準(zhǔn)上傳組件，第二個(gè)層用于保存一個(gè)元素，且第一個(gè)層位于第二個(gè)層的前端。在頁(yè)面初始化時(shí)，上傳管理模塊動(dòng)態(tài)地創(chuàng)造一個(gè)標(biāo)準(zhǔn)上傳組件，并將此組件保存在第一個(gè)層的一個(gè)特定位置上，而所述元素被保存在第二個(gè)層的相應(yīng)位置上，兩個(gè)層通過(guò)指定位置的屬性來(lái)達(dá)到重疊，然后通過(guò)網(wǎng)頁(yè)圖像處理技術(shù)中的透明處理技術(shù)，比如Alpha Filter技術(shù)將第一個(gè)層完全透明化。這樣就完成了一個(gè)非標(biāo)準(zhǔn)上傳組件。圖4和圖5分別顯示了第一個(gè)層的透明度為50％和80％時(shí)非標(biāo)準(zhǔn)上傳組件的實(shí)現(xiàn)效果圖。
在用戶使用的過(guò)程中，由于保存有標(biāo)準(zhǔn)上傳組件的第一個(gè)層已經(jīng)被透明化，用戶看到的只是一個(gè)“元素”，而不是標(biāo)準(zhǔn)上傳組件。當(dāng)用戶點(diǎn)擊那個(gè)“元素”時(shí)，其實(shí)點(diǎn)擊的是第一個(gè)層里面的標(biāo)準(zhǔn)上傳組件，此時(shí)會(huì)觸發(fā)標(biāo)準(zhǔn)上傳組件的事件，然后用戶就可以選擇文件進(jìn)行上傳了。上述元素可以是頁(yè)面上的一個(gè)圖片，或是一個(gè)超連接，甚至是一段文字，WEB網(wǎng)頁(yè)提供者可自行選擇定制。
為實(shí)現(xiàn)非標(biāo)準(zhǔn)上傳組件的多文件上傳，頁(yè)面中還包括上傳文件列表和與每個(gè)以選擇上傳文件對(duì)應(yīng)的刪除功能按鈕。上述上傳文件列表和刪除功能按鈕都受上傳管理模塊控制，保存在頁(yè)面上。上傳文件列表用于將用戶所選擇的文件列表展示出來(lái)，刪除功能按鈕用于將已經(jīng)選擇需要上傳的文件從上傳文件列表和緩存中刪除。完整效果圖如圖6所示，可以看到第一個(gè)層被完全透明化。
首先，用戶在頁(yè)面上找到代表非標(biāo)準(zhǔn)上傳組件的“元素”，點(diǎn)擊添加一個(gè)要上傳的文件。如圖7第2步，為避免重復(fù)選擇，上傳管理模塊讀取該文件后，首先在緩存中搜索是否存在相同文件，如果沒(méi)有則將文件添加到緩存中(圖7第3步)，并更新上傳文件列表(圖7第4步)，否則通知用戶該文件已經(jīng)被添加。添加文件后，上傳文件列表顯示出該用戶所選擇上傳的文件的路徑。然后，上傳管理模塊將當(dāng)前保存在第一個(gè)層里的標(biāo)準(zhǔn)上傳組件移動(dòng)到另一個(gè)位置，同時(shí)創(chuàng)建一個(gè)新的標(biāo)準(zhǔn)上傳組件，并保存在第一個(gè)層里所述特定位置上(圖7第5步)。然后用戶又可以再次選擇下一個(gè)需要上傳的文件(圖7第6步)。
這樣，每當(dāng)上傳管理模塊確認(rèn)用戶所選擇的一個(gè)文件后，標(biāo)準(zhǔn)上傳組件就會(huì)被移位，移到一個(gè)頁(yè)面上看不到的地方，再動(dòng)態(tài)創(chuàng)建一個(gè)新的標(biāo)準(zhǔn)上傳組件，然后放到舊的標(biāo)準(zhǔn)上傳組件的位置，也就是圖4中“附件”圖片上方的層里面，這樣就可以實(shí)現(xiàn)只需一個(gè)非標(biāo)準(zhǔn)上傳組件，實(shí)現(xiàn)多個(gè)文件選擇并上傳的方法。
如果用戶因故需要對(duì)已經(jīng)選擇的上傳文件進(jìn)行刪除，只要點(diǎn)擊上傳文件列表中該文件對(duì)應(yīng)的刪除功能按鈕即可。上傳管理模塊得到刪除命令后，通過(guò)搜索，確定用戶需要?jiǎng)h除哪一個(gè)被選擇了的文件，然后在緩存中刪除，并刷新上傳文件列表。最后，在頁(yè)面第一個(gè)層上移除對(duì)應(yīng)的已被隱藏的標(biāo)準(zhǔn)上傳組件，確保被用戶刪除的文件在提交時(shí)不會(huì)被服務(wù)器保存。
當(dāng)用戶選擇完全部要上傳的文件后，就可以點(diǎn)擊提交按鈕上傳所有文件到服務(wù)器(圖7第7步)。服務(wù)器通過(guò)讀取頁(yè)面上的已被隱藏的標(biāo)準(zhǔn)上傳組件的值，來(lái)確定將用戶電腦上相應(yīng)的文件保存到服務(wù)器。
以上所述僅為本發(fā)明的優(yōu)選實(shí)施例而已，并不用于限制本發(fā)明，對(duì)于本領(lǐng)域的技術(shù)人員來(lái)說(shuō)，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的權(quán)利要求范圍之內(nèi)。
權(quán)利要求
1.一種非標(biāo)準(zhǔn)上傳組件，其特征在于包括一個(gè)標(biāo)準(zhǔn)上傳組件，保存在頁(yè)面第一個(gè)層的特定位置上；一個(gè)元素，保存在頁(yè)面第二個(gè)層的對(duì)應(yīng)位置上；其中，兩個(gè)層相互重疊，使得所述標(biāo)準(zhǔn)上傳組件位于所述元素的前端。
2.根據(jù)權(quán)利要求1所述的非標(biāo)準(zhǔn)上傳組件，起特征在于第一個(gè)層完全透明。
3.根據(jù)權(quán)利要求1所述的非標(biāo)準(zhǔn)上傳組件多文件上傳方法，其特征在于網(wǎng)頁(yè)上的文字、鏈接，或圖片等都可以作為元素。
4.一種非標(biāo)準(zhǔn)上傳組件多文件上傳方法，其特征在于非標(biāo)準(zhǔn)上傳組件包括一個(gè)保存在頁(yè)面第一個(gè)層的特定位置上的標(biāo)準(zhǔn)上傳組件，以及一個(gè)保存在頁(yè)面第二個(gè)層的對(duì)應(yīng)位置上的元素；且兩個(gè)層相互重疊，使得所述標(biāo)準(zhǔn)上傳組件位于所述元素的前端；當(dāng)用戶利用所述非標(biāo)準(zhǔn)上傳組件完成一個(gè)上傳文件事件后，上傳管理模塊將當(dāng)前保存在第一個(gè)層里的標(biāo)準(zhǔn)上傳組件移動(dòng)到另一個(gè)位置，同時(shí)創(chuàng)建一個(gè)新的標(biāo)準(zhǔn)上傳組件，并保存在第一個(gè)層里所述特定位置上。
5.根據(jù)權(quán)利要求4所述的非標(biāo)準(zhǔn)上傳組件多文件上傳方法，其特征在于采用網(wǎng)頁(yè)圖像處理技術(shù)將第一個(gè)層透明化。
6.根據(jù)權(quán)利要求4所述的非標(biāo)準(zhǔn)上傳組件多文件上傳方法，其特征在于還包括上傳文件列表，受上傳管理模塊控制，保存在頁(yè)面上，用于將用戶所選擇的文件列表展示出來(lái)。
7.根據(jù)權(quán)利要求4所述的非標(biāo)準(zhǔn)上傳組件多文件上傳方法，其特征在于一個(gè)上傳文件事件包括步驟
701，上傳管理模塊獲取要上傳的單個(gè)文件后，將文件添加到緩存中，并更新當(dāng)前已選擇要上傳文件列表；702，上傳管理模塊將當(dāng)前保存在第一個(gè)層里的標(biāo)準(zhǔn)上傳組件移動(dòng)到另一個(gè)位置，同時(shí)創(chuàng)建一個(gè)新的標(biāo)準(zhǔn)上傳組件，并保存在第一個(gè)層里所述特定位置上。
8.根據(jù)權(quán)利要求7所述的非標(biāo)準(zhǔn)上傳組件多文件上傳方法，其特征在于步驟701中，上傳管理模塊獲取要上傳的單個(gè)文件后，首先在緩存中搜索是否存在相同文件，如果沒(méi)有則將文件添加到緩存中，并更新當(dāng)前已選擇要上傳文件列表，否則通知用戶該文件已經(jīng)被添加。
9.根據(jù)權(quán)利要求4所述的非標(biāo)準(zhǔn)上傳組件多文件上傳方法，其特征在于當(dāng)用戶要對(duì)已經(jīng)選擇的上傳文件進(jìn)行刪除時(shí)，上傳管理模塊首先將緩存中的文件刪除，并更新當(dāng)前已選擇要上傳文件列表，然后移除頁(yè)面上對(duì)應(yīng)的標(biāo)準(zhǔn)上傳組件。
10.根據(jù)權(quán)利要求4所述的非標(biāo)準(zhǔn)上傳組件多文件上傳方法，其特征在于當(dāng)用戶選擇完全部要上傳的文件后，上傳所有文件到服務(wù)器。
全文摘要
本發(fā)明涉及計(jì)算機(jī)通訊網(wǎng)絡(luò)中的網(wǎng)頁(yè)技術(shù)，特別涉及網(wǎng)頁(yè)中一種非標(biāo)準(zhǔn)上傳組件及非標(biāo)準(zhǔn)上傳組件多文件上傳方法。一種非標(biāo)準(zhǔn)上傳組件，包括一個(gè)標(biāo)準(zhǔn)上傳組件，保存在頁(yè)面第一個(gè)層的特定位置上；一個(gè)元素，保存在頁(yè)面第二個(gè)層的對(duì)應(yīng)位置上；其中，兩個(gè)層相互重疊，使得所述標(biāo)準(zhǔn)上傳組件位于所述元素的前端。本發(fā)明通過(guò)制造出一個(gè)非標(biāo)準(zhǔn)上傳組件，使得WEB網(wǎng)頁(yè)提供者可以通過(guò)更改所述元素來(lái)更改上傳組件的外觀，制作個(gè)性化的上傳組件。本發(fā)明又提供了一種采用所述非標(biāo)準(zhǔn)上傳組件的多文件上傳方法，可以實(shí)現(xiàn)在只有單個(gè)上傳組件接口下，多文件同時(shí)上傳的方法，節(jié)省了使用者的時(shí)間，又避免了多文件上傳時(shí)導(dǎo)致頁(yè)面擁擠的現(xiàn)象，保證了頁(yè)面的美觀。
文檔編號(hào)H04L29/00GK1940919SQ20051003752
公開(kāi)日2007年4月4日 申請(qǐng)日期2005年9月27日 優(yōu)先權(quán)日2005年9月27日
發(fā)明者陳斌 申請(qǐng)人:騰訊科技(深圳)有限公司