本發(fā)明涉及計(jì)算機(jī)應(yīng)用技術(shù)領(lǐng)域，特別涉及一種調(diào)用上傳組件的裝置、方法和系統(tǒng)。

背景技術(shù)：

近年來(lái)隨著前端應(yīng)用的發(fā)展，出現(xiàn)了各式各樣的上傳組件供應(yīng)用開(kāi)發(fā)者選擇，在應(yīng)用開(kāi)發(fā)者選定上傳組件后，需要針對(duì)自己開(kāi)發(fā)的應(yīng)用自定義上傳組件的各種參數(shù)，對(duì)于需要多個(gè)上傳組件的應(yīng)用來(lái)說(shuō)，應(yīng)用開(kāi)發(fā)者需要為每一個(gè)上傳組件配置各種參數(shù)，由于配置的參數(shù)中常常包含有一些復(fù)雜度較高的參數(shù)，需要消耗應(yīng)用開(kāi)發(fā)者較長(zhǎng)的時(shí)間為每一個(gè)上傳組件配置參數(shù)，造成應(yīng)用開(kāi)發(fā)的效率較低。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明實(shí)施例提供了一種調(diào)用上傳組件的裝置、方法和系統(tǒng)，能夠有效的提高應(yīng)用開(kāi)發(fā)的效率。

一種調(diào)用上傳組件的裝置，與外設(shè)的至少一種上傳組件相連，包括：封裝構(gòu)建單元、交互單元和接口，其中，

所述封裝構(gòu)建單元，用于確定外設(shè)的每一種上傳組件對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值，對(duì)所述默認(rèn)參數(shù)和默認(rèn)值進(jìn)行封裝；

所述交互單元，用于確定調(diào)變參數(shù)，接收輸入的所述調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值，并發(fā)送所述調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值；

所述接口，用于加載所述封裝構(gòu)建單元封裝的默認(rèn)參數(shù)和對(duì)應(yīng)的默認(rèn)值，接收并解析所述交互單元發(fā)送的所述調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值，根據(jù)所述默認(rèn)值和解析出的參數(shù)值，調(diào)用外設(shè)的目標(biāo)上傳組件。

優(yōu)選地，上述裝置進(jìn)一步包括：顯示單元，其中，

所述封裝構(gòu)建單元，進(jìn)一步用于封裝至少一種文件上傳的方式和樣式，為所述封裝的至少一種文件上傳的方式和樣式中每一種文件上傳的方式和樣式構(gòu)建對(duì)應(yīng)的html元素屬性；

所述交互單元，進(jìn)一步用于接收輸入的至少一個(gè)目標(biāo)html元素屬性值，并發(fā)送所述至少一個(gè)目標(biāo)html元素屬性值；

所述接口，進(jìn)一步用于接收所述交互單元發(fā)送的至少一個(gè)目標(biāo)html元素屬性值，解析所述至少一個(gè)目標(biāo)html元素屬性值，根據(jù)所述至少一個(gè)目標(biāo)html元素屬性值，在所述封裝構(gòu)建單元封裝的至少一種文件上傳的方式和樣式中，選定文件上傳的目標(biāo)方式和樣式，并將所述文件上傳的目標(biāo)方式和樣式發(fā)送給所述外設(shè)的目標(biāo)上傳組件；

所述顯示單元，用于根據(jù)所述外設(shè)的目標(biāo)上傳組件和所述接口接收到的文件上傳的目標(biāo)方式和樣式，顯示文件上傳的對(duì)話框和文件上傳的按鈕。

優(yōu)選地，所述封裝構(gòu)建單元，用于將外設(shè)的每一種上傳組件對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值封裝到對(duì)應(yīng)的webuploader.js文件中，并存儲(chǔ)所述webuploader.js文件；

所述交互單元，用于確定文件上傳的服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)表為調(diào)變參數(shù)，接收所述文件上傳的服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)表對(duì)應(yīng)的參數(shù)值；

