CN111131360A - 多文件上传方法及装置 - Google Patents
多文件上传方法及装置 Download PDFInfo
- Publication number
- CN111131360A CN111131360A CN201811291663.8A CN201811291663A CN111131360A CN 111131360 A CN111131360 A CN 111131360A CN 201811291663 A CN201811291663 A CN 201811291663A CN 111131360 A CN111131360 A CN 111131360A
- Authority
- CN
- China
- Prior art keywords
- file
- dragging
- list
- drag
- uploading
- 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.)
- Granted
Links
Images
Classifications
-
- 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]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了一种多文件上传方法及装置。该方法包括:确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,文件节点与多个文件相对应,文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点;从文件列表中确定与拖拽源节点对应的拖拽源文件和与拖拽目标节点对应的拖拽目标文件;根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置;按照变更位置后的文件列表进行多文件上传。通过本申请,解决了相关技术中进行多文件上传时,无法对多文件进行排序的问题。
Description
技术领域
本申请涉及数据处理领域,具体而言,涉及一种多文件上传方法及装置。
背景技术
在前端项目中,多文件上传是各种前端项目里面最基础的一类组件,具体是将客户端数据以文件形式封装,通过网络协议发送到服务器端,在服务器端解析数据,最终在服务端硬盘上作为真实的文件保存。
相关技术中,element-ui是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库,提供了基础的多文件上传组件,在多文件上传的过程中,指定文件的先后顺序是一个非常常见的功能,但是element-ui并没有多文件上传的排序功能。
针对相关技术中进行多文件上传时,无法对多文件进行排序的问题,目前尚未提出有效的解决方案。
发明内容
本申请的主要目的在于提供一种多文件上传方法及装置,以解决相关技术中进行多文件上传时,无法对多文件进行排序的问题。
为了实现上述目的,根据本申请的一个方面,提供了一种多文件上传方法。该方法包括:确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,所述文件节点与所述多个所述文件相对应,所述文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;响应于前端设备的拖拽操作,从所述文件节点列表中确定拖拽源节点和拖拽目标节点;从所述文件列表中确定与所述拖拽源节点对应的拖拽源文件和与所述拖拽目标节点对应的拖拽目标文件;根据所述拖拽操作以及所述拖拽目标文件,变更所述拖拽源文件在所述文件列表中的位置;按照变更位置后的文件列表进行多文件上传。
可选的,根据所述拖拽操作以及所述拖拽目标文件,变更所述拖拽源文件在所述文件列表中的位置包括以下至少之一:将所述拖拽源文件***到所述拖拽目标文件之前;将所述拖拽源文件***到所述拖拽目标文件之后;将所述拖拽源文件与所述拖拽目标文件的位置调换。
可选的,在响应于前端设备的拖拽操作,从所述文件节点列表中确定拖拽源节点和拖拽目标节点之前包括:接收所述前端设备触发的用于对所述拖拽源文件对应的图标进行拖拽的拖拽操作。
可选的,在确定多个文件的文件列表,和多个文件节点的文件节点列表之前包括:将上传组件的自动上传功能和自动显示上传结果功能关闭,其中,所述上传组件的自动上传功能用于将所述多个文件按照所述文件列表进行自动上传,所述上传组件的自动显示上传结果功能为将自动上传的多个文件进行自动显示。
可选的,在根据所述拖拽操作以及所述拖拽目标文件,变更所述拖拽源文件在所述文件列表中的位置之前,还包括:检测所述拖拽目标文件是否位于所述文件列表的头部或者尾部;在检测到所述拖拽目标文件位于所述文件列表的头部或者尾部的情况下,检测所述拖拽操作是否是将所述拖拽源文件拖拽到所述文件列表的头部的之前或者所述文件列表尾部的之后;在检测到所述拖拽操作是将所述拖拽源文件拖拽到所述文件列表的头部的之前或者所述文件列表尾部的之后的情况下,发出用于禁止拖拽的提示信息。
可选的,所述拖拽操作包括多个不同的拖拽操作。
为了实现上述目的,根据本申请的另一方面,提供了一种多文件上传装置。该装置包括:第一确定模块,用于确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,所述文件节点与所述多个所述文件相对应,所述文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;第二确定模块,用于响应于前端设备的拖拽操作,从所述文件节点列表中确定拖拽源节点和拖拽目标节点;第三确定模块,用于从所述文件列表中确定与所述拖拽源节点对应的拖拽源文件和与所述拖拽目标节点对应的拖拽目标文件;变更模块,用于根据所述拖拽操作以及所述拖拽目标文件,变更所述拖拽源文件在所述文件列表中的位置;上传模块,用于按照变更位置后的文件列表进行多文件上传。
可选的,该装置还包括:关闭模块,用于将上传组件的自动上传功能和自动显示上传结果功能关闭,其中,所述上传组件的自动上传功能用于将所述多个文件按照所述文件列表进行自动上传,所述上传组件的自动显示上传结果功能为将自动上传的多个文件进行自动显示。
为了实现上述目的,根据本申请的另一方面,提供了一种存储介质,所述存储介质包括存储的程序,其中,所述程序执行上述中任意一项所述的方法。
为了实现上述目的,根据本申请的另一方面,提供了一种处理器,其特征在于,所述处理器用于运行程序,其中,所述程序运行时执行上述中任意一项所述的方法。
通过本申请,采用以下步骤:确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,所述文件节点与所述多个所述文件相对应,所述文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;响应于前端设备的拖拽操作,从所述文件节点列表中确定拖拽源节点和拖拽目标节点;从所述文件列表中确定与所述拖拽源节点对应的拖拽源文件和与所述拖拽目标节点对应的拖拽目标文件;根据所述拖拽操作以及所述拖拽目标文件,变更所述拖拽源文件在所述文件列表中的位置;按照变更位置后的文件列表进行多文件上传。解决了相关技术中进行多文件上传时,无法对多文件进行排序的问题。进而达到了有效通过拖拽操作,对文件列表中的多个文件进行排序的效果。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1是根据本申请实施例提供的多文件上传方法的流程图;以及
图2是根据本申请实施例提供的多文件上传装置的示意图。
具体实施方式
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
为了使本技术领域的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分的实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。
需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为了便于描述,以下对本申请实施例涉及的部分名词或术语进行说明:
多文件上传,是各种前端项目里面最基础的一类组件,他将客户端数据以文件形式封装,通过网络协议发送到服务器端,在服务器端解析数据,最终在服务端硬盘上作为真实的文件保存。
element-ui,一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库,提供了基础的多文件上传组件,在多文件上传的过程中,指定文件的先后顺序是一个非常常见的功能,但是element-ui并没有多文件上传的排序功能。
根据本申请的实施例,提供了一种多文件上传方法。
图1是根据本申请实施例的多文件上传方法的流程图。如图1所示,该方法包括以下步骤:
步骤S101,确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,文件节点与多个文件相对应,文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;
步骤S102,响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点;
步骤S103,从文件列表中确定与拖拽源节点对应的拖拽源文件和与拖拽目标节点对应的拖拽目标文件;
步骤S104,根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置;
步骤S105,按照变更位置后的文件列表进行多文件上传。
通过上述步骤:确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,文件节点与多个文件相对应,文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点;从文件列表中确定与拖拽源节点对应的拖拽源文件和与拖拽目标节点对应的拖拽目标文件;根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置;按照变更位置后的文件列表进行多文件上传。解决了相关技术中进行多文件上传时,无法对多文件进行排序的问题。进而达到了有效通过拖拽操作,对文件列表中的多个文件进行排序的效果。
上述确定多个文件的文件列表,上述文件列表为用于标识多个文件上传顺序的数据架构,该上传顺序为上述文件列表默认的顺序,可以是文件生成或者存储的先后顺序,还可以是文件添加到上述文件列表中的先后顺序。上述多个文件存储在不同的存储位置中,上述文件列表可以是用于标识文件的文本的列表,也可以是多个文件排序的列表。上述文件列表可以通过前端设备向用户展示,上述前端设备,可以是显示屏,电脑,智能手机等用于与用户进行交互的设备。需要说明的是,上述文件列表中的文本的顺序是不可更改,也即是,根据上述文件列表不能调整上述多个文件的上传顺序。
上述文件节点列表中的文件节点的顺序可以调整,上述文件节点与文件列表中的文件相对应,上诉对应关系,可以是一一对应,上述文件节点包括有对应的文件列表中的文件的存储位置信息,可以通过文件节点列表,获取该存储位置信息,从而获取该文件节点对应的文件。在上述文件节点列表中的文件节点进行重排序时,可以根据前端设备的拖拽功能来实现,由于前端设备的操作,并不是文件节点列表中的真实操作,因此向上述文件节点绑定了用于实现拖拽功能的拖拽事件,在前端设备上发生拖拽事件时,上述文件节点列表中的文件节点也相应的发生拖拽事件。可以将前端设备发生的拖拽操作与文件节点列表的动作联系起来,从而为根据前端设备的拖拽操作调整文件列表中的文件的顺序做好准备。
在前端设备发生拖拽操作的情况下,上述拖拽操作可以是将代表拖拽源文件的图标拖拽至目标位置,该目标位置对应有拖拽目标文件。通过拖拽事件反映给上述文件节点列表,在文件节点列表中,确定上述拖拽源文件图标对应的拖拽源节点,和目标位置对应的拖拽目标节点,通过上述拖拽源节点和拖拽目标节点,可以从文件列表中获取源文件和目标文件。上述拖拽源文件和拖拽目标文件中存储位置中被取出后,对应的拖拽源文件的位置和拖拽目标文件的位置都可以放置其他文件。还可以将拖拽源文件***到拖拽目标文件在文件列表中的位置之前或者之后。
因此,在文件节点列表中,可以响应于前端设备的拖拽操作,文件节点列表中根据拖拽操作,和拖拽目标文件,改变拖拽源文件在文件列表中的位置。拖拽源文件在文件列表中的位置可以由具体的更新法则确定。根据用户的不同需求可以有多种改变位置的方式。例如,可将拖拽目标文件在文件列表中的区域划分为三种,拖拽目标文件之前,拖拽目标文件之上,以及拖拽目标文件之后,将拖拽源文件放置在不同的区域,进行排序的结果不同,将上述拖拽源文件放置在拖拽目标文件之前,则将拖拽源文件***到拖拽目标文件在文件列表中之前的相邻位置;将上述拖拽源文件放置在拖拽目标文件之上,则将拖拽源文件与拖拽目标文件在文件列表中的位置进行互换;将上述拖拽源文件放置在拖拽目标文件之后,则将拖拽源文件***到拖拽目标文件在文件列表中之后的相邻位置。
最后,在将需要调整顺序的文件调整顺序完成后,将变更多个文件顺序后的文件列表进行多文件上传。
可选地,在本申请实施例提供的多文件上传方法中,根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置包括以下至少之一:将拖拽源文件***到拖拽目标文件之前;将拖拽源文件***到拖拽目标文件之后;将拖拽源文件与拖拽目标文件的位置调换。
上述将拖拽源文件***到拖拽目标文件之前,可以是将拖拽源文件放置在,文件列表中拖拽目标文件之前的相邻位置,还可以是拖拽目标之前的间隔一个文件的位置,还可以是其他的位置,甚至可以是将拖拽源文件放置在,文件列表中脱宅目标文件之后的某位置,具体的指令和结果,可以通过改变对应关系,根据具体需求来确定。上述将拖拽源文件***到拖拽目标文件之后,可以是将拖拽源文件放置在,文件列表中拖拽目标文件之后的相邻位置。上述将拖拽源文件与拖拽目标文件的位置调换,可以是在确定拖拽源文件和拖拽目标文件之后,仅允许其进行调换。
可选地,在本申请实施例提供的多文件上传方法中,在响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点之前包括:接收前端设备触发的用于对拖拽源文件对应的图标进行拖拽的拖拽操作。
在上述响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点之前,需要对前端设备的拖拽操作进行接收。在前端设备上,可以包括显示屏,或者触控屏,可以通过用户交互装置来实现拖拽操作,例如,鼠标,键盘,或者触控操作。在上述前端设备的显示屏或者触控屏上,拖拽操作的对象可以是文件列表中,文件对应的图标。
可选地,在本申请实施例提供的多文件上传方法中,在确定多个文件的文件列表,和多个文件节点的文件节点列表之前包括:将上传组件的自动上传功能和自动显示上传结果功能关闭,其中,上传组件的自动上传功能用于将多个文件按照文件列表进行自动上传,上传组件的自动显示上传结果功能为将自动上传的多个文件进行自动显示。
上述上传组件用于将多个文件按照文件列表进行自动上传,而且上传组件的自动显示上传结果功能为将自动上传的多个文件进行自动显示。上述上传组件在一些使用情况下,默认上述功能,例如,在element-ui的使用环境下,默认自动上传功能和自动显示功能。在上述运行场景中,无法对已经上传并显示的多个文件进行顺序更改,因此,在本实施例中,在对文件列表中的多个文件的顺序进行更改之前,可以先对上传组件的自动上传功能和自动显示功能进行关闭。
可选地,在本申请实施例提供的多文件上传方法中,在根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置之前,还包括:检测拖拽目标文件是否位于文件列表的头部或者尾部;在检测到拖拽目标文件位于文件列表的头部或者尾部的情况下,检测拖拽操作是否是将拖拽源文件拖拽到文件列表的头部的之前或者文件列表尾部的之后;在检测到拖拽操作是将拖拽源文件拖拽到文件列表的头部的之前或者文件列表尾部的之后的情况下,发出用于禁止拖拽的提示信息。
上述拖拽操作在执行时,由于上述文件列表在前端设备上对应的范围是有限的,因此,对上述拖拽操作将拖拽源文件对应的图标,拖拽的位置进行确定,可以通过检测拖拽目标文件是否位于文件列表的头部或者尾部,则在拖拽上述拖拽源文件时,有可能超出文件列表的范围。在检测到拖拽目标文件位于文件列表的头部或者尾部的情况下,检测拖拽操作是否是将拖拽源文件拖拽到文件列表的头部的之前或者文件列表尾部的之后;在检测到拖拽操作是将拖拽源文件拖拽到文件列表的头部的之前或者文件列表尾部的之后的情况下,说明拖拽操作对应的拖拽源文件的对应图标的位置已经超出了上述文件列表的范围,可以发出用于禁止拖拽的提示信息,上述提示信息可以通过显示器进行显示,或者扬声器进行播放,还可以通过控制灯光亮度或者闪烁频率来向用户提示。
可选地,在本申请实施例提供的多文件上传方法中,拖拽操作包括多个不同的拖拽操作。
上述拖拽操作可以为多个,多文件列表中的多个文件进行顺序调整,上述拖拽操作可以是每次仅实施一个,进行多次实施,还可以选中多个,一次对多个文件同时进行实施。在上述一次对多个文件同时进行实施的情况下,多个文件之间的相对顺序可以不发生变化,也可以发生变化,根据用户的具体需求确定。
需要说明的是,本实施例还提供了一种ELEMENT-UI多文件上传拖拽排序方法,作为一种可选的实施方式,下面对该实施方式进行详细说明。
现有的element-ui并没有对多文件上传组件提供一个完善的排序方案。针对上述缺点,本发明给出了一个基于element-ui多文件上传的优化方案,通过对多文件列表的文件拖拽,完成对应的排序。
该方案整体思路是:利用element-ui多文件上传“表面上的展示结果”(上传功能和展示列表),添加了拖拽排序的功能,具体实施步骤如下:
1、设置基础的element-ui上传组件,把自动上传设置为false,否则选择了文件之后,还没有调整顺序就自动上传了,与此同时把show-fileList设置为false,不允许上传组件自动显示出我们的上传结果;
2、紧随着上传组件,设置这样一段代码,这段代码的渲染结果,允许上传组件自动显示上传结果的时候会自动生成的结果大致相同,之所以我们要摒弃自动生成这一过程,是因为我们需要在这段代码上进行更改,见下列斜体加下划线的部分。
上述文件列表fileList是我们上传的文件列表数据模型,表现的形式如下(文件名的后缀为png):
文件1:icon_unconfuse.png
文件2:icon_confuse.png
拖拽指令v-dragging是我们预先设置好的一个指令,他可以是我们自己书写的,也可以是外部引入的一个拖拽指令(比如awe-dnd),他的作用是为列表里面的各项绑定拖拽事件,并在拖拽的时候将数据模型里面的数据进行数据调换。
这里给出一个v-dragging的详细操作步骤:
1)用一个数组文件节点列表fileNodeList来保存渲染好的节点的信息(比文件列表fileList多了位置信息),同事对当前渲染好的文件节点列表项进行拖拽drag事件的绑定,在文件列表区域允许拖拽;
2)当拖拽文件到指定位置的时候,可以从文件节点列表fileNodeList中得到原本对应的拖拽文件节点sourceNode和指定位置文件节点targetNode的数据信息,然后在文件列表fileList中,找到上述两个节点的对应数据(拖拽源文件sourceData和拖拽目标文件targetData);
3)把sourceData***到targetData之前,如此一来,数据vo进行了刷新,文件列表进行了重绘,拖拽排序操作完成,在上传取值的时候直接使用fileList即是我们最后需要的结果。
3、如此一来,经过上面的步骤之后,我们可以对文件列表进行随意的拖拽排序了,最后在上传结果的时候,从fileList里面直接取值就好。
本实施方式的技术方案带来的有益效果:本实施方式提供了一种element-ui的多文件上传优化方案,能够有效地实现多文件排序这一功能;实现方式简单,逻辑清晰,不必改动element-ui的源码,增加的代码量少。
本申请实施例提供的多文件上传方法,通过确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,文件节点与多个文件相对应,文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点;从文件列表中确定与拖拽源节点对应的拖拽源文件和与拖拽目标节点对应的拖拽目标文件;根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置;按照变更位置后的文件列表进行多文件上传,解决了相关技术中进行多文件上传时,无法对多文件进行排序的问题。进而达到了有效通过拖拽操作,对文件列表中的多个文件进行排序的效果。
需要说明的是,在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机***中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
本申请实施例还提供了一种多文件上传装置,需要说明的是,本申请实施例的多文件上传装置可以用于执行本申请实施例所提供的用于多文件上传方法。以下对本申请实施例提供的多文件上传装置进行介绍。
图2是根据本申请实施例的多文件上传装置的示意图。如图2所示,该装置包括:第一确定模块202,第二确定模块204,第三确定模块206,变更模块208和上传模块210,下面对该装置进行详细说明。
第一确定模块202,用于确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,文件节点与多个文件相对应,文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;第二确定模块204,与上述第一确定模块202相连,用于响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点;第三确定模块206,与上述第二确定模块204相连,用于从文件列表中确定与拖拽源节点对应的拖拽源文件和与拖拽目标节点对应的拖拽目标文件;变更模块208,与上述第三确定模块206相连,用于根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置;上传模块210,与上述变更模块208相连,用于按照变更位置后的文件列表进行多文件上传。
可选地,在本申请实施例提供的多文件上传装置中,该装置还包括:关闭模块,用于将上传组件的自动上传功能和自动显示上传结果功能关闭,其中,上传组件的自动上传功能用于将多个文件按照文件列表进行自动上传,上传组件的自动显示上传结果功能为将自动上传的多个文件进行自动显示。
可选的,在本申请实施例提供的多文件上传装置中,变更模块包括以下至少之一:第一拖拽模块,用于将拖拽源文件***到拖拽目标文件之前;第二拖拽模块,用于将拖拽源文件***到拖拽目标文件之后;第三拖拽模块,用于将拖拽源文件与拖拽目标文件的位置调换。
可选的,在本申请实施例提供的多文件上传装置中,还包括:接收模块,用于接收前端设备触发的用于对拖拽源文件对应的图标进行拖拽的拖拽操作。
可选的,在本申请实施例提供的多文件上传装置中,还包括:第一检测模块,用于检测拖拽目标文件是否位于文件列表的头部或者尾部;第二检测模块,用于在检测到拖拽目标文件位于文件列表的头部或者尾部的情况下,检测拖拽操作是否是将拖拽源文件拖拽到文件列表的头部的之前或者文件列表尾部的之后;提示模块,用于在检测到拖拽操作是将拖拽源文件拖拽到文件列表的头部的之前或者文件列表尾部的之后的情况下,发出用于禁止拖拽的提示信息。
可选的,在本申请实施例提供的多文件上传装置中,拖拽操作包括多个不同的拖拽操作。
本申请实施例提供的多文件上传装置,通过第一确定模块202确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,文件节点与多个文件相对应,文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;第二确定模块204响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点;第三确定模块206从文件列表中确定与拖拽源节点对应的拖拽源文件和与拖拽目标节点对应的拖拽目标文件;变更模块208根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置;上传模块210按照变更位置后的文件列表进行多文件上传,解决了相关技术中进行多文件上传时,无法对多文件进行排序的问题,进而达到了有效通过拖拽操作,对文件列表中的多个文件进行排序的效果。
所述多文件上传装置包括处理器和存储器,上述第一确定模块202,第二确定模块204,第三确定模块206,变更模块208和上传模块210等均作为程序单元存储在存储器中,由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核,由内核去存储器中调取相应的程序单元。内核可以设置一个或以上,通过调整内核参数来解决相关技术中进行多文件上传时,无法对多文件进行排序的问题,进而达到有效通过拖拽操作,对文件列表中的多个文件进行排序的效果。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM),存储器包括至少一个存储芯片。
本发明实施例提供了一种存储介质,其上存储有程序,该程序被处理器执行时实现所述多文件上传方法。
本发明实施例提供了一种处理器,所述处理器用于运行程序,其中,所述程序运行时执行所述多文件上传方法。
本发明实施例提供了一种设备,设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序,处理器执行程序时实现以下步骤:确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,文件节点与多个文件相对应,文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点;从文件列表中确定与拖拽源节点对应的拖拽源文件和与拖拽目标节点对应的拖拽目标文件;根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置;按照变更位置后的文件列表进行多文件上传。
可选的,根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置包括以下至少之一:将拖拽源文件***到拖拽目标文件之前;将拖拽源文件***到拖拽目标文件之后;将拖拽源文件与拖拽目标文件的位置调换。
可选的,在响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点之前包括:接收前端设备触发的用于对拖拽源文件对应的图标进行拖拽的拖拽操作。
可选的,在确定多个文件的文件列表,和多个文件节点的文件节点列表之前包括:将上传组件的自动上传功能和自动显示上传结果功能关闭,其中,上传组件的自动上传功能用于将多个文件按照文件列表进行自动上传,上传组件的自动显示上传结果功能为将自动上传的多个文件进行自动显示。
可选的,在根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置之前,还包括:检测拖拽目标文件是否位于文件列表的头部或者尾部;在检测到拖拽目标文件位于文件列表的头部或者尾部的情况下,检测拖拽操作是否是将拖拽源文件拖拽到文件列表的头部的之前或者文件列表尾部的之后;在检测到拖拽操作是将拖拽源文件拖拽到文件列表的头部的之前或者文件列表尾部的之后的情况下,发出用于禁止拖拽的提示信息。
可选的,拖拽操作包括多个不同的拖拽操作。
本文中的设备可以是服务器、PC、PAD、手机等。
本申请还提供了一种计算机程序产品,当在数据处理设备上执行时,适于执行初始化有如下方法步骤的程序:确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,文件节点与多个文件相对应,文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点;从文件列表中确定与拖拽源节点对应的拖拽源文件和与拖拽目标节点对应的拖拽目标文件;根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置;按照变更位置后的文件列表进行多文件上传。
可选的,根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置包括以下至少之一:将拖拽源文件***到拖拽目标文件之前;将拖拽源文件***到拖拽目标文件之后;将拖拽源文件与拖拽目标文件的位置调换。
可选的,在响应于前端设备的拖拽操作,从文件节点列表中确定拖拽源节点和拖拽目标节点之前包括:接收前端设备触发的用于对拖拽源文件对应的图标进行拖拽的拖拽操作。
可选的,在确定多个文件的文件列表,和多个文件节点的文件节点列表之前包括:将上传组件的自动上传功能和自动显示上传结果功能关闭,其中,上传组件的自动上传功能用于将多个文件按照文件列表进行自动上传,上传组件的自动显示上传结果功能为将自动上传的多个文件进行自动显示。
可选的,在根据拖拽操作以及拖拽目标文件,变更拖拽源文件在文件列表中的位置之前,还包括:检测拖拽目标文件是否位于文件列表的头部或者尾部;在检测到拖拽目标文件位于文件列表的头部或者尾部的情况下,检测拖拽操作是否是将拖拽源文件拖拽到文件列表的头部的之前或者文件列表尾部的之后;在检测到拖拽操作是将拖拽源文件拖拽到文件列表的头部的之前或者文件列表尾部的之后的情况下,发出用于禁止拖拽的提示信息。
可选的,拖拽操作包括多个不同的拖拽操作。
本领域内的技术人员应明白,本申请的实施例可提供为方法、***、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白,本申请的实施例可提供为方法、***或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。
Claims (10)
1.一种多文件上传方法,其特征在于,包括:
确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,所述文件节点与所述多个所述文件相对应,所述文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;
响应于前端设备的拖拽操作,从所述文件节点列表中确定拖拽源节点和拖拽目标节点;
从所述文件列表中确定与所述拖拽源节点对应的拖拽源文件和与所述拖拽目标节点对应的拖拽目标文件;
根据所述拖拽操作以及所述拖拽目标文件,变更所述拖拽源文件在所述文件列表中的位置;
按照变更位置后的文件列表进行多文件上传。
2.根据权利要求1所述的方法,其特征在于,根据所述拖拽操作以及所述拖拽目标文件,变更所述拖拽源文件在所述文件列表中的位置包括以下至少之一:
将所述拖拽源文件***到所述拖拽目标文件之前;
将所述拖拽源文件***到所述拖拽目标文件之后;
将所述拖拽源文件与所述拖拽目标文件的位置调换。
3.根据权利要求1所述的方法,其特征在于,在响应于前端设备的拖拽操作,从所述文件节点列表中确定拖拽源节点和拖拽目标节点之前包括:
接收所述前端设备触发的用于对所述拖拽源文件对应的图标进行拖拽的拖拽操作。
4.根据权利要求1所述的方法,其特征在于,在确定多个文件的文件列表,和多个文件节点的文件节点列表之前包括:
将上传组件的自动上传功能和自动显示上传结果功能关闭,其中,所述上传组件的自动上传功能用于将所述多个文件按照所述文件列表进行自动上传,所述上传组件的自动显示上传结果功能为将自动上传的多个文件进行自动显示。
5.根据权利要求1所述的方法,其特征在于,在根据所述拖拽操作以及所述拖拽目标文件,变更所述拖拽源文件在所述文件列表中的位置之前,还包括:
检测所述拖拽目标文件是否位于所述文件列表的头部或者尾部;
在检测到所述拖拽目标文件位于所述文件列表的头部或者尾部的情况下,检测所述拖拽操作是否是将所述拖拽源文件拖拽到所述文件列表的头部的之前或者所述文件列表尾部的之后;
在检测到所述拖拽操作是将所述拖拽源文件拖拽到所述文件列表的头部的之前或者所述文件列表尾部的之后的情况下,发出用于禁止拖拽的提示信息。
6.根据权利要求1至5中任意一项所述的方法,其特征在于,
所述拖拽操作包括多个不同的拖拽操作。
7.一种多文件上传装置,其特征在于,包括:
第一确定模块,用于确定多个文件的文件列表,和多个文件节点的文件节点列表,其中,所述文件节点与所述多个所述文件相对应,所述文件节点列表中的文件节点绑定了用于实现拖拽功能的拖拽事件;
第二确定模块,用于响应于前端设备的拖拽操作,从所述文件节点列表中确定拖拽源节点和拖拽目标节点;
第三确定模块,用于从所述文件列表中确定与所述拖拽源节点对应的拖拽源文件和与所述拖拽目标节点对应的拖拽目标文件;
变更模块,用于根据所述拖拽操作以及所述拖拽目标文件,变更所述拖拽源文件在所述文件列表中的位置;
上传模块,用于按照变更位置后的文件列表进行多文件上传。
8.根据权利要求7所述的装置,其特征在于,该装置还包括:
关闭模块,用于将上传组件的自动上传功能和自动显示上传结果功能关闭,其中,所述上传组件的自动上传功能用于将所述多个文件按照所述文件列表进行自动上传,所述上传组件的自动显示上传结果功能为将自动上传的多个文件进行自动显示。
9.一种存储介质,其特征在于,所述存储介质包括存储的程序,其中,所述程序执行权利要求1至6中任意一项所述的方法。
10.一种处理器,其特征在于,所述处理器用于运行程序,其中,所述程序运行时执行权利要求1至6中任意一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811291663.8A CN111131360B (zh) | 2018-10-31 | 2018-10-31 | 多文件上传方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811291663.8A CN111131360B (zh) | 2018-10-31 | 2018-10-31 | 多文件上传方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111131360A true CN111131360A (zh) | 2020-05-08 |
CN111131360B CN111131360B (zh) | 2023-02-21 |
Family
ID=70494738
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201811291663.8A Active CN111131360B (zh) | 2018-10-31 | 2018-10-31 | 多文件上传方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111131360B (zh) |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104123080A (zh) * | 2014-07-15 | 2014-10-29 | 东莞市微云***科技有限公司 | 一种自动化拖拽文件的方法 |
CN104426949A (zh) * | 2013-08-28 | 2015-03-18 | 鸿富锦精密工业(深圳)有限公司 | 多文件上传方法及*** |
CN106855769A (zh) * | 2015-12-08 | 2017-06-16 | 北京国双科技有限公司 | 数据对比方法和装置 |
CN106921682A (zh) * | 2015-12-24 | 2017-07-04 | 百度在线网络技术(北京)有限公司 | 文件上传方法和装置 |
CN107133319A (zh) * | 2017-05-03 | 2017-09-05 | 努比亚技术有限公司 | 一种高效调整顺序的方法、装置及计算机可读存储介质 |
CN107294835A (zh) * | 2016-04-11 | 2017-10-24 | 阿里巴巴集团控股有限公司 | 一种即时通讯中的文件发送方法及装置 |
CN107391002A (zh) * | 2017-07-20 | 2017-11-24 | 上海金大师网络科技有限公司 | 一种透明浮动可拖拽列表生成方法以及*** |
-
2018
- 2018-10-31 CN CN201811291663.8A patent/CN111131360B/zh active Active
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104426949A (zh) * | 2013-08-28 | 2015-03-18 | 鸿富锦精密工业(深圳)有限公司 | 多文件上传方法及*** |
CN104123080A (zh) * | 2014-07-15 | 2014-10-29 | 东莞市微云***科技有限公司 | 一种自动化拖拽文件的方法 |
CN106855769A (zh) * | 2015-12-08 | 2017-06-16 | 北京国双科技有限公司 | 数据对比方法和装置 |
CN106921682A (zh) * | 2015-12-24 | 2017-07-04 | 百度在线网络技术(北京)有限公司 | 文件上传方法和装置 |
CN107294835A (zh) * | 2016-04-11 | 2017-10-24 | 阿里巴巴集团控股有限公司 | 一种即时通讯中的文件发送方法及装置 |
CN107133319A (zh) * | 2017-05-03 | 2017-09-05 | 努比亚技术有限公司 | 一种高效调整顺序的方法、装置及计算机可读存储介质 |
CN107391002A (zh) * | 2017-07-20 | 2017-11-24 | 上海金大师网络科技有限公司 | 一种透明浮动可拖拽列表生成方法以及*** |
Non-Patent Citations (1)
Title |
---|
啥啥啥娜娜: "vue+element-ui项目上传图片组件", 《简书》 * |
Also Published As
Publication number | Publication date |
---|---|
CN111131360B (zh) | 2023-02-21 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US11150790B2 (en) | Application interface management method and apparatus | |
US9298348B2 (en) | Mobile device and method for providing widgets | |
CN107168879B (zh) | 集中配置管理***测试报告的生成方法及装置 | |
CN112947969B (zh) | 一种页面离屏渲染方法、装置、设备和可读介质 | |
CN107608609B (zh) | 一种事件对象发送方法与装置 | |
CN112084488A (zh) | 应用权限管理方法、装置及*** | |
CN109189384A (zh) | 一种代码的复用方法及装置 | |
CN110347321A (zh) | 一种信息收集方法及装置 | |
CN114185874A (zh) | 一种基于大数据的建模方法、装置、开发框架及设备 | |
US11347382B2 (en) | Method of automatically switching mode of work screen of digital content authoring tool | |
CN111131360B (zh) | 多文件上传方法及装置 | |
CN106610830B (zh) | 页面元素的拖放方法及装置 | |
US11243678B2 (en) | Method of panning image | |
CN112579066A (zh) | 图表展示方法、装置、存储介质及设备 | |
CN112560403A (zh) | 文本的处理方法及装置、电子设备 | |
CN115858073A (zh) | 一种虚拟导览内容的生成方法、设备及存储介质 | |
CN115145634A (zh) | 一种***管理软件自适配方法、装置及介质 | |
CN110955813A (zh) | 一种数据爬取方法及装置 | |
CN109683887A (zh) | 一种支持多方案自定义web项目的构建方法及装置 | |
CN109271220A (zh) | 通过手势操作控制页面返回的方法、计算设备和存储介质 | |
CN110215702B (zh) | 游戏中编组的控制方法和控制装置 | |
CN110969461B (zh) | 公众号信息的处理方法及装置、存储介质、处理器 | |
CN111464577B (zh) | 一种设备控制方法和装置 | |
CN109146870B (zh) | 模块之间的数据交互方法和装置 | |
CN110019034A (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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |