網(wǎng)絡(luò)中上傳文件的方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本申請涉及計(jì)算機(jī)和互聯(lián)網(wǎng)數(shù)據(jù)處理技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)絡(luò)中上傳文件的方法和裝置。
【背景技術(shù)】
[0002]目前，隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)絡(luò)逐漸成為人們獲取信息的重要來源，特別是在互聯(lián)網(wǎng)進(jìn)入Web2.0時(shí)代后，用戶既是網(wǎng)站內(nèi)容的瀏覽者，也是網(wǎng)站內(nèi)容的制造者。用戶可以參與創(chuàng)造的內(nèi)容包括文字如發(fā)表文章、發(fā)帖等，用戶也可以上傳圖片等內(nèi)容。
[0003]目前的網(wǎng)絡(luò)處理系統(tǒng)主要分為web前端處理系統(tǒng)和后臺處理系統(tǒng)。其中Web前端，本文中簡稱前端，就是指人機(jī)交互端。前端具體可以通過專門的客戶端(Client)實(shí)現(xiàn)，也可以通過網(wǎng)絡(luò)瀏覽器(Browser)來訪問服務(wù)器的方式實(shí)現(xiàn)，即可以采用瀏覽器/服務(wù)器(B/S)結(jié)構(gòu)，也可以采用客戶端/服務(wù)器(C/S)結(jié)構(gòu)。
[0004]所述C/S結(jié)構(gòu)是能充分發(fā)揮客戶端PC的處理能力，很多工作可以在客戶端處理后再提交給服務(wù)器，例如對于上傳文件的功能，如果采用C/S結(jié)構(gòu)，可以實(shí)現(xiàn)自定義的用戶界面(UI)，用戶界面可以設(shè)計(jì)得優(yōu)美和個(gè)性化、人性化。
[0005]但是，C/S結(jié)構(gòu)的缺點(diǎn)也很明顯，就是客戶端需要安裝專用的客戶端軟件。首先涉及到安裝的工作量，其次任何一臺電腦出問題，如病毒、硬件損壞，都需要進(jìn)行安裝或維護(hù)。還有，系統(tǒng)軟件升級時(shí)，每一臺客戶機(jī)需要重新安裝，其維護(hù)和升級成本非常高。而B/S結(jié)構(gòu)則沒有上述缺點(diǎn)。
[0006]B/S結(jié)構(gòu)最大的優(yōu)點(diǎn)就是可以在任何地方進(jìn)行操作而不用安裝任何專門的軟件，只要有一臺能上網(wǎng)的智能終端就能使用，客戶端零維護(hù)成本，系統(tǒng)的擴(kuò)展也非常容易。
[0007]目前B/S結(jié)構(gòu)的網(wǎng)絡(luò)系統(tǒng)在Web前端實(shí)現(xiàn)文件上傳主流的解決方案如下:
[0008](I)Flash控件實(shí)現(xiàn)文件上傳。
[0009](2)超文本標(biāo)記語言(HTML)提供的應(yīng)用編程接口(API)實(shí)現(xiàn)文件上傳功能。
[0010]但是，現(xiàn)有技術(shù)的上述兩種方案存在以下缺點(diǎn):
[0011 ] Flash控件實(shí)現(xiàn)上傳方案比較成熟，主要基于Flash技術(shù)，可以系統(tǒng)開發(fā)方可以自定義設(shè)計(jì)UI，可以實(shí)現(xiàn)比較豐富的功能，但是此方案存在跨域的問題，無法實(shí)現(xiàn)跨域的文件上傳。所述跨域就是需要跨越域名操作。
[0012]采用HTML提供的新的API實(shí)現(xiàn)的文件上傳方案，雖然不存在跨域問題，但是其網(wǎng)頁默認(rèn)的文件上傳UI形式固定、死板，如圖1所示，其中只有一個(gè)簡單常規(guī)的文件上傳按鈕101，以及簡要的說明文字102，無法對這種文件上傳UI進(jìn)行有針對性、內(nèi)容更加豐富的自定義設(shè)置；同時(shí)，這種技術(shù)還存在瀏覽器兼容問題，特別是IElO以下的版本不支持自定義的圖片上傳用戶界面。具體的，如HTML4和HTML5中file類型的input標(biāo)簽樣式在不同的瀏覽器中表現(xiàn)形式不盡相同，而且在同一個(gè)瀏覽器中它不能通過CSS樣式來實(shí)現(xiàn)自定義UI的目的。