所述接口，進(jìn)一步用于設(shè)置每一個(gè)webuploader.js文件對(duì)應(yīng)的引入路徑，根據(jù)所述引入路徑，加載webuploader.js文件。

優(yōu)選地，所述封裝構(gòu)建單元，用于封裝單文件上傳方式和樣式、多文件上傳方式和樣式、單圖片上傳方式和樣式及多圖片上傳方式和樣式，其中，單文件上傳方式和樣式/單圖片上傳方式和樣式，包括：在元素的右側(cè)添加“選擇”按鈕，當(dāng)選中文件后添加“上傳”、“刪除”按鈕并隱藏“選擇”按鈕，并顯示上傳進(jìn)度；多文件上傳方式和樣式/多圖片上傳方式和樣式，包括：為元素添加“添加文件”按鈕、“開(kāi)始上傳”按鈕和“取消”按鈕，通過(guò)“添加文件”按鈕添加至少一個(gè)文件，并顯示上傳進(jìn)度。

一種調(diào)用上傳組件的方法，連接至少一種上傳組件，確定每一種上傳組件對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值，對(duì)所述默認(rèn)參數(shù)和默認(rèn)值進(jìn)行封裝；還包括：

確定調(diào)變參數(shù)，接收輸入的所述調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值；

加載所述封裝的默認(rèn)參數(shù)和對(duì)應(yīng)的默認(rèn)值，并解析所述調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值；

根據(jù)所述默認(rèn)值和解析出的參數(shù)值，調(diào)用外設(shè)的目標(biāo)上傳組件。

優(yōu)選地，上述方法進(jìn)一步包括：封裝至少一種文件上傳的方式和樣式，為所述封裝的至少一種文件上傳的方式和樣式中每一種文件上傳的方式和樣式構(gòu)建對(duì)應(yīng)的html元素屬性；

在所述接收輸入的所述調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值之后，在所述加載所述封裝的默認(rèn)參數(shù)和對(duì)應(yīng)的默認(rèn)值之前，進(jìn)一步包括：接收輸入的至少一個(gè)目標(biāo)html元素屬性值；

在所述解析所述調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值之后，在所述調(diào)用外設(shè)的目標(biāo)上傳組件之前，進(jìn)一步包括：解析所述至少一個(gè)目標(biāo)html元素屬性值，根據(jù)所述至少一個(gè)目標(biāo)html元素屬性值，在所述至少一種文件上傳的方式和樣式中，選定文件上傳的目標(biāo)方式和樣式；

在所述調(diào)用外設(shè)的目標(biāo)上傳組件之后，進(jìn)一步包括：將所述文件上傳的目標(biāo)方式和樣式發(fā)送給所述外設(shè)的目標(biāo)上傳組件，根據(jù)所述文件上傳的目標(biāo)方式和樣式，顯示文件上傳的對(duì)話框和文件上傳的按鈕。

優(yōu)選地，所述對(duì)所述默認(rèn)參數(shù)和默認(rèn)值進(jìn)行封裝，包括：將默認(rèn)參數(shù)和默認(rèn)值封裝到對(duì)應(yīng)的webuploader.js文件中，并存儲(chǔ)所述webuploader.js文件；

所述確定調(diào)變參數(shù)，接收輸入的所述調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值，包括：確定文件上傳的服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)表為調(diào)變參數(shù)，接收所述文件上傳的服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)表對(duì)應(yīng)的參數(shù)值；

所述加載所述封裝的默認(rèn)參數(shù)，包括：設(shè)置每一個(gè)webuploader.js文件對(duì)應(yīng)的引入路徑，根據(jù)所述引入路徑，加載webuploader.js文件。

優(yōu)選地，所述至少一種文件上傳的方式和樣式，包括：

封裝單文件上傳方式和樣式、多文件上傳方式和樣式、單圖片上傳方式和樣式及多圖片上傳方式和樣式中的任意一種或多種。

