一種帶圖片網(wǎng)頁(yè)數(shù)據(jù)上傳的方法和系統(tǒng)的制作方法
【專(zhuān)利摘要】本發(fā)明提供一種帶圖片網(wǎng)頁(yè)數(shù)據(jù)提交的方法，包括如下步驟：（1）用戶(hù)選擇好相關(guān)的圖片后，觸發(fā)圖片數(shù)據(jù)提交事件，并將該圖片信息上傳服務(wù)器并存儲(chǔ)到數(shù)據(jù)庫(kù)的一個(gè)圖片臨時(shí)表中；（2）用戶(hù)在同一個(gè)頁(yè)面輸入相應(yīng)的文字信息后，點(diǎn)擊一個(gè)提交按鈕以觸發(fā)頁(yè)面總體提交，并將該文字信息上傳服務(wù)器并存儲(chǔ)到數(shù)據(jù)庫(kù)的一個(gè)文字臨時(shí)表中；（3）匯總步驟（1）提交的圖片信息和步驟（2）提交的文字信息，創(chuàng)建一條新記錄，作為一個(gè)新記錄存儲(chǔ)到相應(yīng)的表中；所述的圖片或文字臨時(shí)表，至少包括一個(gè)用戶(hù)唯一碼標(biāo)識(shí)、圖片存儲(chǔ)信息等內(nèi)容。本發(fā)明實(shí)現(xiàn)同一頁(yè)面下文字與圖片的分別提交，同時(shí)能有效防止無(wú)效記錄的產(chǎn)生，增進(jìn)計(jì)算機(jī)的主機(jī)裝置的使用效率。
【專(zhuān)利說(shuō)明】一種帶圖片網(wǎng)頁(yè)數(shù)據(jù)上傳的方法和系統(tǒng)
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及用計(jì)算機(jī)處理技術(shù)，特別是涉及一種帶圖片數(shù)據(jù)上傳的方法及系統(tǒng)。
[0002]
【背景技術(shù)】
[0003]隨著計(jì)算機(jī)網(wǎng)絡(luò)的快速發(fā)展，越來(lái)越多的圖片或數(shù)據(jù)經(jīng)由網(wǎng)絡(luò)傳輸；例如網(wǎng)頁(yè)進(jìn)行內(nèi)容發(fā)布。特別地，對(duì)于形如電子商務(wù)等領(lǐng)域來(lái)說(shuō)，考慮的不僅僅是如何把這些商務(wù)信息廣告出去，更需要增加這些廣告的直觀性、趣味性等來(lái)吸引眼球，以進(jìn)一步促進(jìn)銷(xiāo)量和聚集人氣，所以用于進(jìn)行內(nèi)容發(fā)布的網(wǎng)頁(yè)通常需要圖文并茂，生動(dòng)有趣。
[0004]而Html中，包括圖片在內(nèi)的文件上傳，一般通過(guò)表單元素〈input type = file來(lái)實(shí)現(xiàn)。參見(jiàn)圖1和圖2，通過(guò)使用這個(gè)元素，瀏覽器會(huì)自動(dòng)生成一個(gè)輸入框和一個(gè)按鈕，輸入框可供用戶(hù)填寫(xiě)本地的文件名和路徑名，按鈕可以讓瀏覽器打開(kāi)一個(gè)文件選擇框供用戶(hù)選擇文件，然后再點(diǎn)擊一個(gè)上傳按鈕后將文件上傳服務(wù)器。同理，在.net環(huán)境，可以通過(guò)服務(wù)器控件<asp:FileUpload實(shí)現(xiàn)文件的上傳。
[0005]然而，上述的提交方式存在提交范圍限定為整個(gè)頁(yè)面內(nèi)的全部輸入?yún)^(qū)域的情況，而某些應(yīng)用會(huì)希望實(shí)現(xiàn)圖片與文字的分別上傳。解決的方法有，一是采用兩個(gè)頁(yè)面進(jìn)行內(nèi)容發(fā)布，第一個(gè)頁(yè)面負(fù)責(zé)文字發(fā)布，完成后進(jìn)入第二步的圖片上傳。但是這種方法比較繁雜，用戶(hù)體驗(yàn)感不好；二是采用在同一個(gè)頁(yè)面分別提交的方法，即允許先提交圖片部分，并在相應(yīng)的數(shù)據(jù)庫(kù)添加一條記錄，然后提交文字部分進(jìn)行記錄補(bǔ)齊。這種方法存在一點(diǎn)不足，即當(dāng)提交圖片部分后，可能由于重新提交新圖片或文字部分沒(méi)有及時(shí)提交，造成后臺(tái)數(shù)據(jù)庫(kù)產(chǎn)生一條無(wú)效的記錄，從而影響數(shù)據(jù)庫(kù)的使用效率。
[0006]再如，中國(guó)專(zhuān)利申請(qǐng)?zhí)枮?012101284016公開(kāi)的“網(wǎng)頁(yè)數(shù)據(jù)提交方法和裝置”它涉及網(wǎng)頁(yè)頁(yè)面被設(shè)置為兩個(gè)以上的提交區(qū)域，該方法包括:當(dāng)檢測(cè)到區(qū)域提交標(biāo)簽包含的區(qū)域提交事件被觸發(fā)時(shí)，獲取區(qū)域提交標(biāo)簽包含的一個(gè)或一個(gè)以上區(qū)域標(biāo)識(shí)，區(qū)域標(biāo)識(shí)用于表示用戶(hù)選擇的提交區(qū)域；根據(jù)區(qū)域標(biāo)識(shí)，獲取區(qū)域標(biāo)識(shí)對(duì)應(yīng)的提交區(qū)域的頁(yè)面數(shù)據(jù)；向服務(wù)器發(fā)送獲取到的頁(yè)面數(shù)據(jù)。從而無(wú)需提交整個(gè)網(wǎng)頁(yè)頁(yè)面數(shù)據(jù)，而只是提交了區(qū)域標(biāo)識(shí)對(duì)應(yīng)的提交區(qū)域的頁(yè)面數(shù)據(jù)，進(jìn)一步地提高了網(wǎng)頁(yè)開(kāi)發(fā)者的開(kāi)發(fā)自由度。但是，該發(fā)明存在有以下的不足:1)沒(méi)有考慮.net環(huán)境下服務(wù)器控件〈aSp:FileUpl0ad在選擇上傳圖片時(shí)的自觸發(fā)功能，這時(shí)專(zhuān)門(mén)的區(qū)域設(shè)置已沒(méi)有必要；2)同一區(qū)域重提交或沒(méi)有及時(shí)提交時(shí)，該專(zhuān)利會(huì)造成的后臺(tái)數(shù)據(jù)庫(kù)產(chǎn)生一條無(wú)效記錄。
[0007]
【發(fā)明內(nèi)容】

