CN112068925A - 一种基于WebUploader组件的文件上传方法、装置、电子设备和可读存储介质 - Google Patents
一种基于WebUploader组件的文件上传方法、装置、电子设备和可读存储介质 Download PDFInfo
- Publication number
- CN112068925A CN112068925A CN202010753112.XA CN202010753112A CN112068925A CN 112068925 A CN112068925 A CN 112068925A CN 202010753112 A CN202010753112 A CN 202010753112A CN 112068925 A CN112068925 A CN 112068925A
- Authority
- CN
- China
- Prior art keywords
- file
- uploading
- webuploader
- component
- target
- 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
- 238000000034 method Methods 0.000 title claims abstract description 62
- 238000012544 monitoring process Methods 0.000 claims abstract description 20
- 230000008569 process Effects 0.000 claims abstract description 11
- 230000005540 biological transmission Effects 0.000 claims description 14
- 230000006835 compression Effects 0.000 claims description 14
- 238000007906 compression Methods 0.000 claims description 14
- 238000012545 processing Methods 0.000 claims description 8
- 238000012795 verification Methods 0.000 claims description 8
- 238000004590 computer program Methods 0.000 claims description 5
- 239000012634 fragment Substances 0.000 abstract description 9
- 230000006870 function Effects 0.000 description 9
- 238000010586 diagram Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000005034 decoration Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000011022 operating instruction Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
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/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
- G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/76—Adapting program code to run in a different environment; Porting
-
- 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/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/542—Event management; Broadcasting; Multicasting; Notifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/06—Protocols specially adapted for file transfer, e.g. file transfer protocol [FTP]
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- Multimedia (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请涉及互联网文件上传技术领域，尤其涉及一种基于WebUploader组件的文件上传的方法、装置、电子设备和可读存储介质，所述方法包括：在目标页面加载WebUploader组件资源文件；初始化所述WebUploader组件实例；选择目标文件，利用所述WebUploader组件实例上传所述目标文件至服务器；其中在所述目标文件上传过程中监听WebUploader事件，并根据监听结果可自定义文件上传状态。基于WebUploader组件进行多实例多文件上传，同时兼容主流浏览器并实现HTML5和Flash两套运行时支持，而且支持大文件分片上传和免费支持断点续传。
Description
技术领域
本申请涉及互联网文件上传技术领域，尤其涉及一种基于 WebUploader组件的文件上传方法、装置、电子设备和可读存储介质。
背景技术
目前可以借助上传组件来辅助实现在网页进行文件上传，但是传统基于WebUploader组件的文件上传以进行单实例或单文件上传为主，即一个页面只有一个上传实例，每个实例上传一个文件。已有的多实例多文件的文件上传技术却并不能很好地同时兼容HTML5和Flash，且在上传大文件时经常存在因网络问题导致传输失败，传输失败后又需要重新重传整个文件，造成文件上传效率低，用户体验差的问题。
发明内容
本申请的目的旨在至少能解决上述的技术缺陷之一。本申请所采用的技术方案如下：
第一方面，本申请实施例提供一种基于WebUploader组件的文件上传方法，所述方法包括：
在目标页面加载WebUploader组件资源文件；
初始化所述WebUploader组件实例；
选择目标文件，利用所述WebUploader组件实例上传所述目标文件至服务器；其中在所述目标文件上传过程中监听WebUploader事件，并根据监听结果可自定义文件上传状态。
可选地，所述初始化WebUploader组件实例包括：
指定文件上传的服务器地址、指定Uploader.swf文件路径、指定上传按钮和指定文件类型。
可选地，所述方法还包括：
利用MD5秒传判断服务器是否存在与目标文件相同的文件；
如果存在，则停止上传目标文件。
可选地，其特征在于，在所述方法还包括：
识别目标文件的大文件时，将所述目标文件切分为N个目标子文件；
将所述N个目标子文件利用所述WebUploader组件实例同时上传；
其中所述N个目标子文件在服务器被处理整合为目标文件。
可选地，所述方法还包括：
将第N目标子文件在利用所述WebUploader组件上传前与服务器进行验证；
如果验证服务器存在与所述第N个目标子文件相同的文件，则停止上传所述第N个目标子文件。
可选地，所述方法还包括：
当所述目标文件为图片格式文件时，将所述目标文件按照预设压缩参数进行压缩；
将所述压缩的目标文件利用所述WebUploader组件上传至服务器，其中在所述目标图片文件上传时可见缩略预览图片。
可选地，在初始化所述WebUploader组件实例后，所述方法还包括：
创建可编辑选项；
将所述可编辑选项与所述WebUploader组件实例进行动态关联。
第二方面，本申请实施例提供一种基于WebUploader组件的文件上传装置，所述装置包括：加载模块、初始化模块、选择模块、上传模块、监听模块和编辑模块，其中，
所述加载模块，用于在目标页面加载WebUploader组件资源文件；
所述初始化模块，用于初始化所述WebUploader组件实例；
所述选择模块，用于选择目标文件；
所述上传模块，用于利用所述WebUploader组件实例上传所述目标文件至服务器；
所述监听模块，用于在所述目标文件上传过程中监听WebUploader 事件；
编辑模块，用于并根据监听结果自定义文件上传状态。
可选地，所述装置还包括判断模块，用于：
利用MD5秒传判断服务器是否存在与目标文件相同的文件；
如果存在，则停止上传目标文件。
可选地，在所述装置还包括处理模块，其中，
所述处理模块，用于识别目标文件的大文件时，将所述目标文件切分为N个目标子文件；
所述上传模块，用于将所述N个目标子文件利用所述WebUploader 组件实例同时上传；
其中所述N个目标子文件在服务器被处理整合为目标文件。
可选地，所述装置还包括文件压缩模块，其中，
所述文件压缩模块，用于当所述目标文件为图片格式文件时，将所述目标文件按照预设压缩参数进行压缩；
所述上传模块，用于将所述压缩的目标文件利用所述WebUploader 组件上传至服务器，其中在所述目标图片文件上传时可见缩略预览图片。
可选地，所述装置还包括创建模块和关联模块；
所述创建模块，用于创建可编辑选项；
所述关联模块，用于将所述可编辑选项与所述WebUploader组件实例进行动态关联。
第三方面，本申请实施例提供了一种电子设备，包括处理器和存储器；
所述存储器，用于存储操作指令；
所述处理器，用于通过调用所述操作指令，执行上述基于WebUploader 组件的文件上传方法。
第四方面，一种计算机可读存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述基于WebUploader组件的文件上传的方法。
本申请实施例提供的技术方案带来的有益效果是：本申请实施例提供的基于WebUploader组件的文件上传方案，通过在目标页面加载 WebUploader组件资源文件；初始化所述WebUploader组件实例；选择目标文件，利用所述WebUploader组件实例上传所述目标文件至服务器；其中在所述目标文件上传过程中监听WebUploader事件，并根据监听结果可自定义文件上传状态，本方案实现了：
1)基于WebUploader组件，兼容主流浏览器，实现了HTML5和Flash 两套运行时支持，不仅支持大文件分片上传，还免费支持断点续传。
2)支持一个页面创建多个上传实例，每个上传实例上传/维护多个文件；对于允许多选项多文件的问卷场景有很好的实用性，改进和推广了文件 WebUploader上传组件的业务范围。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。
图1为本申请实施例提供的一种基于WebUploader组件的文件上传方法的流程示意图；
图2为本申请实施例提供的一种基于WebUploader组件的文件上传装置的结构示意图；
图3为本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本发明的限制。
本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。这里使用的措辞“和/或”包括一个或多个相关联的列出项的全部或任一单元和全部组合。
传统基于WebUploader组件的文件上传以进行单实例或单文件上传为主，即一个页面只有一个上传实例，每个实例上传一个文件。而部分插件虽然能够实现多文件上传却存在无法同时支持Flash和HTML5，且大文件上传存在用户体验不好的问题，且大部分都是付费的组件。基于此，本申请公开了一种基于传统组件基于WebUploader组件的文件上传方法，至少解决上述问题之一。
为更清楚地介绍本申请实施例，下面介绍一些可能用于实施例的定义、概念或装置：
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以 HTML5为主，FLASH为辅的现代文件上传组件。
Ajax(Asynchronous Javascript And XML)(异步JavaScript和 XML)，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
CSS，(Cascading Style Sheets)，是层叠样式表一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) 等文件样式的计算机语言)。
MD5信息摘要算法(英语：MD5 Message-Digest Algorithm)，一种被广泛使用的密码散列函数，可以产生出一个128位(16字节)的散列值(hash value)，用于确保信息传输完整一致。
jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理、 HTML文档遍历、Ajax交互和动画,以便快速开发网站。目的是让开发者更容易地在网站上使用JavaScript。
秒传是一种在网盘上常见的“忽略式”上传方式。
多实例是指同一个页面包含多个WebUploader组件实例。
多文件是指同一个WebUploader实例可上传多个文件。
下面将结合附图以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。
为使本申请的目的、技术方案和优点更加清楚，图1公开了本申请实施例提供的一种基于WebUploader组件的文件上传方法的流程图，如图1 所示，所述基于WebUploader组件的文件上传方法包括：
S101、在目标页面加载WebUploader组件资源文件；
预先下载最新版本WebUploader、JQuery后解压，并在目标页面中加载WebUploader组件资源文件，资源文件包括WebUploader的JS、CSS 和SWF资源以及JQuery库。
S102、初始化所述WebUploader组件实例；
所述初始化WebUploader组件实例包括：指定文件上传的服务器地址、指定Uploader.swf文件路径、指定上传按钮和指定文件类型。其中，初始化WebUploader组件实例时指定Uploader.swf地址是当浏览器不支持HTML5的情况下的备用方案，配置好路径后即可，WebUploader会自动选择方案。
S103、选择目标文件，利用所述WebUploader组件实例上传所述目标文件至服务器；其中在所述目标文件上传过程中监听WebUploader事件，并根据监听结果可自定义文件上传状态。
监听WebUploader实例事件，事件包括文件选择(file Queued)、上传过程中(upload Progress)、上传成功(upload Success)、上传失败(upload Error)、上传完成(upload Complete)。用户可以通过事件注册自定义文件上传的状态和上传进度。
在本申请可选实施例中，所述方法还包括：利用MD5秒传判断服务器是否存在与目标文件相同的文件；如果存在，则停止上传目标文件。具体实现过程为：在目标文件上传前，把内容读取出来，算出MD5值，然后通过Ajax与服务器进行验证,然后根据结果选择继续上传还是跳过上传。由于这个验证行为是异步的，可以借助WebUploader提供的hook(WebUploader.Uploader.register)来实现。在上传前的处理器(Handler) 里面返回一个Promise对象，让WebUploader等待并监听此Promise 的完成事件，自动继续。
在本申请可选实施例中，当识别到目标文件的大文件时，将所述目标文件切分为N个目标子文件；将所述N个目标子文件利用所述 WebUploader组件实例同时上传；其中所述N个目标子文件在服务器被处理整合为目标文件。这是由于服务器端请求大小的限制，如果直接上传大文件可能无法上传成功，此外即使不限制大小也可能因为传输时间过长而超时。所以当上传的目标文件为大文件时优选方式为分段上传，即将原始目标文件分成N个目标子文件单独上传(每个目标子文件大小建议5M 左右)，服务器端在N个目标子文件都接收完毕后再将它们合并起来。必要地，目标文件进行分片上传时需要将WebUploader组件配置参数分片属性(chunked)置为true，并指定每分片的大小属性ChunkSize，这样在每个目标子文件上传的同时，还会自动带上分片数(chunks)和当前分片索引(chunk)两个参数。
进一步，在可选实施例中，所述方法还包括：
将第N目标子文件在利用所述WebUploader组件上传前与服务器进行验证，验证方式可以采用MD5验证，也可以直接通过分片的文件名来验证；
如果验证服务器存在与所述第N个目标子文件相同的文件，说明服务器已存在这个目标子文件，则停止上传所述第N个目标子文件。该申请实施例实现了基于传统WebUploader组件进行文件的断点续传。
在本申请可选实施例，所述方法还包括：
当所述目标文件为图片格式文件时，将所述目标文件按照预设压缩参数进行压缩；与普通的文件上传相比，图片上传通常还需要实现文件过滤、图片预览、图片压缩等功能。因此在初始化WebUploader组件实例时可预先设置压缩参数。
将所述压缩的目标文件利用所述WebUploader组件上传至服务器，可选地，所述目标图片文件上传时可见缩略预览图片。
上述实施例的文件上传方案实现了基于WebUploader组件进行多文件传输，解决了目前现有技术WebUploader组件一个实例只能上传一个文件的限制，提升了上传效率。
在本申请优选实施例中，在初始化所述WebUploader组件实例后，所述方法还包括：创建可编辑选项；将所述可编辑选项与所述WebUploader 组件实例进行动态关联。如前实施例初始化一个多文件上传的 WebUploader实例只能满足一个选项上传多个文件，因此对于多选项多文件设置的问卷场景，还需要为动态生成的选项创建WebUploader实例关联支持该选项上传多个文件，实现基于WebUploader组件进行多实例文件上传的功能。主要实现步骤如下：
步骤1、创建选项：创建新选项时，动态创建WebUploader上传实例并关联到新创建的选项，通过上传实例可以维护其关联选项的目标文件，包括上传和删除。
步骤2、删除选项：删除某个选项后选项顺序会重新排序，为重排后的选项动态创建WebUploader上传实例，并将选项已上传成功的目标文件关联到该实例。
步骤3、编辑选项：选项由预览状态切换到编辑状态时，动态创建 WebUploader上传实例，并将目标文件初始化到该实例。
基于图1所示的实施例提供的基于WebUploader组件的文件上传方法，图2示出了本申请实施例提供的一种基于WebUploader组件的文件上传装置，如图2所示，该装置主要可以包括：201加载模块、202初始化模块、 203选择模块、204上传模块、205监听模块和206编辑模块，其中，
所述201加载模块，用于在目标页面加载WebUploader组件资源文件；
所述202初始化模块，用于初始化所述WebUploader组件实例；
所述203选择模块，用于选择目标文件；
所述204上传模块，用于利用所述WebUploader组件实例上传所述目标文件至服务器；
所述205监听模块，用于在所述目标文件上传过程中监听WebUploader事件；
所述206编辑模块，用于并根据监听结果自定义文件上传状态。
在本申请可选实施例中，所述装置还包括判断模块，用于：
利用MD5秒传判断服务器是否存在与目标文件相同的文件；
如果存在，则停止上传目标文件。
在本申请可选实施例中，在所述装置还包括处理模块，其中，
所述处理模块，用于识别目标文件的大文件时，将所述目标文件切分为N个目标子文件；
所述上传模块，用于将所述N个目标子文件利用所述WebUploader 组件实例同时上传；
其中所述N个目标子文件在服务器被处理整合为目标文件。
在本申请可选实施例中，所述装置还包括文件压缩模块，其中，
所述文件压缩模块，用于当所述目标文件为图片格式文件时，将所述目标文件按照预设压缩参数进行压缩；
所述上传模块，用于将所述压缩的目标文件利用所述WebUploader 组件上传至服务器，其中在所述目标图片文件上传时可见缩略预览图片。
在本申请可选实施例中，所述装置还包括创建模块和关联模块；
所述创建模块，用于创建可编辑选项；
所述关联模块，用于将所述可编辑选项与所述WebUploader组件实例进行动态关联。
在本申请可选实施例中，所述初始化模块还用于：指定文件上传的服务器地址、指定Uploader.swf文件路径、指定上传按钮和指定文件类型
在本申请可选实施例中，所述判断模块还用于将第N目标子文件在利用所述WebUploader组件上传前与服务器进行验证；如果验证服务器存在与所述第N个目标子文件相同的文件，则所述上传模块停止上传所述第N 个目标子文件。
可以理解的是，本实施例中的基于WebUploader组件的文件上传装置的上述各模块具有实现图1中所示的实施例中的方法相应步骤的功能。该功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。该硬件或软件包括一个或多个与上述功能相对应的模块。上述模块可以是软件和/ 或硬件，上述各模块可以单独实现，也可以多个模块集成实现。对于上述各模块的功能描述具体可以参见图1中所示实施例中的方法的对应描述，在此不再赘述。
本申请实施例提供了一种电子设备，包括处理器和存储器；
存储器，用于存储操作指令；
处理器，用于通过调用操作指令，执行本申请任一实施方式中所提供的基于WebUploader组件的文件上传方法。
作为一个示例，图3示出了本申请实施例所适用的一种电子设备的结构示意图，如图3所示，该电子设备2000包括：处理器2001和存储器 2003。其中，处理器2001和存储器2003相连，如通过总线2002相连。可选的，电子设备2000还可以包括收发器2004。需要说明的是，实际应用中收发器2004不限于一个，该电子设备2000的结构并不构成对本申请实施例的限定。
其中，处理器2001应用于本申请实施例中，用于实现上述方法实施例所示的方法。收发器2004可以包括接收机和发射机，收发器2004应用于本申请实施例中，用于执行时实现本申请实施例的电子设备与其他设备通信的功能。
处理器2001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC (Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器2001 也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP 和微处理器的组合等。
总线2002可包括一通路，在上述组件之间传送信息。总线2002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或 EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线2002可以分为地址总线、数据总线、控制总线等。为便于表示，图3中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
存储器2003可以是ROM(Read Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(Random Access Memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。
可选的，存储器2003用于存储执行本申请方案的应用程序代码，并由处理器2001来控制执行。处理器2001用于执行存储器2003中存储的应用程序代码，以实现本申请任一实施方式中所提供的基于WebUploader 组件的文件上传方法。
本申请实施例提供的电子设备，适用于上述方法任一实施例，在此不再赘述。
本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现上述方法实施例所示的基于WebUploader组件的文件上传方法。
本申请实施例提供的计算机可读存储介质，适用于上述方法任一实施例，在此不再赘述。
本申请实施例提供的基于WebUploader组件的文件上传方案，通过在目标页面加载WebUploader组件资源文件；初始化所述WebUploader组件实例；选择目标文件，利用所述WebUploader组件实例上传所述目标文件至服务器；其中在所述目标文件上传过程中监听WebUploader事件，并根据监听结果可自定义文件上传状态，本方案实现了基于WebUploader组件进行多实例多文件上传，打破了现有技术中利用WebUploader组件只能实现单文件或单实例上传的限制，同时兼容主流浏览器实现了HTML5和Flash两套运行时支持，而且支持大文件分片上传和免费支持断点续传。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
以上仅是本发明的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。
Claims (14)
1.一种基于WebUploader组件的文件上传方法，其特征在于，所述方法包括：
在目标页面加载WebUploader组件资源文件；
初始化所述WebUploader组件实例；
选择目标文件，利用所述WebUploader组件实例上传所述目标文件至服务器；其中在所述目标文件上传过程中监听WebUploader事件，并根据监听结果可自定义文件上传状态。
2.根据权利要求1所述的基于WebUploader组件的文件上传方法，其特征在于，所述初始化WebUploader组件实例包括：
指定文件上传的服务器地址、指定Uploader.swf文件路径、指定上传按钮和指定文件类型。
3.根据权利要求2所述的基于WebUploader组件的文件上传方法，其特征在于，所述方法还包括：
利用MD5秒传判断服务器是否存在与目标文件相同的文件；
如果存在，则停止上传目标文件。
4.根据权利要求2或3所述的基于WebUploader组件的文件上传方法，其特征在于，在所述方法还包括：
识别目标文件的大文件时，将所述目标文件切分为N个目标子文件；
将所述N个目标子文件利用所述WebUploader组件实例同时上传；
其中所述N个目标子文件在服务器被处理整合为目标文件。
5.根据权利要求4所述的基于WebUploader组件的文件上传方法，其特征在于，所述方法还包括：
将第N目标子文件在利用所述WebUploader组件上传前与服务器进行验证；
如果验证服务器存在与所述第N个目标子文件相同的文件，则停止上传所述第N个目标子文件。
6.根据权利要求1或5所述的基于WebUploader组件的文件上传方法，其特征在于，所述方法还包括：
当所述目标文件为图片格式文件时，将所述目标文件按照预设压缩参数进行压缩；
将所述压缩的目标文件利用所述WebUploader组件上传至服务器；其中在所述目标图片文件上传时可见缩略预览图片。
7.根据权利要求1-4任一项所述的基于WebUploader组件的文件上传方法，其特征在于，在初始化所述WebUploader组件实例后，所述方法还包括：
创建可编辑选项；
将所述可编辑选项与所述WebUploader组件实例进行动态关联。
8.一种基于WebUploader组件的文件上传装置，其特征在于，所述装置包括：加载模块、初始化模块、选择模块、上传模块、监听模块和编辑模块，其中，
所述加载模块，用于在目标页面加载WebUploader组件资源文件；
所述初始化模块，用于初始化所述WebUploader组件实例；
所述选择模块，用于选择目标文件；
所述上传模块，用于利用所述WebUploader组件实例上传所述目标文件至服务器；
所述监听模块，用于在所述目标文件上传过程中监听WebUploader事件；
编辑模块，用于并根据监听结果自定义文件上传状态。
9.根据权利要求8所述的基于WebUploader组件的文件上传装置，其特征在于，所述装置还包括判断模块，用于：
利用MD5秒传判断服务器是否存在与目标文件相同的文件；
如果存在，则停止上传目标文件。
10.根据权利要求9所述的基于WebUploader组件的文件上传装置，其特征在于，在所述装置还包括处理模块，其中，
所述处理模块，用于识别目标文件的大文件时，将所述目标文件切分为N个目标子文件；
所述上传模块，用于将所述N个目标子文件利用所述WebUploader组件实例同时上传；
其中所述N个目标子文件在服务器被处理整合为目标文件。
11.根据权利要求8所述的基于WebUploader组件的文件上传装置，其特征在于，所述装置还包括文件压缩模块，其中，
所述文件压缩模块，用于当所述目标文件为图片格式文件时，将所述目标文件按照预设压缩参数进行压缩；
所述上传模块，用于将所述压缩的目标文件利用所述WebUploader组件上传至服务器，其中在所述目标图片文件上传时可见缩略预览图片。
12.根据权利要求8-11任一项所述的基于WebUploader组件的文件上传装置，其特征在于，所述装置还包括创建模块和关联模块；
所述创建模块，用于创建可编辑选项；
所述关联模块，用于将所述可编辑选项与所述WebUploader组件实例进行动态关联。
13.一种电子设备，其特征在于，包括处理器和存储器；
所述存储器，用于存储操作指令；
所述处理器，用于通过调用所述操作指令，执行权利要求1-7中任一项所述的方法。
14.一种计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-7中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010753112.XA CN112068925A (zh) | 2020-07-30 | 2020-07-30 | 一种基于WebUploader组件的文件上传方法、装置、电子设备和可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010753112.XA CN112068925A (zh) | 2020-07-30 | 2020-07-30 | 一种基于WebUploader组件的文件上传方法、装置、电子设备和可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112068925A true CN112068925A (zh) | 2020-12-11 |
Family
ID=73656604
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010753112.XA Pending CN112068925A (zh) | 2020-07-30 | 2020-07-30 | 一种基于WebUploader组件的文件上传方法、装置、电子设备和可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112068925A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113641641A (zh) * | 2021-07-27 | 2021-11-12 | 欧电云信息科技(江苏)有限公司 | 文件存储服务的切换方法、切换系统、设备及存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110016381A1 (en) * | 2009-07-20 | 2011-01-20 | Matthew Cahill | Monitoring a background process in a web browser and providing status of same |
| CN109361754A (zh) * | 2018-11-05 | 2019-02-19 | 中国广核电力股份有限公司 | 一种基于浏览器的文件传输方法及装置 |
| CN109800392A (zh) * | 2019-01-11 | 2019-05-24 | 滨州建筑工程施工图审查中心 | 数字化审图中的多功能图纸上传方法和装置 |
| CN110602163A (zh) * | 2019-08-07 | 2019-12-20 | 阿里巴巴集团控股有限公司 | 文件上传方法及装置 |
-
2020
- 2020-07-30 CN CN202010753112.XA patent/CN112068925A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110016381A1 (en) * | 2009-07-20 | 2011-01-20 | Matthew Cahill | Monitoring a background process in a web browser and providing status of same |
| CN109361754A (zh) * | 2018-11-05 | 2019-02-19 | 中国广核电力股份有限公司 | 一种基于浏览器的文件传输方法及装置 |
| CN109800392A (zh) * | 2019-01-11 | 2019-05-24 | 滨州建筑工程施工图审查中心 | 数字化审图中的多功能图纸上传方法和装置 |
| CN110602163A (zh) * | 2019-08-07 | 2019-12-20 | 阿里巴巴集团控股有限公司 | 文件上传方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| 白鹤;吕红亮;王劲林;: "进度显示的大文件上传组件的设计与实现", 计算机工程与应用, no. 05, 11 February 2009 (2009-02-11) * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113641641A (zh) * | 2021-07-27 | 2021-11-12 | 欧电云信息科技(江苏)有限公司 | 文件存储服务的切换方法、切换系统、设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP6621543B2 (ja) | ハイブリッドアプリケーションの自動更新 | |
| US11132420B2 (en) | Utilizing server pre-processing to deploy renditions of electronic documents in a computer network | |
| CN109388766B (zh) | 页面加载的方法和装置 | |
| JP6285870B2 (ja) | オン・デマンドのステージングを用いる高速アプリケーション・ストリーミング | |
| EP2972827B1 (en) | Collaborative editing | |
| CN103001963A (zh) | 最小下载和模拟的页面导航特征 | |
| US8706778B2 (en) | Methods and systems for an action-based interface for files and other assets | |
| CN110493342B (zh) | 文件传输方法、装置、电子设备及可读存储介质 | |
| CN106257418B (zh) | 用于通过使用辅助应用来评价应用的技术 | |
| WO2012114243A1 (en) | Runtime code replacement | |
| CN112087370A (zh) | 发布GitHub Issues的方法、系统、电子设备和计算机可读存储介质 | |
| CN112068925A (zh) | 一种基于WebUploader组件的文件上传方法、装置、电子设备和可读存储介质 | |
| CN110968339B (zh) | 前端构建工具的方法、装置以及电子设备 | |
| US20160182673A1 (en) | Dynamic cache injector | |
| WO2017036197A1 (zh) | 一种网元模型管理方法及装置 | |
| CN113590564B (zh) | 数据存储方法、装置、电子设备及存储介质 | |
| CN113918861A (zh) | 图标库展示方法和装置 | |
| CN116257277B (zh) | 镜像文件的更新方法、装置及voi系统 | |
| CN116257707B (zh) | 一种应用发布方法、装置、电子设备及存储介质 | |
| CN114629895B (zh) | 一种文件分片断点续传方法、装置、终端设备及介质 | |
| CN115421785B (zh) | 应用程序的移植处理方法、装置和介质 | |
| JP6648567B2 (ja) | データ更新制御装置、データ更新制御方法、及び、データ更新制御プログラム | |
| CN112988208B (zh) | 数据更新方法、装置、设备及存储介质 | |
| US11157443B2 (en) | Management of history metadata of a file | |
| CN115826953A (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 |
Effective date of registration: 20220907 Address after: 25 Financial Street, Xicheng District, Beijing 100033 Applicant after: CHINA CONSTRUCTION BANK Corp. Address before: 25 Financial Street, Xicheng District, Beijing 100033 Applicant before: CHINA CONSTRUCTION BANK Corp. Applicant before: Jianxin Financial Science and Technology Co.,Ltd. |
|
| TA01 | Transfer of patent application right |