CN107180107B - Ionic框架下的手机附件上传选择文件的方法及系统 - Google Patents

Ionic框架下的手机附件上传选择文件的方法及系统 Download PDF

Info

Publication number
CN107180107B
CN107180107B CN201710428028.9A CN201710428028A CN107180107B CN 107180107 B CN107180107 B CN 107180107B CN 201710428028 A CN201710428028 A CN 201710428028A CN 107180107 B CN107180107 B CN 107180107B
Authority
CN
China
Prior art keywords
file
mobile phone
function
uploadchange
label
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201710428028.9A
Other languages
English (en)
Other versions
CN107180107A (zh
Inventor
任年峰
侯发毅
高晋
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Digital Shandong Technology Co Ltd
Original Assignee
Shanda Luneng Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanda Luneng Information Technology Co Ltd filed Critical Shanda Luneng Information Technology Co Ltd
Priority to CN201710428028.9A priority Critical patent/CN107180107B/zh
Publication of CN107180107A publication Critical patent/CN107180107A/zh
Application granted granted Critical
Publication of CN107180107B publication Critical patent/CN107180107B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/10—File systems; File servers
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04M—TELEPHONIC COMMUNICATION
    • H04M1/00—Substation equipment, e.g. for use by subscribers
    • H04M1/72—Mobile telephones; Cordless telephones, i.e. devices for establishing wireless links to base stations without route selection
    • H04M1/724—User interfaces specially adapted for cordless or mobile telephones
    • H04M1/72403—User interfaces specially adapted for cordless or mobile telephones with means for local support of applications that increase the functionality

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • Telephone Function (AREA)

Abstract

本发明公开了一种Ionic框架下的手机附件上传选择文件的方法及系统，其中该方法包括触发Ionic框架下的手机中文件选择功能标签，进而启动手机自带文件选择器；在手机自带文件选择器选择待上传的文件；触发onchange事件，通过该事件调取手机中服务接收控制器中的uploadChange函数来实现选中文件的页面暂存；将暂存的页面信息提交至服务接口控制器中进行解析并存储。

Description

Ionic框架下的手机附件上传选择文件的方法及系统
技术领域
本发明属于附件上传选择领域，尤其涉及一种Ionic框架下的手机附件上传选择文件的方法及系统。
背景技术
手机APP开发分为原生语言开发(安卓系统为Java语言，IOS系统为objectC语言)，和混合模式开发，即hybrid。Ionic框架就属于混合开发框架。原生语言开发可以更多的接触设备底层，可以更好更灵活的调用手机设备本身的硬件。但开发周期长，不能快速响应需求。而混合开发利用html语言实现前台的UI，并利用phonegap Cordova来实现与手机硬件的交互，节省了大量的开发时间，但是与此同时带来的不便就是过于依赖Cordova所提供的插件，如果插件未提供的功能就会遇到瓶颈。
Ionic框架下手机APP在附件上传时就会遇到这样的瓶颈，虽然Cordova提供了可操作手机中文件的接口插件，但是网络上的实例中却仅能找到上传图片或拍照上传的功能实现，文件选择却是空白。要实现文件的选择，首先要解决的就是看到存放文件的目录结构，但Cordova插件中虽然能精确的查找或访问某个文件路径下的文件，却不能展示整个手机的文件目录(遍历整个目录)。这时候就需要一种方法来解决打开一个文件目录浏览器的问题。
发明内容
为了解决现有技术的缺点，本发明的第一目的是提供一种Ionic框架下的手机附件上传选择文件的方法。
本发明的一种Ionic框架下的手机附件上传选择文件的方法，包括：
触发Ionic框架下的手机中文件选择功能标签，进而启动手机自带文件选择器；
在手机自带文件选择器选择待上传的文件；
触发onchange事件，通过该事件调取手机中服务接收控制器中的uploadChange函数来实现选中文件的页面暂存；
将暂存的页面信息提交至服务接口控制器中进行解析并存储。
进一步的，所述手机中文件选择功能标签通过html标签input且属性type为file来实现的。
进一步的，所述手机中文件选择功能标签还具有隐藏属性。
进一步的，所述uploadChange函数利用一个FormData来存储多个选中的文件。
进一步的，当触发uploadChange函数时，循环向FormData中添加文件进而实现了页面暂存。
本发明的第二目的是提供了一种Ionic框架下的手机附件上传选择文件的系统。
本发明的一种Ionic框架下的手机附件上传选择文件的系统，包括：
文件选择器启动模块，其用于触发Ionic框架下的手机中文件选择功能标签，进而启动手机自带文件选择器；
文件选择模块，其用于在手机自带文件选择器选择待上传的文件；
页面暂存模块，其用于触发onchange事件，通过该事件调取手机中服务接收控制器中的uploadChange函数来实现选中文件的页面暂存；
页面解析存储模块，其用于将暂存的页面信息提交至服务接口控制器中进行解析并存储。
进一步的，在所述文件选择器启动模块中，所述手机中文件选择功能标签通过html标签input且属性type为file来实现的。
进一步的，在所述文件选择器启动模块中，所述手机中文件选择功能标签还具有隐藏属性。
进一步的，在所述页面暂存模块中，所述uploadChange函数利用一个FormData来存储多个选中的文件。
进一步的，在所述页面暂存模块中，当触发uploadChange函数时，循环向FormData中添加文件进而实现了页面暂存。
与现有技术相比，本发明的有益效果是：
本发明在手机上实现文件的选择不能能够精确的查找或访问某个文件路径下的文件，也能够展示整个手机的文件目录，进而遍历整个目录；在网页中可实现文件选择的功能。利用这一标签在手机中可以实现打开资源浏览器的功能，从而省去了大量的插件封装开发时间，解决的文件上传时选择文件的耗费问题，提高了文件上传的效率和准确性。
附图说明
构成本申请的一部分的说明书附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。
图1是Ionic框架下的手机附件上传选择文件的方法流程图。
图2是Ionic框架下的手机附件上传选择文件的系统结构示意图。
具体实施方式
应该指出，以下详细说明都是例示性的，旨在对本申请提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本申请所属技术领域的普通技术人员通常理解的相同含义。
需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本申请的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。
图1是Ionic框架下的手机附件上传选择文件的方法流程图。
如图1所示，本发明的一种Ionic框架下的手机附件上传选择文件的方法，包括：
步骤1：触发Ionic框架下的手机中文件选择功能标签，进而启动手机自带文件选择器。
其中，所述手机中文件选择功能标签通过html标签input且属性type为file来实现的。
所述手机中文件选择功能标签还具有隐藏属性。
Ionic可使用所有html标签(但并非所有标签的属性)。在网页中上传是通过html标签input,属性type为file来实现的，即<input type＝‘file’>(以下简称MF)。实际验证在ionic框架下，手机也确实可以识别该标签。
实际实现时标签内容为：
<input type＝"file"id＝"MF"fileread＝"vm.uploadme"ng-model＝"vm.uploadme"onchange＝"angular.element(this).scope().uploadChange()"style＝"display:none">
因为MF标签在实际网页应用时的外观并不符合手机使用时经常使用的点击按钮选择文件的习惯，所以在手机上使用时，要先隐藏该标签，在此使用了隐藏属性：tyle＝"display:none"，并通过一个按钮来实现点击并触发该标签的选择事件。
按钮代码如下：
<button class＝"button"onclick＝"document.getElementById('MF').click()；">选择</button>。
步骤2：在手机自带文件选择器选择待上传的文件。
这一步就实现了选择的功能需求，接下来就要选中并带回，在文件选择器中选中某文件并确认。
步骤3：触发onchange事件，通过该事件调取手机中服务接收控制器中的uploadChange函数来实现选中文件的页面暂存；
MF标签会自动触发选中事件，也就是标签中onchange事件，通过该事件调取控制器中的uploadChange函数，该函数用于实现选中文件的页面暂存；
uploadChange函数利用一个FormData，可以存储多个由第二步选中的文件，由于input标签的多选属性在手机中无法体现，所以只能通过多次点选选择按钮来实现文件的多选。当触发uploadChange时，循环向FormData中添加文件实现页面暂存。
步骤4：将暂存的页面信息提交至服务接口控制器中进行解析并存储。
具体地，将FormData通过Post请求提交至服务接口控制器中进行解析存储。
本发明在手机上实现文件的选择不能能够精确的查找或访问某个文件路径下的文件，也能够展示整个手机的文件目录，进而遍历整个目录；在网页中可实现文件选择的功能。利用这一标签在手机中可以实现打开资源浏览器的功能，从而省去了大量的插件封装开发时间，解决的文件上传时选择文件的耗费问题，提高了文件上传的效率和准确性。
图2是Ionic框架下的手机附件上传选择文件的系统结构示意图。
如图2所示，本发明的一种Ionic框架下的手机附件上传选择文件的系统，包括：
(1)文件选择器启动模块，其用于触发Ionic框架下的手机中文件选择功能标签，进而启动手机自带文件选择器；
在所述文件选择器启动模块中，所述手机中文件选择功能标签通过html标签input且属性type为file来实现的。
在所述文件选择器启动模块中，所述手机中文件选择功能标签还具有隐藏属性。
Ionic可使用所有html标签(但并非所有标签的属性)。在网页中上传是通过html标签input,属性type为file来实现的，即<input type＝‘file’>(以下简称MF)。实际验证在ionic框架下，手机也确实可以识别该标签。
实际实现时标签内容为：
<input type＝"file"id＝"MF"fileread＝"vm.uploadme"ng-model＝"vm.uploadme"onchange＝"angular.element(this).scope().uploadChange()"style＝"display:none">
因为MF标签在实际网页应用时的外观并不符合手机使用时经常使用的点击按钮选择文件的习惯，所以在手机上使用时，要先隐藏该标签，在此使用了隐藏属性：tyle＝"display:none"，并通过一个按钮来实现点击并触发该标签的选择事件。
按钮代码如下：
<button class＝"button"onclick＝"document.getElementById('MF').click()；">选择</button>。
(2)文件选择模块，其用于在手机自带文件选择器选择待上传的文件；
文件选择模块实现了选择的功能需求，接下来就要选中并带回，在文件选择器中选中某文件并确认。
(3)页面暂存模块，其用于触发onchange事件，通过该事件调取手机中服务接收控制器中的uploadChange函数来实现选中文件的页面暂存；
在所述页面暂存模块中，所述uploadChange函数利用一个FormData来存储多个选中的文件。
在所述页面暂存模块中，当触发uploadChange函数时，循环向FormData中添加文件进而实现了页面暂存。
MF标签会自动触发选中事件，也就是标签中onchange事件，通过该事件调取控制器中的uploadChange函数，该函数用于实现选中文件的页面暂存；
uploadChange函数利用一个FormData，可以存储多个由第二步选中的文件，由于input标签的多选属性在手机中无法体现，所以只能通过多次点选选择按钮来实现文件的多选。当触发uploadChange时，循环向FormData中添加文件实现页面暂存。
(4)页面解析存储模块，其用于将暂存的页面信息提交至服务接口控制器中进行解析并存储。
页面解析存储模块将FormData通过Post请求提交至服务接口控制器中进行解析存储。
本发明在手机上实现文件的选择不能能够精确的查找或访问某个文件路径下的文件，也能够展示整个手机的文件目录，进而遍历整个目录；在网页中可实现文件选择的功能。利用这一标签在手机中可以实现打开资源浏览器的功能，从而省去了大量的插件封装开发时间，解决的文件上传时选择文件的耗费问题，提高了文件上传的效率和准确性。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用硬件实施例、软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(RandomAccessMemory，RAM)等。
上述虽然结合附图对本发明的具体实施方式进行了描述，但并非对本发明保护范围的限制，所属领域技术人员应该明白，在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。

Claims (2)

1.一种Ionic框架下的手机附件上传选择文件的方法，其特征在于，包括：
触发Ionic框架下的手机中文件选择功能标签，进而启动手机自带文件选择器；
在手机自带文件选择器选择待上传的文件；
触发onchange事件，通过该事件调取手机中服务接收控制器中的uploadChange函数来实现选中文件的页面暂存；
将暂存的页面信息提交至服务接口控制器中进行解析并存储；
所述手机中文件选择功能标签通过html标签input且属性type为file来实现的；
MF标签会自动触发选中事件，即标签中onchange事件；所述uploadChange函数利用一个FormData来存储多个选中的文件；
当触发uploadChange函数时，循环向FormData中添加文件进而实现了页面暂存；
将FormData通过Post请求提交至服务接口控制器中进行解析存储；
所述手机中文件选择功能标签还具有隐藏属性。
2.一种Ionic框架下的手机附件上传选择文件的系统，其特征在于，包括：
文件选择器启动模块，其用于触发Ionic框架下的手机中文件选择功能标签，进而启动手机自带文件选择器；
文件选择模块，其用于在手机自带文件选择器选择待上传的文件；
页面暂存模块，其用于触发onchange事件，通过该事件调取手机中服务接收控制器中的uploadChange函数来实现选中文件的页面暂存；
页面解析存储模块，其用于将暂存的页面信息提交至服务接口控制器中进行解析并存储；
在所述文件选择器启动模块中，所述手机中文件选择功能标签通过html标签input且属性type为file来实现的；
MF标签会自动触发选中事件，即标签中onchange事件；所述uploadChange函数利用一个FormData来存储多个选中的文件；
当触发uploadChange函数时，循环向FormData中添加文件进而实现了页面暂存；
将FormData通过Post请求提交至服务接口控制器中进行解析存储；
在所述文件选择器启动模块中，所述手机中文件选择功能标签还具有隐藏属性。
CN201710428028.9A 2017-06-08 2017-06-08 Ionic框架下的手机附件上传选择文件的方法及系统 Active CN107180107B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710428028.9A CN107180107B (zh) 2017-06-08 2017-06-08 Ionic框架下的手机附件上传选择文件的方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710428028.9A CN107180107B (zh) 2017-06-08 2017-06-08 Ionic框架下的手机附件上传选择文件的方法及系统

Publications (2)

Publication Number Publication Date
CN107180107A CN107180107A (zh) 2017-09-19
CN107180107B true CN107180107B (zh) 2020-12-29

Family

ID=59836715

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710428028.9A Active CN107180107B (zh) 2017-06-08 2017-06-08 Ionic框架下的手机附件上传选择文件的方法及系统

Country Status (1)

Country Link
CN (1) CN107180107B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109729120A (zh) * 2017-10-30 2019-05-07 北京国双科技有限公司 文件上传的方法及装置

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102685213A (zh) * 2012-04-09 2012-09-19 广州市动景计算机科技有限公司 基于移动终端的数据上传方法、装置及移动终端

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103685379B (zh) * 2012-09-12 2018-04-20 腾讯科技（深圳）有限公司 基于webkit内核浏览器的文件上传方法及装置
CN103870490A (zh) * 2012-12-12 2014-06-18 腾讯科技（武汉）有限公司 一种文件上传的方法及装置
US10635638B2 (en) * 2013-03-13 2020-04-28 Ivanti Us Llc Systems, methods and media for deferred synchronization of files in cloud storage client device
CN105677666A (zh) * 2014-11-19 2016-06-15 中兴通讯股份有限公司 文件的上传方法及装置
CN104866313A (zh) * 2015-05-22 2015-08-26 国云科技股份有限公司 一种通用的jsp上传文件的方法
CN106502666A (zh) * 2016-10-18 2017-03-15 国云科技股份有限公司 一种高自由度文件上传系统的实现方法

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102685213A (zh) * 2012-04-09 2012-09-19 广州市动景计算机科技有限公司 基于移动终端的数据上传方法、装置及移动终端

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
"基于Ionic 开发平台的数据库创建";李雅雯 等;《核技术》;20170430;第40卷(第4期);第040401-1至040401-6页 *

Also Published As

Publication number Publication date
CN107180107A (zh) 2017-09-19

Similar Documents

Publication Publication Date Title
US10325009B2 (en) Method and apparatus for using custom component parsing engine to parse tag of custom component
CN111984356B (zh) 页面跳转方法、装置、计算机设备和存储介质
CN107679214B (zh) 链接定位方法、装置、终端与计算机可读存储介质
CN109634718B (zh) 云平台创建镜像的方法及系统
CN107463563B (zh) 一种浏览器的信息服务处理方法及装置
WO2016177341A1 (zh) 接口调用方法、装置及终端
CN102946599A (zh) 实现移动终端应用程序下载的方法及移动终端
CN107480117B (zh) 自动化页面表单数据的恢复方法及装置
US20210105314A1 (en) Associating browser with application
CN107045546B (zh) 一种网页处理方法、装置及智能终端
CN111090431A (zh) 一种数据处理方法及装置
CN106919620B (zh) 单页面处理方法及装置
CN110941779A (zh) 加载页面的方法、装置、存储介质及电子设备
US11675479B2 (en) List display method and apparatus, computer device and computer-readable medium
CN113536174A (zh) 一种界面加载方法、装置及设备
CN106156189A (zh) 一种标签生成方法及装置、信息获取方法及装置
CN110442826B (zh) 基于页面标识的跨层级页面跳转方法、装置和系统
CN107180107B (zh) Ionic框架下的手机附件上传选择文件的方法及系统
CN113032078A (zh) 页面展示方法、装置、电子设备和计算机可读存储介质
CN106599045B (zh) 一种请求发送方法及装置
CN112182446B (zh) 页面的展示方法、装置、终端设备及计算机可读存储介质
CN111722850B (zh) 多系统间应用的处理方法、装置及系统
CN110362305B (zh) 一种表单组件状态切换方法及装置
CN111294377A (zh) 一种依赖关系的网络请求发送方法、终端装置及存储介质
EP3425510B1 (en) Automated testing method for application program user interface, electronic device, system, and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
CP03 Change of name, title or address
CP03 Change of name, title or address

Address after: 250101 science and Technology Industrial Park of Shandong University, 2600 Yingxiu Road, high tech Industrial Development Zone, Jinan City, Shandong Province

Patentee after: Huate Digital Technology Co.,Ltd.

Address before: Building 1-100, Dashan science and technology building, block 250B, Jinan City, Shandong Province

Patentee before: SHANDA LUNENG INFORMATION TECHNOLOGY Co.,Ltd.

CP03 Change of name, title or address
CP03 Change of name, title or address

Address after: Room 601, North Zone, 6th Floor, S06 Building, Inspur Science and Technology Park, No. 1036 Inspur Road, High tech Zone, Jinan City, Shandong Province, 250101

Patentee after: Inspur Digital (Shandong) Technology Co.,Ltd.

Address before: 250101 science and Technology Industrial Park of Shandong University, 2600 Yingxiu Road, high tech Industrial Development Zone, Jinan City, Shandong Province

Patentee before: Huate Digital Technology Co.,Ltd.

PE01 Entry into force of the registration of the contract for pledge of patent right
PE01 Entry into force of the registration of the contract for pledge of patent right

Denomination of invention: Method and System for Uploading and Selecting Mobile Attachment Files under Ionic Framework

Effective date of registration: 20231204

Granted publication date: 20201229

Pledgee: Shizhong Branch of Qilu Bank Co.,Ltd.

Pledgor: Inspur Digital (Shandong) Technology Co.,Ltd.

Registration number: Y2023980069209