[0008]本發(fā)明的目的是提供一種帶圖片網(wǎng)頁(yè)數(shù)據(jù)提交的方法，實(shí)現(xiàn)同一頁(yè)面下文字與圖片的分別提交，同時(shí)能有效防止無(wú)效記錄的產(chǎn)生，增進(jìn)計(jì)算機(jī)的主機(jī)裝置的使用效率。
[0009]實(shí)現(xiàn)上述目的，本發(fā)明采用如下技術(shù)方案:一種帶圖片網(wǎng)頁(yè)數(shù)據(jù)提交的方法，其特征在于，包括如下步驟:
(1)用戶(hù)選擇好相關(guān)的圖片后，觸發(fā)圖片數(shù)據(jù)提交事件，并將該圖片信息上傳服務(wù)器并存儲(chǔ)到數(shù)據(jù)庫(kù)的一個(gè)圖片臨時(shí)表中；
(2)用戶(hù)在同一個(gè)頁(yè)面輸入相應(yīng)的文字信息后，點(diǎn)擊一個(gè)提交按鈕以觸發(fā)頁(yè)面總體提交，并將該文字信息上傳服務(wù)器并存儲(chǔ)到數(shù)據(jù)庫(kù)的一個(gè)文字臨時(shí)表中；
(3)匯總步驟(I)提交的圖片信息和步驟(2)提交的文字信息，創(chuàng)建一條新記錄，作為一個(gè)新記錄存儲(chǔ)到相應(yīng)的表中；
所述的圖片或文字臨時(shí)表，至少包括一個(gè)用戶(hù)唯一碼標(biāo)識(shí)、圖片存儲(chǔ)信息等內(nèi)容。
[0010]進(jìn)一步，所述的數(shù)據(jù)提交可以在瀏覽器端進(jìn)行有效校驗(yàn)，包括圖片格式、大小、文字長(zhǎng)度等校驗(yàn)。
[0011]本發(fā)明還提供一種網(wǎng)頁(yè)數(shù)據(jù)提交的系統(tǒng)，其特征在于，包括依次通信連接的數(shù)據(jù)獲取模塊、數(shù)據(jù)校驗(yàn)?zāi)K、數(shù)據(jù)發(fā)送模塊、圖片數(shù)據(jù)存儲(chǔ)模塊和數(shù)據(jù)匯總存儲(chǔ)模塊；
數(shù)據(jù)獲取模塊，用于檢測(cè)各數(shù)據(jù)提交事件被觸發(fā)時(shí)，獲取相應(yīng)提交數(shù)據(jù)的網(wǎng)面數(shù)據(jù)； 數(shù)據(jù)校驗(yàn)?zāi)K，用于校驗(yàn)上傳數(shù)據(jù)的格式、大小、長(zhǎng)度等是否滿(mǎn)足事先約定的要求； 數(shù)據(jù)發(fā)送模塊，用于向服務(wù)器發(fā)送獲取到的頁(yè)面數(shù)據(jù)；
圖片數(shù)據(jù)存儲(chǔ)模塊，用于將上傳的圖片信息存儲(chǔ)到一個(gè)臨時(shí)表中；
數(shù)據(jù)匯總存儲(chǔ)模塊，用于匯總提交的文字信息，以及數(shù)據(jù)庫(kù)中圖片臨時(shí)表中的圖片信息，并作為一個(gè)新記錄存儲(chǔ)到相應(yīng)的表中。
[0012]相比現(xiàn)有技術(shù)，本發(fā)明具有如下有益效果:
本發(fā)明充分利用現(xiàn)有的圖像上傳控件，實(shí)現(xiàn)同一頁(yè)面下文字與圖片的分別提交，避免不必要的翻頁(yè)操作；同時(shí)運(yùn)用臨時(shí)表存儲(chǔ)數(shù)據(jù)技術(shù)，能有效防止無(wú)效記錄的產(chǎn)生，從而增進(jìn)計(jì)算機(jī)的主機(jī)裝置的使用效率，提高網(wǎng)頁(yè)開(kāi)發(fā)人員的自由度，最大程度地方便用戶(hù)的操作體驗(yàn)。
[0013]本發(fā)明所述網(wǎng)頁(yè)數(shù)據(jù)提交的系統(tǒng)，功能強(qiáng)大，已應(yīng)用一些電子商務(wù)后臺(tái)管理領(lǐng)域，取得了預(yù)期的效果。
[0014]【專(zhuān)利附圖】

