本發(fā)明屬于附件上傳選擇領(lǐng)域，尤其涉及一種ionic框架下的手機(jī)附件上傳選擇文件的方法及系統(tǒng)。

背景技術(shù)：

手機(jī)app開發(fā)分為原生語言開發(fā)(安卓系統(tǒng)為java語言，ios系統(tǒng)為objectc語言)，和混合模式開發(fā)，即hybrid。ionic框架就屬于混合開發(fā)框架。原生語言開發(fā)可以更多的接觸設(shè)備底層，可以更好更靈活的調(diào)用手機(jī)設(shè)備本身的硬件。但開發(fā)周期長，不能快速響應(yīng)需求。而混合開發(fā)利用html語言實(shí)現(xiàn)前臺(tái)的ui，并利用phonegapcordova來實(shí)現(xiàn)與手機(jī)硬件的交互，節(jié)省了大量的開發(fā)時(shí)間，但是與此同時(shí)帶來的不便就是過于依賴cordova所提供的插件，如果插件未提供的功能就會(huì)遇到瓶頸。

ionic框架下手機(jī)app在附件上傳時(shí)就會(huì)遇到這樣的瓶頸，雖然cordova提供了可操作手機(jī)中文件的接口插件，但是網(wǎng)絡(luò)上的實(shí)例中卻僅能找到上傳圖片或拍照上傳的功能實(shí)現(xiàn)，文件選擇卻是空白。要實(shí)現(xiàn)文件的選擇，首先要解決的就是看到存放文件的目錄結(jié)構(gòu)，但cordova插件中雖然能精確的查找或訪問某個(gè)文件路徑下的文件，卻不能展示整個(gè)手機(jī)的文件目錄(遍歷整個(gè)目錄)。這時(shí)候就需要一種方法來解決打開一個(gè)文件目錄瀏覽器的問題。

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

為了解決現(xiàn)有技術(shù)的缺點(diǎn)，本發(fā)明的第一目的是提供一種ionic框架下的手機(jī)附件上傳選擇文件的方法。

本發(fā)明的一種ionic框架下的手機(jī)附件上傳選擇文件的方法，包括：

觸發(fā)ionic框架下的手機(jī)中文件選擇功能標(biāo)簽，進(jìn)而啟動(dòng)手機(jī)自帶文件選擇器；

在手機(jī)自帶文件選擇器選擇待上傳的文件；

觸發(fā)onchange事件，通過該事件調(diào)取手機(jī)中服務(wù)接收控制器中的uploadchange函數(shù)來實(shí)現(xiàn)選中文件的頁面暫存；

將暫存的頁面信息提交至服務(wù)接口控制器中進(jìn)行解析并存儲(chǔ)。

進(jìn)一步的，所述手機(jī)中文件選擇功能標(biāo)簽通過html標(biāo)簽input且屬性type為file來實(shí)現(xiàn)的。

進(jìn)一步的，所述手機(jī)中文件選擇功能標(biāo)簽還具有隱藏屬性。

進(jìn)一步的，所述uploadchange函數(shù)利用一個(gè)formdata來存儲(chǔ)多個(gè)選中的文件。

進(jìn)一步的，當(dāng)觸發(fā)uploadchange函數(shù)時(shí)，循環(huán)向formdata中添加文件進(jìn)而實(shí)現(xiàn)了頁面暫存。

本發(fā)明的第二目的是提供了一種ionic框架下的手機(jī)附件上傳選擇文件的系統(tǒng)。

本發(fā)明的一種ionic框架下的手機(jī)附件上傳選擇文件的系統(tǒng)，包括：

文件選擇器啟動(dòng)模塊，其用于觸發(fā)ionic框架下的手機(jī)中文件選擇功能標(biāo)簽，進(jìn)而啟動(dòng)手機(jī)自帶文件選擇器；

文件選擇模塊，其用于在手機(jī)自帶文件選擇器選擇待上傳的文件；