一種調(diào)用上傳組件的系統(tǒng)，包括：上述任意一種調(diào)用上傳組件的裝置和至少一種上傳組件，其中，

所述至少一種上傳組件中，每一種上傳組件，用于接收所述調(diào)用上傳組件的裝置的調(diào)用，并根據(jù)所述調(diào)用上傳組件的裝置封裝至少一種文件上傳的方式和樣式，輸出文件上傳/圖片上傳對(duì)話框。

優(yōu)選地，所述至少一種上傳組件，包括：Web Uploader和JS中的任意一種或兩種。

本發(fā)明實(shí)施例提供了一種調(diào)用上傳組件的裝置、方法和系統(tǒng)，該裝置通過(guò)封裝構(gòu)建單元確定外設(shè)的每一種上傳組件對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值，對(duì)默認(rèn)參數(shù)和默認(rèn)值進(jìn)行封裝，實(shí)現(xiàn)了對(duì)默認(rèn)參數(shù)和默認(rèn)值的封裝，可以通過(guò)直接調(diào)用封裝好的默認(rèn)參數(shù)和默認(rèn)值，而無(wú)須用戶輸入，另外，通過(guò)交互單元可以接收需要調(diào)變的參數(shù)對(duì)應(yīng)的參數(shù)值，從而通過(guò)接口調(diào)用外設(shè)的目標(biāo)上傳組件，通過(guò)直接調(diào)用封裝好的默認(rèn)參數(shù)，而無(wú)須用戶依次編寫(xiě)參數(shù)，從而能夠有效的提高應(yīng)用開(kāi)發(fā)的效率。

附圖說(shuō)明

為了更清楚地說(shuō)明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡(jiǎn)單地介紹，顯而易見(jiàn)地，下面描述中的附圖是本發(fā)明的一些實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來(lái)講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1是本發(fā)明一個(gè)實(shí)施例提供的一種調(diào)用上傳組件的裝置的結(jié)構(gòu)示意圖；

圖2是本發(fā)明另一實(shí)施例提供的一種調(diào)用上傳組件的裝置的結(jié)構(gòu)示意圖；

圖3是本發(fā)明一個(gè)實(shí)施例提供的一種調(diào)用上傳組件的方法的流程圖；

圖4是本發(fā)明另一個(gè)實(shí)施例提供的一種調(diào)用上傳組件的方法的流程圖；

圖5是本發(fā)明一個(gè)實(shí)施例提供的一種上傳組件的顯示樣式的示意圖；

圖6是本發(fā)明一個(gè)實(shí)施例提供的一種調(diào)用上傳組件的系統(tǒng)的結(jié)構(gòu)示意圖。

具體實(shí)施方式