【附圖說(shuō)明】
[0015]圖1為現(xiàn)有技術(shù)的aspx代碼示意圖；
圖2為圖1的aspx代碼在瀏覽器顯示頁(yè)面效果示意圖；
圖3是本發(fā)明一個(gè)實(shí)施例提供的帶圖片網(wǎng)頁(yè)數(shù)據(jù)提交的流程圖；
圖4是本發(fā)明一個(gè)實(shí)施例提供的帶圖片網(wǎng)頁(yè)數(shù)據(jù)提交的裝置結(jié)構(gòu)示意圖。
[0016]【具體實(shí)施方式】
[0017]為了更清楚地說(shuō)明本發(fā)明技術(shù)方案，下面以C#程序?yàn)槔?，結(jié)合附圖和實(shí)施對(duì)本發(fā)明作進(jìn)一步詳細(xì)說(shuō)明。本發(fā)明涉及的帶圖片網(wǎng)頁(yè)數(shù)據(jù)提交的方法，通過(guò)在計(jì)算機(jī)上運(yùn)行的軟件形式來(lái)實(shí)現(xiàn)。
[0018]參見(jiàn)圖3，一種帶圖片網(wǎng)頁(yè)數(shù)據(jù)提交的方法，該方法包括:當(dāng)用戶(hù)選擇好相關(guān)的圖片后，自動(dòng)觸發(fā)圖片數(shù)據(jù)提交事件，并將該圖片信息上傳服務(wù)器并存儲(chǔ)到數(shù)據(jù)庫(kù)的一個(gè)臨時(shí)表中；當(dāng)用戶(hù)在同一個(gè)頁(yè)面輸入相應(yīng)的文字信息后，點(diǎn)擊一個(gè)提交按鈕以觸發(fā)頁(yè)面總體提交；然后匯總提交的文字信息，以及數(shù)據(jù)庫(kù)中圖片臨時(shí)表中的圖片信息，作為一個(gè)新記錄存儲(chǔ)到相應(yīng)的表中。
[0019]上述的圖片臨時(shí)表，至少可包括一個(gè)用戶(hù)唯一碼標(biāo)識(shí)，圖片存儲(chǔ)信息等內(nèi)容。
[0020]上述的數(shù)據(jù)提交可以在瀏覽器端進(jìn)行有效校驗(yàn)，包括圖片格式、大小、文字長(zhǎng)度等校驗(yàn)。
[0021]這里的用戶(hù)可以是網(wǎng)頁(yè)開(kāi)發(fā)者，也可以是普通的終端用戶(hù)。上述網(wǎng)頁(yè)數(shù)據(jù)提交的裝置可以包括臺(tái)式計(jì)算機(jī)，筆記本，手機(jī)，PDA，平臺(tái)電腦，電子書(shū)等。
[0022]參見(jiàn)圖4，一種網(wǎng)頁(yè)數(shù)據(jù)提交的系統(tǒng)，包括依次通信連接的數(shù)據(jù)獲取模塊、數(shù)據(jù)校驗(yàn)?zāi)K、數(shù)據(jù)發(fā)送模塊、圖片數(shù)據(jù)存儲(chǔ)模塊和數(shù)據(jù)匯總存儲(chǔ)模塊；
數(shù)據(jù)獲取模塊，用于檢測(cè)各數(shù)據(jù)提交事件被觸發(fā)時(shí)，獲取相應(yīng)提交數(shù)據(jù)的網(wǎng)面數(shù)據(jù)； 數(shù)據(jù)校驗(yàn)?zāi)K，用于校驗(yàn)上傳數(shù)據(jù)的格式、大小、長(zhǎng)度等是否滿(mǎn)足事先約定的要求； 數(shù)據(jù)發(fā)送模塊，用于向服務(wù)器發(fā)送獲取到的頁(yè)面數(shù)據(jù)；
圖片數(shù)據(jù)存儲(chǔ)模塊，用于將上傳的圖片信息存儲(chǔ)到一個(gè)臨時(shí)表中；
數(shù)據(jù)匯總存儲(chǔ)模塊，用于匯總提交的文字信息，以及數(shù)據(jù)庫(kù)中圖片臨時(shí)表中的圖片信息，并作為一個(gè)新記錄存儲(chǔ)到相應(yīng)的表中。
[0023]在本發(fā)明的各個(gè)實(shí)施例中，對(duì)網(wǎng)頁(yè)中的需要進(jìn)行數(shù)據(jù)提交的范圍，自動(dòng)區(qū)分為文字和圖片提交兩個(gè)部分，分別進(jìn)行處理。
[0024]一、圖片上傳的過(guò)程:
例如，可以通過(guò)服務(wù)器控件<asp:FileUpload控制圖片的上傳處理,或者通過(guò)把html控件〈input type = file設(shè)置為服務(wù)器控件實(shí)現(xiàn)圖片上傳。其步驟如下:
1、通過(guò)控件〈asp:FileUpload或〈input type = file runat=’’ server” 右邊的瀏覽按鈕，選擇需要上傳的圖片，當(dāng)控件判斷框內(nèi)發(fā)生變化時(shí)，觸發(fā)onChange事件，從而調(diào)用javascript 內(nèi)的事件處理函數(shù) CheckFileTypeIphone O ；
2、圖片上傳觸發(fā)及校驗(yàn):
函數(shù)CheckFileTypeIphone O有兩個(gè)功能:
(1)校驗(yàn)功能，即校驗(yàn)選擇的文件是否是所需要的圖片格式，大小是否符合要求等；
(2)通過(guò)javascript 代碼:document.getElementByld(’btnUpdateTelPic’
).click O ,從而觸發(fā)隱藏按鈕btnUpdatelphonePic的OnClick事件，并由后臺(tái)btnUpdateIphonePic_Click事件處理圖片的提交事宜。
[0025]3、圖片的上傳及臨時(shí)存儲(chǔ):
后臺(tái)btnUpdateIphonePic_Click()事件也有兩個(gè)功能:
(I)上傳圖片。可以將圖片轉(zhuǎn)化為二進(jìn)制存儲(chǔ)到臨時(shí)表中，或者直接將圖片上傳到服務(wù)器的指定目錄下，并將路徑等信息存儲(chǔ)到數(shù)據(jù)庫(kù)中，以保證用戶(hù)通過(guò)這些信息可能正確獲取上傳的圖片。
[0026](2)存儲(chǔ)圖片信息。首先，創(chuàng)建一個(gè)圖片臨時(shí)存儲(chǔ)表，其中至少包括唯一標(biāo)識(shí)，圖片信息，其中如果是二進(jìn)制存儲(chǔ)，可以采用Image類(lèi)型字段；如果圖片直接存儲(chǔ)到服務(wù)器的，可以采用varchar類(lèi)型存儲(chǔ)圖片在服務(wù)器中的路徑。一般地，標(biāo)識(shí)可以采用登陸UserID來(lái)區(qū)分，主要是考慮到每個(gè)登陸用戶(hù)在給定的時(shí)間只能上傳一張圖片。然后，將上傳圖片的信息存儲(chǔ)到這個(gè)臨時(shí)表中，這樣保證每個(gè)在線用戶(hù)只能在臨時(shí)表中保存一張圖片。
[0027]二、文字信息上傳及匯總:
1、信息錄入及提交。參見(jiàn)圖2，在標(biāo)題或簡(jiǎn)介域中錄入相關(guān)的信息。錄入完成后，點(diǎn)擊按鈕 btnSubmit,觸發(fā) OnClick 事件 btnSubmit_Click O。
[0028]2、數(shù)據(jù)校驗(yàn)?？梢栽诤笈_(tái)的Page_Load事件中添加以下的代碼: btnSubmit.Attributes.Add(〃onclick〃，〃return confirm() ;,r)
于是，后臺(tái)處理OnClick事件btnSubmit_Click O之前，需要在客戶(hù)端調(diào)用一段Javascript函數(shù)confirmO ,以進(jìn)行數(shù)據(jù)校驗(yàn)，如判斷數(shù)據(jù)是否為空，長(zhǎng)度是否符合要求，電話號(hào)碼格式，Email格式，數(shù)字格式，貨幣格式、時(shí)間格式等。完成后，執(zhí)行后臺(tái)btnSubmit_Click O 事件。
[0029]3、數(shù)據(jù)提交及匯總存儲(chǔ)。執(zhí)行后臺(tái)btnSubmit_Click()事件，通過(guò)關(guān)聯(lián)登陸UserID方式，采用Sql方式，匯總圖片臨時(shí)表的圖片信息，將網(wǎng)頁(yè)中的圖片及文字信息作為一條新記錄Insert到相關(guān)表中。
[0030]實(shí)施例中所述的校驗(yàn)，可以采用客戶(hù)端校驗(yàn)方式，或服務(wù)器終校驗(yàn)方式。
[0031]實(shí)施例中所述的圖片上傳，可以是單個(gè)圖片上傳，也可以是多個(gè)圖片上傳。只是當(dāng)多個(gè)圖片上傳時(shí)，可按照單個(gè)圖片上傳方式，做相似的處理。
[0032]以上所述僅為本發(fā)明的較佳實(shí)施例而已，并不用以限制本發(fā)明。本發(fā)明可以用于電子商務(wù)領(lǐng)域團(tuán)購(gòu)等信息的發(fā)布，也可應(yīng)用在其它領(lǐng)域，只要在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。
【權(quán)利要求】
1.一種帶圖片網(wǎng)頁(yè)數(shù)據(jù)提交的方法，其特征在于，包括如下步驟: (1)用戶(hù)選擇好相關(guān)的圖片后，觸發(fā)圖片數(shù)據(jù)提交事件，并將該圖片信息上傳服務(wù)器并存儲(chǔ)到數(shù)據(jù)庫(kù)的一個(gè)圖片臨時(shí)表中； (2)用戶(hù)在同一個(gè)頁(yè)面輸入相應(yīng)的文字信息后，點(diǎn)擊一個(gè)提交按鈕以觸發(fā)頁(yè)面總體提交，并將該文字信息上傳服務(wù)器并存儲(chǔ)到數(shù)據(jù)庫(kù)的一個(gè)文字臨時(shí)表中； (3)匯總步驟(I)提交的圖片信息和步驟(2)提交的文字信息，創(chuàng)建一條新記錄，作為一個(gè)新記錄存儲(chǔ)到相應(yīng)的表中； 所述的圖片或文字臨時(shí)表，至少包括一個(gè)用戶(hù)唯一碼標(biāo)識(shí)、圖片存儲(chǔ)信息等內(nèi)容。
2.根據(jù)權(quán)利要求1所述帶圖片網(wǎng)頁(yè)數(shù)據(jù)提交的方法，其特征在于，所述的數(shù)據(jù)提交可以在瀏覽器端進(jìn)行有效校驗(yàn)，包括圖片格式、大小、文字長(zhǎng)度等校驗(yàn)。
3.—種網(wǎng)頁(yè)數(shù)據(jù)提交的系統(tǒng)，其特征在于，包括依次通信連接的數(shù)據(jù)獲取模塊、數(shù)據(jù)校驗(yàn)?zāi)K、數(shù)據(jù)發(fā)送模塊、圖片數(shù)據(jù)存儲(chǔ)模塊和數(shù)據(jù)匯總存儲(chǔ)模塊； 數(shù)據(jù)獲取模塊，用于檢測(cè)各數(shù)據(jù)提交事件被觸發(fā)時(shí)，獲取相應(yīng)提交數(shù)據(jù)的網(wǎng)面數(shù)據(jù)； 數(shù)據(jù)校驗(yàn)?zāi)K，用于校驗(yàn)上傳數(shù)據(jù)的格式、大小、長(zhǎng)度等是否滿(mǎn)足事先約定的要求； 數(shù)據(jù)發(fā)送模塊，用于向服務(wù)器發(fā)送獲取到的頁(yè)面數(shù)據(jù)； 圖片數(shù)據(jù)存儲(chǔ)模塊，用于將上傳的圖片信息存儲(chǔ)到一個(gè)臨時(shí)表中； 數(shù)據(jù)匯總存儲(chǔ)模塊，用于匯總提交的文字信息，以及數(shù)據(jù)庫(kù)中圖片臨時(shí)表中的圖片信息，并作為一個(gè)新記錄存儲(chǔ)到相應(yīng)的表中。
【文檔編號(hào)】H04L29/08GK103617043SQ201310658134
【公開(kāi)日】2014年3月5日 申請(qǐng)日期:2013年12月9日 優(yōu)先權(quán)日:2013年12月9日
【發(fā)明者】陳金玉 申請(qǐng)人:重慶大學(xué)