頁面暫存模塊，其用于觸發(fā)onchange事件，通過該事件調(diào)取手機(jī)中服務(wù)接收控制器中的uploadchange函數(shù)來實(shí)現(xiàn)選中文件的頁面暫存；

頁面解析存儲(chǔ)模塊，其用于將暫存的頁面信息提交至服務(wù)接口控制器中進(jìn)行解析并存儲(chǔ)。

進(jìn)一步的，在所述文件選擇器啟動(dòng)模塊中，所述手機(jī)中文件選擇功能標(biāo)簽通過html標(biāo)簽input且屬性type為file來實(shí)現(xiàn)的。

進(jìn)一步的，在所述文件選擇器啟動(dòng)模塊中，所述手機(jī)中文件選擇功能標(biāo)簽還具有隱藏屬性。

進(jìn)一步的，在所述頁面暫存模塊中，所述uploadchange函數(shù)利用一個(gè)formdata來存儲(chǔ)多個(gè)選中的文件。

進(jìn)一步的，在所述頁面暫存模塊中，當(dāng)觸發(fā)uploadchange函數(shù)時(shí)，循環(huán)向formdata中添加文件進(jìn)而實(shí)現(xiàn)了頁面暫存。

與現(xiàn)有技術(shù)相比，本發(fā)明的有益效果是：

本發(fā)明在手機(jī)上實(shí)現(xiàn)文件的選擇不能能夠精確的查找或訪問某個(gè)文件路徑下的文件，也能夠展示整個(gè)手機(jī)的文件目錄，進(jìn)而遍歷整個(gè)目錄；在網(wǎng)頁中可實(shí)現(xiàn)文件選擇的功能。利用這一標(biāo)簽在手機(jī)中可以實(shí)現(xiàn)打開資源瀏覽器的功能，從而省去了大量的插件封裝開發(fā)時(shí)間，解決的文件上傳時(shí)選擇文件的耗費(fèi)問題，提高了文件上傳的效率和準(zhǔn)確性。

附圖說明

構(gòu)成本申請(qǐng)的一部分的說明書附圖用來提供對(duì)本申請(qǐng)的進(jìn)一步理解，本申請(qǐng)的示意性實(shí)施例及其說明用于解釋本申請(qǐng)，并不構(gòu)成對(duì)本申請(qǐng)的不當(dāng)限定。

圖1是ionic框架下的手機(jī)附件上傳選擇文件的方法流程圖。

圖2是ionic框架下的手機(jī)附件上傳選擇文件的系統(tǒng)結(jié)構(gòu)示意圖。

具體實(shí)施方式

應(yīng)該指出，以下詳細(xì)說明都是例示性的，旨在對(duì)本申請(qǐng)?zhí)峁┻M(jìn)一步的說明。除非另有指明，本文使用的所有技術(shù)和科學(xué)術(shù)語具有與本申請(qǐng)所屬技術(shù)領(lǐng)域的普通技術(shù)人員通常理解的相同含義。

需要注意的是，這里所使用的術(shù)語僅是為了描述具體實(shí)施方式，而非意圖限制根據(jù)本申請(qǐng)的示例性實(shí)施方式。如在這里所使用的，除非上下文另外明確指出，否則單數(shù)形式也意圖包括復(fù)數(shù)形式，此外，還應(yīng)當(dāng)理解的是，當(dāng)在本說明書中使用術(shù)語“包含”和/或“包括”時(shí)，其指明存在特征、步驟、操作、器件、組件和/或它們的組合。

圖1是ionic框架下的手機(jī)附件上傳選擇文件的方法流程圖。

如圖1所示，本發(fā)明的一種ionic框架下的手機(jī)附件上傳選擇文件的方法，包括：

步驟1：觸發(fā)ionic框架下的手機(jī)中文件選擇功能標(biāo)簽，進(jìn)而啟動(dòng)手機(jī)自帶文件選擇器。

其中，所述手機(jī)中文件選擇功能標(biāo)簽通過html標(biāo)簽input且屬性type為file來實(shí)現(xiàn)的。