為使本發(fā)明實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例，基于本發(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有做出創(chuàng)造性勞動(dòng)的前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

如圖1所示，本發(fā)明實(shí)施例提供一種調(diào)用上傳組件的裝置，與外設(shè)的至少一種上傳組件相連，包括：封裝構(gòu)建單元101、交互單元102和接口103，其中，

封裝構(gòu)建單元101，用于確定外設(shè)的每一種上傳組件對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值，對(duì)默認(rèn)參數(shù)和默認(rèn)值進(jìn)行封裝；

交互單元102，用于確定調(diào)變參數(shù)，接收輸入的調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值，并發(fā)送調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值；

接口103，用于加載封裝構(gòu)建單元101封裝的默認(rèn)參數(shù)和對(duì)應(yīng)的默認(rèn)值，接收并解析交互單元102發(fā)送的調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值，根據(jù)默認(rèn)值和解析出的參數(shù)值，調(diào)用外設(shè)的目標(biāo)上傳組件。

在圖1所示的實(shí)施例中，通過(guò)封裝構(gòu)建單元確定外設(shè)的每一種上傳組件對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值，對(duì)默認(rèn)參數(shù)和默認(rèn)值進(jìn)行封裝，實(shí)現(xiàn)了對(duì)默認(rèn)參數(shù)和默認(rèn)值的封裝，可以通過(guò)直接調(diào)用封裝好的默認(rèn)參數(shù)和默認(rèn)值，而無(wú)須用戶輸入，另外，通過(guò)交互單元可以接收需要調(diào)變的參數(shù)對(duì)應(yīng)的參數(shù)值，從而通過(guò)接口調(diào)用外設(shè)的目標(biāo)上傳組件，通過(guò)直接調(diào)用封裝好的默認(rèn)參數(shù)，而無(wú)須用戶依次編寫(xiě)參數(shù)，能夠有效的提高應(yīng)用開(kāi)發(fā)的效率。

如圖2所示，在本發(fā)明另一實(shí)施例中，上述裝置進(jìn)一步包括：顯示單元201，其中，

封裝構(gòu)建單元101，進(jìn)一步用于封裝至少一種文件上傳的方式和樣式，為封裝的至少一種文件上傳的方式和樣式中每一種文件上傳的方式和樣式構(gòu)建對(duì)應(yīng)的html元素屬性；

交互單元102，進(jìn)一步用于接收輸入的至少一個(gè)目標(biāo)html元素屬性值，并發(fā)送至少一個(gè)目標(biāo)html元素屬性值；

接口103，進(jìn)一步用于接收交互單元102發(fā)送的至少一個(gè)目標(biāo)html元素屬性值，解析至少一個(gè)目標(biāo)html元素屬性值，根據(jù)至少一個(gè)目標(biāo)html元素屬性值，在封裝構(gòu)建單元101封裝的至少一種文件上傳的方式和樣式中，選定文件上傳的目標(biāo)方式和樣式，并將文件上傳的目標(biāo)方式和樣式發(fā)送給外設(shè)的目標(biāo)上傳組件；

顯示單元201，用于根據(jù)外設(shè)的目標(biāo)上傳組件和接口103接收到的文件上傳的目標(biāo)方式和樣式，顯示文件上傳的對(duì)話框和文件上傳的按鈕。

在本發(fā)明又一實(shí)施例中，封裝構(gòu)建單元，用于將外設(shè)的每一種上傳組件對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值封裝到對(duì)應(yīng)的webuploader.js文件中，并存儲(chǔ)webuploader.js文件；

交互單元，用于確定文件上傳的服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)表為調(diào)變參數(shù)，接收文件上傳的服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)表對(duì)應(yīng)的參數(shù)值；

接口，進(jìn)一步用于設(shè)置每一個(gè)webuploader.js文件對(duì)應(yīng)的引入路徑，根據(jù)引入路徑，加載webuploader.js文件。

在本發(fā)明另一實(shí)施例中，封裝構(gòu)建單元，用于封裝單文件上傳方式和樣式、多文件上傳方式和樣式、單圖片上傳方式和樣式及多圖片上傳方式和樣式，其中，單文件上傳方式和樣式/單圖片上傳方式和樣式，包括：在元素的右側(cè)添加“選擇”按鈕，當(dāng)選中文件后添加“上傳”、“刪除”按鈕并隱藏“選擇”按鈕，并顯示上傳進(jìn)度；多文件上傳方式和樣式/多圖片上傳方式和樣式，包括：為元素添加“添加文件”按鈕、“開(kāi)始上傳”按鈕和“取消”按鈕，通過(guò)“添加文件”按鈕添加至少一個(gè)文件，并顯示上傳進(jìn)度。

如圖3所示，本發(fā)明實(shí)施例提供一種調(diào)用上傳組件的方法，該方法可以包括以下步驟：

步驟301：連接至少一種上傳組件，確定每一種上傳組件對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值，對(duì)默認(rèn)參數(shù)和默認(rèn)值進(jìn)行封裝；

步驟302：確定調(diào)變參數(shù)，接收輸入的調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值；