【發(fā)明內(nèi)容】

[0013]有鑒于此，本發(fā)明的主要目的是提供一種網(wǎng)絡(luò)文件上傳方法和裝置，可跨域?qū)崿F(xiàn)自定義的文件上傳UI，并提高對瀏覽器的兼容性。
[0014]本發(fā)明的技術(shù)方案是這樣實(shí)現(xiàn)的:
[0015]一種網(wǎng)絡(luò)中上傳文件的方法，包括:
[0016]提供自定義的文件上傳用戶界面，其中，所述自定義的文件上傳用戶界面包括自定義的文件上傳按鈕；
[0017]在所述自定義的文件上傳用戶界面的上層設(shè)置網(wǎng)頁默認(rèn)的文件上傳用戶界面，并將該網(wǎng)頁默認(rèn)的文件上傳用戶界面設(shè)置成可絕對移動(dòng)的透明狀態(tài)；
[0018]監(jiān)測鼠標(biāo)與所述文件上傳用戶界面中的自定義文件上傳按鈕的相對位置，在鼠標(biāo)進(jìn)入所述自定義文件上傳按鈕的范圍時(shí)，實(shí)時(shí)獲取鼠標(biāo)位置信息，并將所述網(wǎng)頁默認(rèn)的文件上傳用戶界面中的上傳按鈕的位置修改為所述實(shí)時(shí)獲取的鼠標(biāo)位置；
[0019]在網(wǎng)頁默認(rèn)的文件上傳用戶界面中的上傳按鈕被鼠標(biāo)觸發(fā)后，觸發(fā)文件表單選擇和上傳操作。
[0020]一種網(wǎng)絡(luò)中上傳文件的裝置，包括:
[0021]自定義界面模塊，用于提供自定義的文件上傳用戶界面，其中，所述自定義的文件上傳用戶界面包括自定義的文件上傳按鈕展示自定義的文件上傳用戶界面UI，其中包括自定義的文件上傳按鈕；
[0022]默認(rèn)界面模塊，用于在所述自定義的文件上傳UI用戶界面的上層設(shè)置網(wǎng)頁默認(rèn)的文件上傳UI用戶界面，并將該網(wǎng)頁默認(rèn)的文件上傳UI用戶界面設(shè)置成可絕對移動(dòng)的透明狀態(tài)；
[0023]跟隨鼠標(biāo)模塊，用于監(jiān)測鼠標(biāo)與所述文件上傳UI用戶界面中的自定義文件上傳按鈕的相對位置，在鼠標(biāo)進(jìn)入所述自定義文件上傳按鈕的范圍時(shí)，實(shí)時(shí)獲取鼠標(biāo)位置信息，實(shí)時(shí)地將網(wǎng)頁默認(rèn)的文件上傳UI用戶界面中的上傳按鈕的位置修改為所述實(shí)時(shí)獲取的鼠標(biāo)位置；
[0024]上傳模塊，用于在網(wǎng)頁默認(rèn)的文件上傳UI用戶界面中的上傳按鈕被鼠標(biāo)觸發(fā)后，觸發(fā)文件表單選擇和上傳操作。
[0025]與現(xiàn)有技術(shù)相比，本發(fā)明會首先展示自定義的文件上傳用戶界面(UI)，其中包括自定義的文件上傳按鈕，該自定義的文件上傳UI設(shè)置在網(wǎng)頁默認(rèn)的文件上傳UI中的上傳按鈕的下一層，而在所述自定義的文件上傳UI的上層設(shè)置網(wǎng)頁默認(rèn)的文件上傳UI，并將該網(wǎng)頁默認(rèn)的文件上傳UI設(shè)置成可絕對移動(dòng)的透明狀態(tài)；然后監(jiān)測鼠標(biāo)與所述文件上傳UI中的自定義文件上傳按鈕的相對位置，在鼠標(biāo)進(jìn)入所述自定義文件上傳按鈕的范圍時(shí)，即鼠標(biāo)落在該自定義文件上傳按鈕上時(shí)，實(shí)時(shí)獲取鼠標(biāo)位置信息，實(shí)時(shí)地將網(wǎng)頁默認(rèn)的文件上傳UI中的上傳按鈕的位置修改為所述實(shí)時(shí)獲取的鼠標(biāo)位置。這樣就可以實(shí)現(xiàn)只要鼠標(biāo)在自定義文件上傳按鈕的范圍內(nèi)移動(dòng)，網(wǎng)頁默認(rèn)的文件上傳UI中的上傳按鈕就跟隨鼠標(biāo)移動(dòng)，一旦鼠標(biāo)發(fā)生觸發(fā)點(diǎn)擊的操作，由于網(wǎng)頁默認(rèn)的文件上傳UI在所述自定義的文件上傳按鈕的上一層，實(shí)際上會直接觸發(fā)該網(wǎng)頁默認(rèn)的文件上傳UI中的上傳按鈕，進(jìn)而觸發(fā)文件表單選擇和上傳操作。也就是說，用戶看到的是自定義的文件上傳UI，但點(diǎn)擊的是網(wǎng)頁默認(rèn)的文件上傳UI中的上傳按鈕。因此采用本發(fā)明，由于沒有使用flash，避免了跨域問題；而且將網(wǎng)頁默認(rèn)的文件上傳UI設(shè)置為透明狀態(tài)，用戶只能看到自定義的文件上傳UI，即時(shí)瀏覽器版本不同導(dǎo)致網(wǎng)頁默認(rèn)的文件上傳UI顯示不一致，對于用戶來講也看不到這種不一致，因此巧妙地解決了瀏覽器的兼容問題，提高了對瀏覽器的兼容性。
【附圖說明】
[0026]圖1為目前網(wǎng)頁默認(rèn)的文件上傳UI的一種示意圖；
[0027]圖2為本發(fā)明所述的一種網(wǎng)絡(luò)中上傳文件的方法的流程圖；
[0028]圖3為本發(fā)明所述在網(wǎng)頁默認(rèn)的文件上傳UI的下一層展示的自定義的文件上傳UI的TK意圖；
[0029]圖4為本發(fā)明所述網(wǎng)頁默認(rèn)的文件上傳按鈕跟隨鼠標(biāo)的一種示意圖；
[0030]圖5為本發(fā)明所述的一種網(wǎng)絡(luò)中上傳文件的方法的有一種實(shí)施例的流程圖；
[0031]圖6為本發(fā)明所述一種網(wǎng)絡(luò)中上傳文件的裝置的組成示意圖；
[0032]圖7為本發(fā)明所述又一種網(wǎng)絡(luò)中上傳文件的裝置的組成示意圖。
【具體實(shí)施方式】
[0033]下面結(jié)合附圖及具體實(shí)施例對本發(fā)明再作進(jìn)一步詳細(xì)的說明。
[0034]本發(fā)明的方法和裝置應(yīng)用在網(wǎng)絡(luò)系統(tǒng)的前端，即人機(jī)交互端。通常的前端技術(shù)具體可以通過專門的客戶端(Client)實(shí)現(xiàn)，也可以通過網(wǎng)絡(luò)瀏覽器(Browser)來訪問服務(wù)器的方式實(shí)現(xiàn)，即可以采用瀏覽器/服務(wù)器(B/S)結(jié)構(gòu)，也可以采用客戶端/服務(wù)器(C/S)結(jié)構(gòu)。
[0035]本發(fā)明主要應(yīng)用在采用B/S結(jié)構(gòu)的網(wǎng)絡(luò)系統(tǒng)前端，但是，如果采用C/S結(jié)構(gòu)的網(wǎng)絡(luò)系統(tǒng)前端中，其客戶端利用瀏覽器內(nèi)核來展示瀏覽網(wǎng)頁，則本發(fā)明的方案同樣適用于這種C/S結(jié)構(gòu)的網(wǎng)絡(luò)系統(tǒng)前端中。
[0036]圖2為本發(fā)明所述的一種網(wǎng)絡(luò)中上傳文件的方法的流程圖。參見圖2，該方法主要包括:
[0037]步驟201、提供自定義的文件上傳用戶界面，其中，所述自定義的文件上傳用戶界面包括自定義的文件上傳按鈕。
[0038]如