所述手機(jī)中文件選擇功能標(biāo)簽還具有隱藏屬性。

ionic可使用所有html標(biāo)簽(但并非所有標(biāo)簽的屬性)。在網(wǎng)頁中上傳是通過html標(biāo)簽input,屬性type為file來實(shí)現(xiàn)的，即<inputtype＝‘file’>(以下簡稱mf)。實(shí)際驗(yàn)證在ionic框架下，手機(jī)也確實(shí)可以識(shí)別該標(biāo)簽。

實(shí)際實(shí)現(xiàn)時(shí)標(biāo)簽內(nèi)容為：

<inputtype＝"file"id＝"mf"fileread＝"vm.uploadme"ng-model＝"vm.uploadme"onchange＝"angular.element(this).scope().uploadchange()"style＝"display:none">

因?yàn)閙f標(biāo)簽在實(shí)際網(wǎng)頁應(yīng)用時(shí)的外觀并不符合手機(jī)使用時(shí)經(jīng)常使用的點(diǎn)擊按鈕選擇文件的習(xí)慣，所以在手機(jī)上使用時(shí)，要先隱藏該標(biāo)簽，在此使用了隱藏屬性：tyle＝"display:none"，并通過一個(gè)按鈕來實(shí)現(xiàn)點(diǎn)擊并觸發(fā)該標(biāo)簽的選擇事件。

按鈕代碼如下：

<buttonclass＝"button"onclick＝"document.getelementbyid('mf').click()；">選擇</button>。

步驟2：在手機(jī)自帶文件選擇器選擇待上傳的文件。

這一步就實(shí)現(xiàn)了選擇的功能需求，接下來就要選中并帶回，在文件選擇器中選中某文件并確認(rèn)。

步驟3：觸發(fā)onchange事件，通過該事件調(diào)取手機(jī)中服務(wù)接收控制器中的uploadchange函數(shù)來實(shí)現(xiàn)選中文件的頁面暫存；

mf標(biāo)簽會(huì)自動(dòng)觸發(fā)選中事件，也就是標(biāo)簽中onchange事件，通過該事件調(diào)取控制器中的uploadchange函數(shù)，該函數(shù)用于實(shí)現(xiàn)選中文件的頁面暫存；

uploadchange函數(shù)利用一個(gè)formdata，可以存儲(chǔ)多個(gè)由第二步選中的文件，由于input標(biāo)簽的多選屬性在手機(jī)中無法體現(xiàn)，所以只能通過多次點(diǎn)選選擇按鈕來實(shí)現(xiàn)文件的多選。當(dāng)觸發(fā)uploadchange時(shí)，循環(huán)向formdata中添加文件實(shí)現(xiàn)頁面暫存。

步驟4：將暫存的頁面信息提交至服務(wù)接口控制器中進(jìn)行解析并存儲(chǔ)。

具體地，將formdata通過post請(qǐng)求提交至服務(wù)接口控制器中進(jìn)行解析存儲(chǔ)。

本發(fā)明在手機(jī)上實(shí)現(xiàn)文件的選擇不能能夠精確的查找或訪問某個(gè)文件路徑下的文件，也能夠展示整個(gè)手機(jī)的文件目錄，進(jìn)而遍歷整個(gè)目錄；在網(wǎng)頁中可實(shí)現(xiàn)文件選擇的功能。利用這一標(biāo)簽在手機(jī)中可以實(shí)現(xiàn)打開資源瀏覽器的功能，從而省去了大量的插件封裝開發(fā)時(shí)間，解決的文件上傳時(shí)選擇文件的耗費(fèi)問題，提高了文件上傳的效率和準(zhǔn)確性。

圖2是ionic框架下的手機(jī)附件上傳選擇文件的系統(tǒng)結(jié)構(gòu)示意圖。

如圖2所示，本發(fā)明的一種ionic框架下的手機(jī)附件上傳選擇文件的系統(tǒng)，包括：