步驟303：加載封裝的默認(rèn)參數(shù)和對(duì)應(yīng)的默認(rèn)值，并解析調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值；

步驟304：根據(jù)默認(rèn)值和解析出的參數(shù)值，調(diào)用外設(shè)的目標(biāo)上傳組件。

在本發(fā)明一個(gè)實(shí)施例中，通過(guò)封裝至少一種文件上傳的方式和樣式，以進(jìn)一步提高應(yīng)用開(kāi)發(fā)的效率，上述方法進(jìn)一步包括：封裝至少一種文件上傳的方式和樣式，為封裝的至少一種文件上傳的方式和樣式中每一種文件上傳的方式和樣式構(gòu)建對(duì)應(yīng)的html元素屬性；在步驟302之后，步驟303之前，進(jìn)一步包括：接收輸入的至少一個(gè)目標(biāo)html元素屬性值；在步驟303之后，步驟304之前，進(jìn)一步包括：解析至少一個(gè)目標(biāo)html元素屬性值，根據(jù)至少一個(gè)目標(biāo)html元素屬性值，在至少一種文件上傳的方式和樣式中，選定文件上傳的目標(biāo)方式和樣式；在步驟304之后進(jìn)一步包括：將文件上傳的目標(biāo)方式和樣式發(fā)送給外設(shè)的目標(biāo)上傳組件，根據(jù)文件上傳的目標(biāo)方式和樣式，顯示文件上傳的對(duì)話框和文件上傳的按鈕。例如：用戶只需要輸入<input type＝“mutilate-files”>，即可選定多文件上傳方式和樣式，然后輸出該多文件上傳方式和樣式，用以接收上傳文件，進(jìn)行文件上傳。

在本發(fā)明一個(gè)實(shí)施例中，為了能夠方便便捷的獲得默認(rèn)參數(shù)和默認(rèn)值，同時(shí)靈活的根據(jù)用戶需求進(jìn)行設(shè)置，步驟301的具體實(shí)施方式，包括：將默認(rèn)參數(shù)和默認(rèn)值封裝到對(duì)應(yīng)的webuploader.js文件中，并存儲(chǔ)所述webuploader.js文件；步驟302的具體實(shí)施方式，包括：確定文件上傳的服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)表為調(diào)變參數(shù)，接收文件上傳的服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)表對(duì)應(yīng)的參數(shù)值；步驟303的具體實(shí)施方式，包括：設(shè)置每一個(gè)webuploader.js文件對(duì)應(yīng)的引入路徑，根據(jù)引入路徑，加載webuploader.js文件。通過(guò)該過(guò)程，當(dāng)webuploader.js文件路徑發(fā)生變化時(shí)，只需要修改引入路徑，即可實(shí)現(xiàn)加載webuploader.js文件，另外由于不同文件上傳的服務(wù)器的地址不同，通過(guò)將文件上傳的服務(wù)器地址設(shè)置為調(diào)變參數(shù)，用戶即可根據(jù)自己的需求輸入，使得調(diào)用上傳組件更加靈活。

在本發(fā)明一個(gè)實(shí)施例中，為了保證上傳方式和樣式的多樣性，以供按照用戶需求進(jìn)行選擇，上述至少一種文件上傳的方式和樣式，包括：封裝單文件上傳方式和樣式、多文件上傳方式和樣式、單圖片上傳方式和樣式及多圖片上傳方式和樣式中的任意一種或多種。例如：?jiǎn)挝募蟼鞣绞胶蜆邮?單圖片上傳方式和樣式可以設(shè)置為在元素的右側(cè)添加“選擇”按鈕，當(dāng)選中文件后添加“上傳”、“刪除”按鈕并隱藏“選擇”按鈕，并顯示上傳進(jìn)度；多文件上傳方式和樣式/多圖片上傳方式和樣式可以設(shè)置為元素添加“添加文件”按鈕、“開(kāi)始上傳”按鈕和“取消”按鈕，通過(guò)“添加文件”按鈕添加至少一個(gè)文件，并顯示上傳進(jìn)度。

