CN109375968A - 一种图形化可交互的文件上传方法 - Google Patents
一种图形化可交互的文件上传方法 Download PDFInfo
- Publication number
- CN109375968A CN109375968A CN201810984236.1A CN201810984236A CN109375968A CN 109375968 A CN109375968 A CN 109375968A CN 201810984236 A CN201810984236 A CN 201810984236A CN 109375968 A CN109375968 A CN 109375968A
- Authority
- CN
- China
- Prior art keywords
- file
- upload
- uploads
- uploading
- progress
- 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.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
- G06F9/4482—Procedural
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种图形化可交互的文件上传方法,结合文件上传组件和Web表格控件进行文件上传,批量选择待上传文件;上传文件表格展示,包括文件的名称、大小、类型和初始进度、状态等信息;文件删除交互,是:删除表格中行数据;文件开始上传;上传进度图形化展示;上传暂停交互,是:停止文件上传,更新当前进度与上传状态;上传异常处理,更新当前进度、上传状态,并给出异常消息提示;文件上传完成,更新进度、状态,并给出上传成功消息提示。通过上述方式,本发明支持用户通过文件上传组件将待上传文件的属性直接展示在Web表格控件的行数据中,支持交互式的文件添加、删除与上传暂停功能,提供图形化的进度展示、异常提醒和状态更新服务。
Description
技术领域
本发明涉及金融全渠道综合管理平台领域,特别是涉及一种图形化可交互的文件上传方法。
背景技术
随着互联网技术的迅猛发展,文件上传组件的选择越来越多,并从原始单一的flash方式转向html5、silverlight、flash等多种方式的自行适配。
Web表格插件也是百家争鸣,它们共同的特点不仅使用方便,功能更是强大,无论是样式的调整,还是功能的扩展,都可以轻松的达到效果。只要通过简单的设置,就可以拥有强大的选择、排序、动态列、卡片视图、分页,以及导出和过滤等功能。
使用现有技术时,一旦需求有所变更或者当前上传组件不适用,就需要重新进行元素设计,难以维护不易使用;对于包括界面自适应、排序、动态列和国际化等的界面优化需求,拓展起来费时费力;对于用户交互,没有统一的处理方式及样式设计,体检较差。
发明内容
本发明主要解决的技术问题是提供一种图形化可交互的文件上传方法,结合文件上传组件和Web表格控件,能够实现图形化的上传文件信息展示、文件上传进度展示和文件上传结果展示等功能;还能实现可交互的上传文件校验、上传进程管控及上传结果反馈等功能。
为解决上述技术问题,本发明采用的一个技术方案是:提供一种图形化可交互的文件上传方法,结合文件上传组件和Web表格控件进行文件上传,文件上传包括以下步骤:
第一步,批量选定待上传的文件,文件上传组件触发上传队列添加事件;
第二步,上传文件表格展示:在上传队列添加事件的监听函数中使用Web表格控件的insertRow方法添加文件对象id和其它相关属性,以表格的形式展示各个文件的名称、大小、类型和初始进度、状态等信息;
第三步,文件删除交互:确认文件是否需要上传,全部需要上传则进行第四步;如果需要删除选择错误或不想上传的文件,文件上传组件触发上传队列删除事件,在上传队列删除事件的监听函数中使用Web表格控件的removeByUniqueId方法通过文件id删除指定数据行,删除表格中行数据后进行第四步;
第四步,文件开始上传,点击开始上传文件时,文件上传组件触发过程监控事件;
第五步,上传进度图形化展示:在过程监控事件的监听函数中使用Web表格控件的updateByUniqueId方法通过文件id来实时更新文件的上传进度列属性值,同时提供进度警示功能,不同范围的进度值以不同颜色进行展示;
第六步,上传暂停交互:如果不需要暂停则文件保持上传;如果需要暂停则点击上传暂停按钮,文件暂停上传直至取消暂停;点击上传暂停按钮后已上传的文件不做处理,上传中的文件停止上传,上传队列中未上传的文件不再进行上传,其中,已上传的文件会更新进度和上传状态,上传中的文件更新截止时的上传进度,未上传文件不做任何更新;取消暂停后文件继续上传;
若出现文件上传失败,文件上传组件会触发上传异常事件,在上传异常事件的监听函数中使用Web表格控件的updateByUniqueId方法通过文件id来更新上传进度为失败时进度、更新状态为上传失败,并给出具体上传失败的异常消息提示;
若文件上传成功,文件上传组件会触发上传完成事件,在上传完成事件的监听函数中使用Web表格控件的updateByUniqueId方法通过文件id来更新上传进度为100%、更新状态为上传成功,并给出上传成功的消息提示。
第七步,上传流程结束。
进一步,所述文件上传组件为SWFUpload或Plupload。
进一步,所述Web表格控件为Bootstrap Table或Datatables。
本发明的有益效果是:本发明支持用户通过文件上传组件将待上传文件的属性直接展示在Web表格控件的行数据中,支持交互式的文件添加、删除与上传暂停功能,提供图形化的进度展示、异常提醒和状态更新服务;本发明能够实现文件上传全流程的管控,易于操作,简单易用,提高了扩展灵活性,降低了维护成本。
附图说明
图1是本发明一种图形化可交互的文件上传方法的逻辑流程图;
图2是所示一种图形化可交互的文件上传方法的实施步骤流程图。
具体实施方式
下面结合附图对本发明的较佳实施例进行详细阐述,以使本发明的优点和特征能更易于被本领域技术人员理解,从而对本发明的保护范围做出更为清楚明确的界定。
请参阅图1和图2,本发明实施例包括:
一种图形化可交互的文件上传方法,结合文件上传组件和Web表格控件进行文件上传,文件上传组件为SWFUpload、Plupload等,Web表格控件为Bootstrap Table或Datatables等;文件上传包括以下步骤:
第一步,批量选定待上传的文件,文件上传组件触发上传队列添加事件;
第二步,上传文件表格展示:在上传队列添加事件的监听函数中使用Web表格控件的insertRow方法添加文件对象id和其它相关属性,以表格的形式展示各个文件的名称、大小、类型和初始进度、状态等信息;
第三步,文件删除交互:确认文件是否需要上传,全部需要上传则进行第四步;如果需要删除选择错误或不想上传的文件,文件上传组件触发上传队列删除事件,在上传队列删除事件的监听函数中使用Web表格控件的removeByUniqueId方法通过文件id删除指定数据行,删除表格中行数据后进行第四步;
第四步,文件开始上传,点击开始上传文件时,文件上传组件触发过程监控事件;
第五步,上传进度图形化展示:在过程监控事件的监听函数中使用Web表格控件的updateByUniqueId方法通过文件id来实时更新文件的上传进度列属性值,同时提供进度警示功能,不同范围的进度值以不同颜色进行展示;
第六步,上传暂停交互:如果不需要暂停则文件保持上传;如果需要暂停则点击上传暂停按钮,文件暂停上传直至取消暂停;点击上传暂停按钮后已上传的文件不做处理,上传中的文件停止上传,上传队列中未上传的文件不再进行上传,其中,已上传的文件会更新进度和上传状态,上传中的文件更新截止时的上传进度,未上传文件不做任何更新;取消暂停后文件继续上传;
若出现文件上传失败,文件上传组件会触发上传异常事件,在上传异常事件的监听函数中使用Web表格控件的updateByUniqueId方法通过文件id来更新上传进度为失败时进度、更新状态为上传失败,并给出具体上传失败的异常消息提示;
若文件上传成功,文件上传组件会触发上传完成事件,在上传完成事件的监听函数中使用Web表格控件的updateByUniqueId方法通过文件id来更新上传进度为100%、更新状态为上传成功,并给出上传成功的消息提示。
第七步,上传流程结束。
本发明支持用户通过文件上传组件将待上传文件的属性直接展示在Web表格控件的行数据中,支持交互式的文件添加、删除与上传暂停功能,提供图形化的进度展示、异常提醒和状态更新服务。不仅提供了图形化的上传文件信息展示、文件上传进度展示和文件上传结果展示等方法,还设计了可交互的上传文件校验、上传进程管控及上传结果反馈等细节体检。所有符合本方法或者以本方法为基础的文件上传实现,都属于本发明的保护范围。
以上所述仅为本发明的实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本发明的专利保护范围内。
Claims (3)
1.一种图形化可交互的文件上传方法,其特征在于,结合文件上传组件和Web表格控件进行文件上传,文件上传包括以下步骤:
第一步,批量选定待上传的文件,文件上传组件触发上传队列添加事件;
第二步,上传文件表格展示:在上传队列添加事件的监听函数中使用Web表格控件的insertRow方法添加文件对象id和其它相关属性,以表格的形式展示各个文件的名称、大小、类型和初始进度、状态等信息;
第三步,文件删除交互:确认文件是否需要上传,全部需要上传则进行第四步;如果需要删除选择错误或不想上传的文件,文件上传组件触发上传队列删除事件,在上传队列删除事件的监听函数中使用Web表格控件的removeByUniqueId方法通过文件id删除指定数据行,删除表格中行数据后进行第四步;
第四步,文件开始上传,点击开始上传文件时,文件上传组件触发过程监控事件;
第五步,上传进度图形化展示:在过程监控事件的监听函数中使用Web表格控件的updateByUniqueId方法通过文件id来实时更新文件的上传进度列属性值,同时提供进度警示功能,不同范围的进度值以不同颜色进行展示;
第六步,上传暂停交互:如果不需要暂停则文件保持上传;如果需要暂停则点击上传暂停按钮,文件暂停上传直至取消暂停;点击上传暂停按钮后已上传的文件不做处理,上传中的文件停止上传,上传队列中未上传的文件不再进行上传,其中,已上传的文件会更新进度和上传状态,上传中的文件更新截止时的上传进度,未上传文件不做任何更新;取消暂停后文件继续上传;
若出现文件上传失败,文件上传组件会触发上传异常事件,在上传异常事件的监听函数中使用Web表格控件的updateByUniqueId方法通过文件id来更新上传进度为失败时进度、更新状态为上传失败,并给出具体上传失败的异常消息提示;
若文件上传成功,文件上传组件会触发上传完成事件,在上传完成事件的监听函数中使用Web表格控件的updateByUniqueId方法通过文件id来更新上传进度为100%、更新状态为上传成功,并给出上传成功的消息提示。
第七步,上传流程结束。
2.根据权利要求1所述的一种图形化可交互的文件上传方法,其特征在于:所述文件上传组件为SWFUpload或Plupload。
3.根据权利要求1所述的一种图形化可交互的文件上传方法,其特征在于:所述Web表格控件为Bootstrap Table或Datatables。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810984236.1A CN109375968A (zh) | 2018-08-28 | 2018-08-28 | 一种图形化可交互的文件上传方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810984236.1A CN109375968A (zh) | 2018-08-28 | 2018-08-28 | 一种图形化可交互的文件上传方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN109375968A true CN109375968A (zh) | 2019-02-22 |
Family
ID=65404831
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810984236.1A Pending CN109375968A (zh) | 2018-08-28 | 2018-08-28 | 一种图形化可交互的文件上传方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109375968A (zh) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110275866A (zh) * | 2019-04-25 | 2019-09-24 | 武汉众邦银行股份有限公司 | 文件生成过程的交互方法、装置、服务器和用户终端 |
CN111158939A (zh) * | 2019-12-31 | 2020-05-15 | 中消云(北京)物联网科技研究院有限公司 | 数据处理方法、装置、存储介质及电子设备 |
CN111611044A (zh) * | 2020-05-26 | 2020-09-01 | 北京字节跳动网络技术有限公司 | 上传任务的反馈处理方法及相关设备 |
CN113721813A (zh) * | 2021-08-20 | 2021-11-30 | 武汉虹信技术服务有限责任公司 | 基于移动设备的图片文档混合上传或展示方法及系统 |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102497395A (zh) * | 2011-11-30 | 2012-06-13 | 北京京航计算通讯研究所 | 断点上传应用控制方法 |
CN103440295A (zh) * | 2013-08-20 | 2013-12-11 | 乐视网信息技术(北京)股份有限公司 | 一种多媒体文件上传方法及电子终端 |
CN103685413A (zh) * | 2012-09-19 | 2014-03-26 | 腾讯科技(深圳)有限公司 | 文件上传方法和系统 |
CN104092741A (zh) * | 2014-06-26 | 2014-10-08 | 湖北安标信息技术有限公司 | 一种基于浏览器的多实例大文件上传的处理方法 |
US9195361B1 (en) * | 2012-09-07 | 2015-11-24 | Google Inc. | Single progress indicator depicting multiple subprocesses of an upload of a content item |
CN106502666A (zh) * | 2016-10-18 | 2017-03-15 | 国云科技股份有限公司 | 一种高自由度文件上传系统的实现方法 |
CN107592369A (zh) * | 2017-10-18 | 2018-01-16 | 郑州云海信息技术有限公司 | 云计算系统中文件上传的管理方法和装置 |
-
2018
- 2018-08-28 CN CN201810984236.1A patent/CN109375968A/zh active Pending
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102497395A (zh) * | 2011-11-30 | 2012-06-13 | 北京京航计算通讯研究所 | 断点上传应用控制方法 |
US9195361B1 (en) * | 2012-09-07 | 2015-11-24 | Google Inc. | Single progress indicator depicting multiple subprocesses of an upload of a content item |
CN103685413A (zh) * | 2012-09-19 | 2014-03-26 | 腾讯科技(深圳)有限公司 | 文件上传方法和系统 |
CN103440295A (zh) * | 2013-08-20 | 2013-12-11 | 乐视网信息技术(北京)股份有限公司 | 一种多媒体文件上传方法及电子终端 |
CN104092741A (zh) * | 2014-06-26 | 2014-10-08 | 湖北安标信息技术有限公司 | 一种基于浏览器的多实例大文件上传的处理方法 |
CN106502666A (zh) * | 2016-10-18 | 2017-03-15 | 国云科技股份有限公司 | 一种高自由度文件上传系统的实现方法 |
CN107592369A (zh) * | 2017-10-18 | 2018-01-16 | 郑州云海信息技术有限公司 | 云计算系统中文件上传的管理方法和装置 |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110275866A (zh) * | 2019-04-25 | 2019-09-24 | 武汉众邦银行股份有限公司 | 文件生成过程的交互方法、装置、服务器和用户终端 |
CN111158939A (zh) * | 2019-12-31 | 2020-05-15 | 中消云(北京)物联网科技研究院有限公司 | 数据处理方法、装置、存储介质及电子设备 |
CN111611044A (zh) * | 2020-05-26 | 2020-09-01 | 北京字节跳动网络技术有限公司 | 上传任务的反馈处理方法及相关设备 |
WO2021238636A1 (zh) * | 2020-05-26 | 2021-12-02 | 北京字节跳动网络技术有限公司 | 上传任务的反馈处理方法及相关设备 |
CN113721813A (zh) * | 2021-08-20 | 2021-11-30 | 武汉虹信技术服务有限责任公司 | 基于移动设备的图片文档混合上传或展示方法及系统 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109375968A (zh) | 一种图形化可交互的文件上传方法 | |
DE202017105691U1 (de) | Intelligente Assistenz für wiederholte Aktionen | |
DE112012000944B4 (de) | Auf einer Webseite selbst erfolgende Bearbeitung und Austausch von Webinhalt in Echtzeit | |
DE112012006925B4 (de) | Systemkonstruktions-Unterstützungswerkzeug und System | |
EP2350873A1 (de) | Erfassung des visuellen inhalts von browserfenstern | |
CN104503769B (zh) | 一种基于xml配置文件的字符点阵液晶界面实现方法 | |
CN105095374A (zh) | 移动终端新闻浏览的方法及装置 | |
EP3189383A1 (de) | Generisches bedienelement für vernetzte hausgeräte | |
CN109917991A (zh) | 电子书翻页方法、电子设备及计算机存储介质 | |
CN103064682A (zh) | 面向设备的人机界面组态设计方法 | |
CN113495491A (zh) | 设备联动关系的展示方法、装置、电子设备及存储介质 | |
CN106354378B (zh) | 一种快速选中多个目标的方法和装置 | |
CN112667226A (zh) | 一种页面文件的设置方法、装置、设备及存储介质 | |
CN107179906B (zh) | 一种安卓系统TickerView控件优化的方法 | |
US20140040724A1 (en) | Method and system for website creation | |
DE102019204585A1 (de) | Generierung und Verteilung von Konfigurations-Datenstrukturen für Steuerungssysteme | |
CN107229257B (zh) | 用于在hmi系统中显示监视查看器的方法 | |
CN103135912B (zh) | 一种生成操作对象的方法和电子设备 | |
JP6328042B2 (ja) | 施設監視制御装置および施設監視制御方法 | |
CN101436127B (zh) | 一种选择日期的方法及装置 | |
CN103853747A (zh) | 一种声源网页的控制方法和装置 | |
CN108388667A (zh) | 一种网页广告可视化标记和拦截系统及方法 | |
CN105159534A (zh) | 一种图形按钮的处理方法及装置 | |
EP3905030A1 (en) | System for providing software development environment, method for providing software development environment, and non-transitory computer readable medium | |
CN104516860A (zh) | 选择被显示文档内的文本的方法和系统 |
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 | ||
TA01 | Transfer of patent application right | ||
TA01 | Transfer of patent application right |
Effective date of registration: 20210823 Address after: 215100 818 Wusong Road, Wusong River Industrial Park, Wuzhong development area, Suzhou, Jiangsu Applicant after: INSPUR FINANCIAL INFORMATION TECHNOLOGY Co.,Ltd. Address before: 215100 Building 1, 178 Tayun Road, Yuexi street, Wuzhong District, Suzhou City, Jiangsu Province Applicant before: SUZHOU INSPUR INTELLIGENT SOFTWARE Co.,Ltd. |
|
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190222 |