(1)文件選擇器啟動(dòng)模塊，其用于觸發(fā)ionic框架下的手機(jī)中文件選擇功能標(biāo)簽，進(jìn)而啟動(dòng)手機(jī)自帶文件選擇器；

在所述文件選擇器啟動(dòng)模塊中，所述手機(jī)中文件選擇功能標(biāo)簽通過html標(biāo)簽input且屬性type為file來實(shí)現(xiàn)的。

在所述文件選擇器啟動(dòng)模塊中，所述手機(jī)中文件選擇功能標(biāo)簽還具有隱藏屬性。

ionic可使用所有html標(biāo)簽(但并非所有標(biāo)簽的屬性)。在網(wǎng)頁中上傳是通過html標(biāo)簽input,屬性type為file來實(shí)現(xiàn)的，即<inputtype＝‘file’>(以下簡稱mf)。實(shí)際驗(yàn)證在ionic框架下，手機(jī)也確實(shí)可以識(shí)別該標(biāo)簽。

實(shí)際實(shí)現(xiàn)時(shí)標(biāo)簽內(nèi)容為：

<inputtype＝"file"id＝"mf"fileread＝"vm.uploadme"ng-model＝"vm.uploadme"onchange＝"angular.element(this).scope().uploadchange()"style＝"display:none">

因?yàn)閙f標(biāo)簽在實(shí)際網(wǎng)頁應(yīng)用時(shí)的外觀并不符合手機(jī)使用時(shí)經(jīng)常使用的點(diǎn)擊按鈕選擇文件的習(xí)慣，所以在手機(jī)上使用時(shí)，要先隱藏該標(biāo)簽，在此使用了隱藏屬性：tyle＝"display:none"，并通過一個(gè)按鈕來實(shí)現(xiàn)點(diǎn)擊并觸發(fā)該標(biāo)簽的選擇事件。

按鈕代碼如下：

<buttonclass＝"button"onclick＝"document.getelementbyid('mf').click()；">選擇</button>。

(2)文件選擇模塊，其用于在手機(jī)自帶文件選擇器選擇待上傳的文件；

文件選擇模塊實(shí)現(xiàn)了選擇的功能需求，接下來就要選中并帶回，在文件選擇器中選中某文件并確認(rèn)。

(3)頁面暫存模塊，其用于觸發(fā)onchange事件，通過該事件調(diào)取手機(jī)中服務(wù)接收控制器中的uploadchange函數(shù)來實(shí)現(xiàn)選中文件的頁面暫存；

在所述頁面暫存模塊中，所述uploadchange函數(shù)利用一個(gè)formdata來存儲(chǔ)多個(gè)選中的文件。

在所述頁面暫存模塊中，當(dāng)觸發(fā)uploadchange函數(shù)時(shí)，循環(huán)向formdata中添加文件進(jìn)而實(shí)現(xiàn)了頁面暫存。

mf標(biāo)簽會(huì)自動(dòng)觸發(fā)選中事件，也就是標(biāo)簽中onchange事件，通過該事件調(diào)取控制器中的uploadchange函數(shù)，該函數(shù)用于實(shí)現(xiàn)選中文件的頁面暫存；

uploadchange函數(shù)利用一個(gè)formdata，可以存儲(chǔ)多個(gè)由第二步選中的文件，由于input標(biāo)簽的多選屬性在手機(jī)中無法體現(xiàn)，所以只能通過多次點(diǎn)選選擇按鈕來實(shí)現(xiàn)文件的多選。當(dāng)觸發(fā)uploadchange時(shí)，循環(huán)向formdata中添加文件實(shí)現(xiàn)頁面暫存。

(4)頁面解析存儲(chǔ)模塊，其用于將暫存的頁面信息提交至服務(wù)接口控制器中進(jìn)行解析并存儲(chǔ)。

頁面解析存儲(chǔ)模塊將formdata通過post請(qǐng)求提交至服務(wù)接口控制器中進(jìn)行解析存儲(chǔ)。