如圖4所示，本發(fā)明另一實(shí)施例提供了一種調(diào)用上傳組件的方法，該方法可以包括以下步驟：

步驟401：連接至少一種上傳組件，確定每一種上傳組件對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值；

步驟402：將默認(rèn)參數(shù)和默認(rèn)值封裝到webuploader.js文件；

在步驟401和步驟402中通過(guò)連接至少一種上傳組件如Web Uploader或JS，那么根據(jù)應(yīng)用開(kāi)發(fā)過(guò)程中的需求可以實(shí)現(xiàn)對(duì)多種上傳組件的調(diào)用，由于每一種上傳組件的參數(shù)不同，需要為不同的組件分別確定對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值，例如：對(duì)于Web Uploader來(lái)說(shuō)，disableGlobalDnd默認(rèn)值為false(默認(rèn)禁止拖拽，以防把圖片拖入瀏覽器而被當(dāng)做文件打開(kāi))，還可以把一些不常用的參數(shù)或者應(yīng)用對(duì)上傳需求固定的參數(shù)設(shè)為默認(rèn)參數(shù)，并賦予默認(rèn)值，還可以根據(jù)應(yīng)用的實(shí)際需求配置默認(rèn)參數(shù)項(xiàng)。形式如下：

另外，在該步驟中，通過(guò)將將默認(rèn)參數(shù)和默認(rèn)值封裝到webuploader.js文件，用戶只需要確定或者修改webuploader.js文件的存儲(chǔ)路徑，即可自動(dòng)實(shí)現(xiàn)加載默認(rèn)參數(shù)和默認(rèn)值，而再無(wú)需用戶輸入這部分參數(shù)值。

步驟403：設(shè)置每一個(gè)webuploader.js文件對(duì)應(yīng)的引入路徑；

該步驟得引入路徑即webuploader.js文件的存儲(chǔ)路徑，通過(guò)該引入路徑能夠在后續(xù)過(guò)程中成功對(duì)webuploader.js文件中的默認(rèn)參數(shù)和默認(rèn)值進(jìn)行加載。

步驟404：封裝至少一種文件上傳的方式和樣式；

在該步驟中封裝的文件上傳的方式和樣式，包括：?jiǎn)挝募蟼鞣绞胶蜆邮?、多文件上傳方式和樣式、單圖片上傳方式和樣式及多圖片上傳方式和樣式中的任意一種或多種，其中，單文件上傳方式和樣式/單圖片上傳方式和樣式為在元素的右側(cè)添加“選擇”按鈕，當(dāng)選中文件后添加“上傳”、“刪除”按鈕并隱藏“選擇”按鈕，并顯示上傳進(jìn)度；多文件上傳方式和樣式/多圖片上傳方式和樣式為元素添加“添加文件”按鈕、“開(kāi)始上傳”按鈕和“取消”按鈕，通過(guò)“添加文件”按鈕添加至少一個(gè)文件，并顯示上傳進(jìn)度。提及的元素文件的顯示框。

步驟405：為封裝的至少一種文件上傳的方式和樣式中每一種文件上傳的方式和樣式構(gòu)建對(duì)應(yīng)的html元素屬性；

在該步驟中，對(duì)應(yīng)于單文件上傳方式和樣式、多文件上傳方式和樣式、單圖片上傳方式和樣式及多圖片上傳方式和樣式的元素屬性分別為file、mutilate-files、image、mutilate-images四種，其輸入形式如下所示：

<input type＝“file”…>、<input type＝“mutilate-files”…>等。

步驟406：確定調(diào)變參數(shù)，接收輸入的調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值；

