一种图形化可交互的文件上传方法与流程

文档序号:16929828发布日期:2019-02-22 20:10阅读:241来源:国知局
本发明涉及金融全渠道综合管理平台领域,特别是涉及一种图形化可交互的文件上传方法。
背景技术
::随着互联网技术的迅猛发展,文件上传组件的选择越来越多,并从原始单一的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表格控件为bootstraptable或datatables。本发明的有益效果是:本发明支持用户通过文件上传组件将待上传文件的属性直接展示在web表格控件的行数据中,支持交互式的文件添加、删除与上传暂停功能,提供图形化的进度展示、异常提醒和状态更新服务;本发明能够实现文件上传全流程的管控,易于操作,简单易用,提高了扩展灵活性,降低了维护成本。附图说明图1是本发明一种图形化可交互的文件上传方法的逻辑流程图;图2是所示一种图形化可交互的文件上传方法的实施步骤流程图。具体实施方式下面结合附图对本发明的较佳实施例进行详细阐述,以使本发明的优点和特征能更易于被本领域技术人员理解,从而对本发明的保护范围做出更为清楚明确的界定。请参阅图1和图2,本发明实施例包括:一种图形化可交互的文件上传方法,结合文件上传组件和web表格控件进行文件上传,文件上传组件为swfupload、plupload等,web表格控件为bootstraptable或datatables等;文件上传包括以下步骤:第一步,批量选定待上传的文件,文件上传组件触发上传队列添加事件;第二步,上传文件表格展示:在上传队列添加事件的监听函数中使用web表格控件的insertrow方法添加文件对象id和其它相关属性,以表格的形式展示各个文件的名称、大小、类型和初始进度、状态等信息;第三步,文件删除交互:确认文件是否需要上传,全部需要上传则进行第四步;如果需要删除选择错误或不想上传的文件,文件上传组件触发上传队列删除事件,在上传队列删除事件的监听函数中使用web表格控件的removebyuniqueid方法通过文件id删除指定数据行,删除表格中行数据后进行第四步;第四步,文件开始上传,点击开始上传文件时,文件上传组件触发过程监控事件;第五步,上传进度图形化展示:在过程监控事件的监听函数中使用web表格控件的updatebyuniqueid方法通过文件id来实时更新文件的上传进度列属性值,同时提供进度警示功能,不同范围的进度值以不同颜色进行展示;第六步,上传暂停交互:如果不需要暂停则文件保持上传;如果需要暂停则点击上传暂停按钮,文件暂停上传直至取消暂停;点击上传暂停按钮后已上传的文件不做处理,上传中的文件停止上传,上传队列中未上传的文件不再进行上传,其中,已上传的文件会更新进度和上传状态,上传中的文件更新截止时的上传进度,未上传文件不做任何更新;取消暂停后文件继续上传;若出现文件上传失败,文件上传组件会触发上传异常事件,在上传异常事件的监听函数中使用web表格控件的updatebyuniqueid方法通过文件id来更新上传进度为失败时进度、更新状态为上传失败,并给出具体上传失败的异常消息提示;若文件上传成功,文件上传组件会触发上传完成事件,在上传完成事件的监听函数中使用web表格控件的updatebyuniqueid方法通过文件id来更新上传进度为100%、更新状态为上传成功,并给出上传成功的消息提示。第七步,上传流程结束。本发明支持用户通过文件上传组件将待上传文件的属性直接展示在web表格控件的行数据中,支持交互式的文件添加、删除与上传暂停功能,提供图形化的进度展示、异常提醒和状态更新服务。不仅提供了图形化的上传文件信息展示、文件上传进度展示和文件上传结果展示等方法,还设计了可交互的上传文件校验、上传进程管控及上传结果反馈等细节体检。所有符合本方法或者以本方法为基础的文件上传实现,都属于本发明的保护范围。以上所述仅为本发明的实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的
技术领域
:,均同理包括在本发明的专利保护范围内。当前第1页12当前第1页12
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1