本發(fā)明在手機(jī)上實(shí)現(xiàn)文件的選擇不能能夠精確的查找或訪問某個(gè)文件路徑下的文件，也能夠展示整個(gè)手機(jī)的文件目錄，進(jìn)而遍歷整個(gè)目錄；在網(wǎng)頁中可實(shí)現(xiàn)文件選擇的功能。利用這一標(biāo)簽在手機(jī)中可以實(shí)現(xiàn)打開資源瀏覽器的功能，從而省去了大量的插件封裝開發(fā)時(shí)間，解決的文件上傳時(shí)選擇文件的耗費(fèi)問題，提高了文件上傳的效率和準(zhǔn)確性。

本領(lǐng)域內(nèi)的技術(shù)人員應(yīng)明白，本發(fā)明的實(shí)施例可提供為方法、系統(tǒng)、或計(jì)算機(jī)程序產(chǎn)品。因此，本發(fā)明可采用硬件實(shí)施例、軟件實(shí)施例、或結(jié)合軟件和硬件方面的實(shí)施例的形式。而且，本發(fā)明可采用在一個(gè)或多個(gè)其中包含有計(jì)算機(jī)可用程序代碼的計(jì)算機(jī)可用存儲(chǔ)介質(zhì)(包括但不限于磁盤存儲(chǔ)器和光學(xué)存儲(chǔ)器等)上實(shí)施的計(jì)算機(jī)程序產(chǎn)品的形式。

本發(fā)明是參照根據(jù)本發(fā)明實(shí)施例的方法、設(shè)備(系統(tǒng))、和計(jì)算機(jī)程序產(chǎn)品的流程圖和/或方框圖來描述的。應(yīng)理解可由計(jì)算機(jī)程序指令實(shí)現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結(jié)合。可提供這些計(jì)算機(jī)程序指令到通用計(jì)算機(jī)、專用計(jì)算機(jī)、嵌入式處理機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器以產(chǎn)生一個(gè)機(jī)器，使得通過計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器執(zhí)行的指令產(chǎn)生用于實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能的裝置。

這些計(jì)算機(jī)程序指令也可存儲(chǔ)在能引導(dǎo)計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備以特定方式工作的計(jì)算機(jī)可讀存儲(chǔ)器中，使得存儲(chǔ)在該計(jì)算機(jī)可讀存儲(chǔ)器中的指令產(chǎn)生包括指令裝置的制造品，該指令裝置實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能。

這些計(jì)算機(jī)程序指令也可裝載到計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備上，使得在計(jì)算機(jī)或其他可編程設(shè)備上執(zhí)行一系列操作步驟以產(chǎn)生計(jì)算機(jī)實(shí)現(xiàn)的處理，從而在計(jì)算機(jī)或其他可編程設(shè)備上執(zhí)行的指令提供用于實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能的步驟。

本領(lǐng)域普通技術(shù)人員可以理解實(shí)現(xiàn)上述實(shí)施例方法中的全部或部分流程，是可以通過計(jì)算機(jī)程序來指令相關(guān)的硬件來完成，所述的程序可存儲(chǔ)于一計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中，該程序在執(zhí)行時(shí)，可包括如上述各方法的實(shí)施例的流程。其中，所述的存儲(chǔ)介質(zhì)可為磁碟、光盤、只讀存儲(chǔ)記憶體(read-onlymemory，rom)或隨機(jī)存儲(chǔ)記憶體(randomaccessmemory，ram)等。

上述雖然結(jié)合附圖對(duì)本發(fā)明的具體實(shí)施方式進(jìn)行了描述，但并非對(duì)本發(fā)明保護(hù)范圍的限制，所屬領(lǐng)域技術(shù)人員應(yīng)該明白，在本發(fā)明的技術(shù)方案的基礎(chǔ)上，本領(lǐng)域技術(shù)人員不需要付出創(chuàng)造性勞動(dòng)即可做出的各種修改或變形仍在本發(fā)明的保護(hù)范圍以內(nèi)。