在該步驟中確定的調(diào)變參數(shù)主要是一些簡(jiǎn)單的，用戶容易記住的參數(shù)，如：文件上傳的服務(wù)器端地址(server)，文件上傳的請(qǐng)求參數(shù)表(formData)等，該調(diào)變參數(shù)能夠滿足用戶的需求，保證了調(diào)用上傳組件的靈活性。例如：設(shè)置文件上傳的服務(wù)器端地址(server)：

步驟407：接收輸入的至少一個(gè)目標(biāo)html元素屬性值；

例如：用戶想要單文件上傳方式和樣式，則輸入<input type＝“file”…>。

步驟408：根據(jù)引入路徑，加載webuploader.js文件，并解析調(diào)變參數(shù)對(duì)應(yīng)的參數(shù)值；

步驟409：根據(jù)默認(rèn)值和解析出的參數(shù)值，調(diào)用外設(shè)的目標(biāo)上傳組件；

步驟408和步驟409的過(guò)程實(shí)現(xiàn)了通過(guò)參數(shù)值調(diào)用上傳組件，但是，上傳組件的顯示樣式則需要下述步驟410至步驟413實(shí)現(xiàn)。

步驟410：解析至少一個(gè)目標(biāo)html元素屬性值；

步驟411：根據(jù)至少一個(gè)目標(biāo)html元素屬性值，在至少一種文件上傳的方式和樣式中，選定文件上傳的目標(biāo)方式和樣式；

步驟412：將文件上傳的目標(biāo)方式和樣式發(fā)送給外設(shè)的目標(biāo)上傳組件；

步驟413：根據(jù)文件上傳的目標(biāo)方式和樣式，顯示文件上傳的對(duì)話框和文件上傳的按鈕。

步驟410至步驟413的實(shí)現(xiàn)過(guò)程：例如：解析出兩個(gè)目標(biāo)html元素屬性值，均為<input type＝“file”…>即單文件上傳方式和樣式，則根據(jù)應(yīng)用需求和前面參數(shù)的設(shè)置，將這兩個(gè)單文件上傳方式和樣式分別顯示在應(yīng)用的不同位置，該單文件上傳方式和樣式的顯示形式如圖5所示，在未加載文件之前，在顯示框的右側(cè)顯示添加的“選擇”按鈕(圖5-1)，當(dāng)選中文件f123.zip后，添加“上傳”、“刪除”按鈕并隱藏“選擇”按鈕(圖5-2)。

如圖6所示，本發(fā)明實(shí)施例提供一種調(diào)用上傳組件的系統(tǒng)，該系統(tǒng)包括：上述任意一種調(diào)用上傳組件的裝置601和至少一種上傳組件602，其中，

至少一種上傳組件602中，每一種上傳組件，用于接收調(diào)用上傳組件的裝置601的調(diào)用，并根據(jù)調(diào)用上傳組件的裝置601封裝至少一種文件上傳的方式和樣式，輸出文件上傳/圖片上傳對(duì)話框。

在本發(fā)明另一實(shí)施例中，上述至少一種上傳組件，包括：Web Uploader和JS中的任意一種或兩種。

根據(jù)上述方案，本發(fā)明的各實(shí)施例，至少具有如下有益效果：

1.通過(guò)封裝構(gòu)建單元確定外設(shè)的每一種上傳組件對(duì)應(yīng)的默認(rèn)參數(shù)和默認(rèn)值，對(duì)默認(rèn)參數(shù)和默認(rèn)值進(jìn)行封裝，實(shí)現(xiàn)了對(duì)默認(rèn)參數(shù)和默認(rèn)值的封裝，可以通過(guò)直接調(diào)用封裝好的默認(rèn)參數(shù)和默認(rèn)值，而無(wú)須用戶輸入，另外，通過(guò)交互單元可以接收需要調(diào)變的參數(shù)對(duì)應(yīng)的參數(shù)值，從而通過(guò)接口調(diào)用外設(shè)的目標(biāo)上傳組件，通過(guò)直接調(diào)用封裝好的默認(rèn)參數(shù)，而無(wú)須用戶依次編寫(xiě)參數(shù)，能夠有效的提高應(yīng)用開(kāi)發(fā)的效率。

2.通過(guò)封裝至少一種文件上傳的方式和樣式，為封裝的至少一種文件上傳的方式和樣式中每一種文件上傳的方式和樣式構(gòu)建對(duì)應(yīng)的html元素屬性，通過(guò)接收輸入的至少一個(gè)目標(biāo)html元素屬性值，解析至少一個(gè)目標(biāo)html元素屬性值，即可在所述至少一種文件上傳的方式和樣式中，選定文件上傳的目標(biāo)方式和樣式；也就是說(shuō)，用戶只需要輸入元素屬性值即可定位出對(duì)應(yīng)的文件上傳的方式和樣式，進(jìn)一步提高了應(yīng)用開(kāi)發(fā)的效率，另外，本發(fā)明實(shí)施例封裝了單文件上傳方式和樣式、多文件上傳方式和樣式、單圖片上傳方式和樣式及多圖片上傳方式和樣式中的任意一種或多種，統(tǒng)一了上傳組件的顯示樣式。

3.通過(guò)確定文件上傳的服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)表為調(diào)變參數(shù)，接收用戶輸入的文件上傳的服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)表對(duì)應(yīng)的參數(shù)值，使用戶能夠按照根據(jù)自己的需求設(shè)置服務(wù)器端地址和文件上傳的請(qǐng)求參數(shù)，使得本發(fā)明實(shí)施例提供的調(diào)用上傳組件的裝置具有一定的靈活性，另外，通過(guò)webuploader.js文件封裝默認(rèn)參數(shù)，當(dāng)webuploader.js文件存儲(chǔ)路徑發(fā)生變化，用戶只需要更改接口中的引入路徑，而無(wú)須對(duì)加載到上傳組件中的每一個(gè)參數(shù)的路徑進(jìn)行更改，進(jìn)一步減少了工作量，從而進(jìn)一步提高了開(kāi)發(fā)效率。

需要說(shuō)明的是，在本文中，諸如第一和第二之類的關(guān)系術(shù)語(yǔ)僅僅用來(lái)將一個(gè)實(shí)體或者操作與另一個(gè)實(shí)體或操作區(qū)分開(kāi)來(lái)，而不一定要求或者暗示這些實(shí)體或操作之間存在任何這種實(shí)際的關(guān)系或者順序。而且，術(shù)語(yǔ)“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過(guò)程、方法、物品或者設(shè)備不僅包括那些要素，而且還包括沒(méi)有明確列出的其他要素，或者是還包括為這種過(guò)程、方法、物品或者設(shè)備所固有的要素。在沒(méi)有更多限制的情況下，由語(yǔ)句“包括一個(gè)······”限定的要素，并不排除在包括所述要素的過(guò)程、方法、物品或者設(shè)備中還存在另外的相同因素。

本領(lǐng)域普通技術(shù)人員可以理解：實(shí)現(xiàn)上述方法實(shí)施例的全部或部分步驟可以通過(guò)程序指令相關(guān)的硬件來(lái)完成，前述的程序可以存儲(chǔ)在計(jì)算機(jī)可讀取的存儲(chǔ)介質(zhì)中，該程序在執(zhí)行時(shí)，執(zhí)行包括上述方法實(shí)施例的步驟；而前述的存儲(chǔ)介質(zhì)包括：ROM、RAM、磁碟或者光盤等各種可以存儲(chǔ)程序代碼的介質(zhì)中。

最后需要說(shuō)明的是：以上所述僅為本發(fā)明的較佳實(shí)施例，僅用于說(shuō)明本發(fā)明的技術(shù)方案，并非用于限定本發(fā)明的保護(hù)范圍。凡在本發(fā)明的精神和原則之內(nèi)所做的任何修改、等同替換、改進(jìn)等，均包含在本發(fā)明的保護(hù)范圍內(nèi)。