一种调用上传组件的装置、方法和系统与流程

本发明涉及计算机应用技术领域，特别涉及一种调用上传组件的装置、方法和系统。

背景技术：

近年来随着前端应用的发展，出现了各式各样的上传组件供应用开发者选择，在应用开发者选定上传组件后，需要针对自己开发的应用自定义上传组件的各种参数，对于需要多个上传组件的应用来说，应用开发者需要为每一个上传组件配置各种参数，由于配置的参数中常常包含有一些复杂度较高的参数，需要消耗应用开发者较长的时间为每一个上传组件配置参数，造成应用开发的效率较低。

技术实现要素：

本发明实施例提供了一种调用上传组件的装置、方法和系统，能够有效的提高应用开发的效率。

一种调用上传组件的装置，与外设的至少一种上传组件相连，包括：封装构建单元、交互单元和接口，其中，

所述封装构建单元，用于确定外设的每一种上传组件对应的默认参数和默认值，对所述默认参数和默认值进行封装；

所述交互单元，用于确定调变参数，接收输入的所述调变参数对应的参数值，并发送所述调变参数对应的参数值；

所述接口，用于加载所述封装构建单元封装的默认参数和对应的默认值，接收并解析所述交互单元发送的所述调变参数对应的参数值，根据所述默认值和解析出的参数值，调用外设的目标上传组件。

优选地，上述装置进一步包括：显示单元，其中，

所述封装构建单元，进一步用于封装至少一种文件上传的方式和样式，为所述封装的至少一种文件上传的方式和样式中每一种文件上传的方式和样式构建对应的html元素属性；

所述交互单元，进一步用于接收输入的至少一个目标html元素属性值，并发送所述至少一个目标html元素属性值；

所述接口，进一步用于接收所述交互单元发送的至少一个目标html元素属性值，解析所述至少一个目标html元素属性值，根据所述至少一个目标html元素属性值，在所述封装构建单元封装的至少一种文件上传的方式和样式中，选定文件上传的目标方式和样式，并将所述文件上传的目标方式和样式发送给所述外设的目标上传组件；

所述显示单元，用于根据所述外设的目标上传组件和所述接口接收到的文件上传的目标方式和样式，显示文件上传的对话框和文件上传的按钮。

优选地，所述封装构建单元，用于将外设的每一种上传组件对应的默认参数和默认值封装到对应的webuploader.js文件中，并存储所述webuploader.js文件；

所述交互单元，用于确定文件上传的服务器端地址和文件上传的请求参数表为调变参数，接收所述文件上传的服务器端地址和文件上传的请求参数表对应的参数值；

所述接口，进一步用于设置每一个webuploader.js文件对应的引入路径，根据所述引入路径，加载webuploader.js文件。

优选地，所述封装构建单元，用于封装单文件上传方式和样式、多文件上传方式和样式、单图片上传方式和样式及多图片上传方式和样式，其中，单文件上传方式和样式/单图片上传方式和样式，包括：在元素的右侧添加“选择”按钮，当选中文件后添加“上传”、“删除”按钮并隐藏“选择”按钮，并显示上传进度；多文件上传方式和样式/多图片上传方式和样式，包括：为元素添加“添加文件”按钮、“开始上传”按钮和“取消”按钮，通过“添加文件”按钮添加至少一个文件，并显示上传进度。

一种调用上传组件的方法，连接至少一种上传组件，确定每一种上传组件对应的默认参数和默认值，对所述默认参数和默认值进行封装；还包括：

确定调变参数，接收输入的所述调变参数对应的参数值；

加载所述封装的默认参数和对应的默认值，并解析所述调变参数对应的参数值；

根据所述默认值和解析出的参数值，调用外设的目标上传组件。

优选地，上述方法进一步包括：封装至少一种文件上传的方式和样式，为所述封装的至少一种文件上传的方式和样式中每一种文件上传的方式和样式构建对应的html元素属性；

在所述接收输入的所述调变参数对应的参数值之后，在所述加载所述封装的默认参数和对应的默认值之前，进一步包括：接收输入的至少一个目标html元素属性值；

在所述解析所述调变参数对应的参数值之后，在所述调用外设的目标上传组件之前，进一步包括：解析所述至少一个目标html元素属性值，根据所述至少一个目标html元素属性值，在所述至少一种文件上传的方式和样式中，选定文件上传的目标方式和样式；

在所述调用外设的目标上传组件之后，进一步包括：将所述文件上传的目标方式和样式发送给所述外设的目标上传组件，根据所述文件上传的目标方式和样式，显示文件上传的对话框和文件上传的按钮。

优选地，所述对所述默认参数和默认值进行封装，包括：将默认参数和默认值封装到对应的webuploader.js文件中，并存储所述webuploader.js文件；

所述确定调变参数，接收输入的所述调变参数对应的参数值，包括：确定文件上传的服务器端地址和文件上传的请求参数表为调变参数，接收所述文件上传的服务器端地址和文件上传的请求参数表对应的参数值；

所述加载所述封装的默认参数，包括：设置每一个webuploader.js文件对应的引入路径，根据所述引入路径，加载webuploader.js文件。

优选地，所述至少一种文件上传的方式和样式，包括：

封装单文件上传方式和样式、多文件上传方式和样式、单图片上传方式和样式及多图片上传方式和样式中的任意一种或多种。

一种调用上传组件的系统，包括：上述任意一种调用上传组件的装置和至少一种上传组件，其中，

所述至少一种上传组件中，每一种上传组件，用于接收所述调用上传组件的装置的调用，并根据所述调用上传组件的装置封装至少一种文件上传的方式和样式，输出文件上传/图片上传对话框。

优选地，所述至少一种上传组件，包括：Web Uploader和JS中的任意一种或两种。

本发明实施例提供了一种调用上传组件的装置、方法和系统，该装置通过封装构建单元确定外设的每一种上传组件对应的默认参数和默认值，对默认参数和默认值进行封装，实现了对默认参数和默认值的封装，可以通过直接调用封装好的默认参数和默认值，而无须用户输入，另外，通过交互单元可以接收需要调变的参数对应的参数值，从而通过接口调用外设的目标上传组件，通过直接调用封装好的默认参数，而无须用户依次编写参数，从而能够有效的提高应用开发的效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一个实施例提供的一种调用上传组件的装置的结构示意图；

图2是本发明另一实施例提供的一种调用上传组件的装置的结构示意图；

图3是本发明一个实施例提供的一种调用上传组件的方法的流程图；

图4是本发明另一个实施例提供的一种调用上传组件的方法的流程图；

图5是本发明一个实施例提供的一种上传组件的显示样式的示意图；

图6是本发明一个实施例提供的一种调用上传组件的系统的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，本发明实施例提供一种调用上传组件的装置，与外设的至少一种上传组件相连，包括：封装构建单元101、交互单元102和接口103，其中，

封装构建单元101，用于确定外设的每一种上传组件对应的默认参数和默认值，对默认参数和默认值进行封装；

交互单元102，用于确定调变参数，接收输入的调变参数对应的参数值，并发送调变参数对应的参数值；

接口103，用于加载封装构建单元101封装的默认参数和对应的默认值，接收并解析交互单元102发送的调变参数对应的参数值，根据默认值和解析出的参数值，调用外设的目标上传组件。

在图1所示的实施例中，通过封装构建单元确定外设的每一种上传组件对应的默认参数和默认值，对默认参数和默认值进行封装，实现了对默认参数和默认值的封装，可以通过直接调用封装好的默认参数和默认值，而无须用户输入，另外，通过交互单元可以接收需要调变的参数对应的参数值，从而通过接口调用外设的目标上传组件，通过直接调用封装好的默认参数，而无须用户依次编写参数，能够有效的提高应用开发的效率。

如图2所示，在本发明另一实施例中，上述装置进一步包括：显示单元201，其中，

封装构建单元101，进一步用于封装至少一种文件上传的方式和样式，为封装的至少一种文件上传的方式和样式中每一种文件上传的方式和样式构建对应的html元素属性；

交互单元102，进一步用于接收输入的至少一个目标html元素属性值，并发送至少一个目标html元素属性值；

接口103，进一步用于接收交互单元102发送的至少一个目标html元素属性值，解析至少一个目标html元素属性值，根据至少一个目标html元素属性值，在封装构建单元101封装的至少一种文件上传的方式和样式中，选定文件上传的目标方式和样式，并将文件上传的目标方式和样式发送给外设的目标上传组件；

显示单元201，用于根据外设的目标上传组件和接口103接收到的文件上传的目标方式和样式，显示文件上传的对话框和文件上传的按钮。

在本发明又一实施例中，封装构建单元，用于将外设的每一种上传组件对应的默认参数和默认值封装到对应的webuploader.js文件中，并存储webuploader.js文件；

交互单元，用于确定文件上传的服务器端地址和文件上传的请求参数表为调变参数，接收文件上传的服务器端地址和文件上传的请求参数表对应的参数值；

接口，进一步用于设置每一个webuploader.js文件对应的引入路径，根据引入路径，加载webuploader.js文件。

在本发明另一实施例中，封装构建单元，用于封装单文件上传方式和样式、多文件上传方式和样式、单图片上传方式和样式及多图片上传方式和样式，其中，单文件上传方式和样式/单图片上传方式和样式，包括：在元素的右侧添加“选择”按钮，当选中文件后添加“上传”、“删除”按钮并隐藏“选择”按钮，并显示上传进度；多文件上传方式和样式/多图片上传方式和样式，包括：为元素添加“添加文件”按钮、“开始上传”按钮和“取消”按钮，通过“添加文件”按钮添加至少一个文件，并显示上传进度。

如图3所示，本发明实施例提供一种调用上传组件的方法，该方法可以包括以下步骤：

步骤301：连接至少一种上传组件，确定每一种上传组件对应的默认参数和默认值，对默认参数和默认值进行封装；

步骤302：确定调变参数，接收输入的调变参数对应的参数值；

步骤303：加载封装的默认参数和对应的默认值，并解析调变参数对应的参数值；

步骤304：根据默认值和解析出的参数值，调用外设的目标上传组件。

在本发明一个实施例中，通过封装至少一种文件上传的方式和样式，以进一步提高应用开发的效率，上述方法进一步包括：封装至少一种文件上传的方式和样式，为封装的至少一种文件上传的方式和样式中每一种文件上传的方式和样式构建对应的html元素属性；在步骤302之后，步骤303之前，进一步包括：接收输入的至少一个目标html元素属性值；在步骤303之后，步骤304之前，进一步包括：解析至少一个目标html元素属性值，根据至少一个目标html元素属性值，在至少一种文件上传的方式和样式中，选定文件上传的目标方式和样式；在步骤304之后进一步包括：将文件上传的目标方式和样式发送给外设的目标上传组件，根据文件上传的目标方式和样式，显示文件上传的对话框和文件上传的按钮。例如：用户只需要输入<input type＝“mutilate-files”>，即可选定多文件上传方式和样式，然后输出该多文件上传方式和样式，用以接收上传文件，进行文件上传。

在本发明一个实施例中，为了能够方便便捷的获得默认参数和默认值，同时灵活的根据用户需求进行设置，步骤301的具体实施方式，包括：将默认参数和默认值封装到对应的webuploader.js文件中，并存储所述webuploader.js文件；步骤302的具体实施方式，包括：确定文件上传的服务器端地址和文件上传的请求参数表为调变参数，接收文件上传的服务器端地址和文件上传的请求参数表对应的参数值；步骤303的具体实施方式，包括：设置每一个webuploader.js文件对应的引入路径，根据引入路径，加载webuploader.js文件。通过该过程，当webuploader.js文件路径发生变化时，只需要修改引入路径，即可实现加载webuploader.js文件，另外由于不同文件上传的服务器的地址不同，通过将文件上传的服务器地址设置为调变参数，用户即可根据自己的需求输入，使得调用上传组件更加灵活。

在本发明一个实施例中，为了保证上传方式和样式的多样性，以供按照用户需求进行选择，上述至少一种文件上传的方式和样式，包括：封装单文件上传方式和样式、多文件上传方式和样式、单图片上传方式和样式及多图片上传方式和样式中的任意一种或多种。例如：单文件上传方式和样式/单图片上传方式和样式可以设置为在元素的右侧添加“选择”按钮，当选中文件后添加“上传”、“删除”按钮并隐藏“选择”按钮，并显示上传进度；多文件上传方式和样式/多图片上传方式和样式可以设置为元素添加“添加文件”按钮、“开始上传”按钮和“取消”按钮，通过“添加文件”按钮添加至少一个文件，并显示上传进度。

如图4所示，本发明另一实施例提供了一种调用上传组件的方法，该方法可以包括以下步骤：

步骤401：连接至少一种上传组件，确定每一种上传组件对应的默认参数和默认值；

步骤402：将默认参数和默认值封装到webuploader.js文件；

在步骤401和步骤402中通过连接至少一种上传组件如Web Uploader或JS，那么根据应用开发过程中的需求可以实现对多种上传组件的调用，由于每一种上传组件的参数不同，需要为不同的组件分别确定对应的默认参数和默认值，例如：对于Web Uploader来说，disableGlobalDnd默认值为false(默认禁止拖拽，以防把图片拖入浏览器而被当做文件打开)，还可以把一些不常用的参数或者应用对上传需求固定的参数设为默认参数，并赋予默认值，还可以根据应用的实际需求配置默认参数项。形式如下：

另外，在该步骤中，通过将将默认参数和默认值封装到webuploader.js文件，用户只需要确定或者修改webuploader.js文件的存储路径，即可自动实现加载默认参数和默认值，而再无需用户输入这部分参数值。

步骤403：设置每一个webuploader.js文件对应的引入路径；

该步骤得引入路径即webuploader.js文件的存储路径，通过该引入路径能够在后续过程中成功对webuploader.js文件中的默认参数和默认值进行加载。

步骤404：封装至少一种文件上传的方式和样式；

在该步骤中封装的文件上传的方式和样式，包括：单文件上传方式和样式、多文件上传方式和样式、单图片上传方式和样式及多图片上传方式和样式中的任意一种或多种，其中，单文件上传方式和样式/单图片上传方式和样式为在元素的右侧添加“选择”按钮，当选中文件后添加“上传”、“删除”按钮并隐藏“选择”按钮，并显示上传进度；多文件上传方式和样式/多图片上传方式和样式为元素添加“添加文件”按钮、“开始上传”按钮和“取消”按钮，通过“添加文件”按钮添加至少一个文件，并显示上传进度。提及的元素文件的显示框。

步骤405：为封装的至少一种文件上传的方式和样式中每一种文件上传的方式和样式构建对应的html元素属性；

在该步骤中，对应于单文件上传方式和样式、多文件上传方式和样式、单图片上传方式和样式及多图片上传方式和样式的元素属性分别为file、mutilate-files、image、mutilate-images四种，其输入形式如下所示：

<input type＝“file”…>、<input type＝“mutilate-files”…>等。

步骤406：确定调变参数，接收输入的调变参数对应的参数值；

在该步骤中确定的调变参数主要是一些简单的，用户容易记住的参数，如：文件上传的服务器端地址(server)，文件上传的请求参数表(formData)等，该调变参数能够满足用户的需求，保证了调用上传组件的灵活性。例如：设置文件上传的服务器端地址(server)：

步骤407：接收输入的至少一个目标html元素属性值；

例如：用户想要单文件上传方式和样式，则输入<input type＝“file”…>。

步骤408：根据引入路径，加载webuploader.js文件，并解析调变参数对应的参数值；

步骤409：根据默认值和解析出的参数值，调用外设的目标上传组件；

步骤408和步骤409的过程实现了通过参数值调用上传组件，但是，上传组件的显示样式则需要下述步骤410至步骤413实现。

步骤410：解析至少一个目标html元素属性值；

步骤411：根据至少一个目标html元素属性值，在至少一种文件上传的方式和样式中，选定文件上传的目标方式和样式；

步骤412：将文件上传的目标方式和样式发送给外设的目标上传组件；

步骤413：根据文件上传的目标方式和样式，显示文件上传的对话框和文件上传的按钮。

步骤410至步骤413的实现过程：例如：解析出两个目标html元素属性值，均为<input type＝“file”…>即单文件上传方式和样式，则根据应用需求和前面参数的设置，将这两个单文件上传方式和样式分别显示在应用的不同位置，该单文件上传方式和样式的显示形式如图5所示，在未加载文件之前，在显示框的右侧显示添加的“选择”按钮(图5-1)，当选中文件f123.zip后，添加“上传”、“删除”按钮并隐藏“选择”按钮(图5-2)。

如图6所示，本发明实施例提供一种调用上传组件的系统，该系统包括：上述任意一种调用上传组件的装置601和至少一种上传组件602，其中，

至少一种上传组件602中，每一种上传组件，用于接收调用上传组件的装置601的调用，并根据调用上传组件的装置601封装至少一种文件上传的方式和样式，输出文件上传/图片上传对话框。

在本发明另一实施例中，上述至少一种上传组件，包括：Web Uploader和JS中的任意一种或两种。

根据上述方案，本发明的各实施例，至少具有如下有益效果：

1.通过封装构建单元确定外设的每一种上传组件对应的默认参数和默认值，对默认参数和默认值进行封装，实现了对默认参数和默认值的封装，可以通过直接调用封装好的默认参数和默认值，而无须用户输入，另外，通过交互单元可以接收需要调变的参数对应的参数值，从而通过接口调用外设的目标上传组件，通过直接调用封装好的默认参数，而无须用户依次编写参数，能够有效的提高应用开发的效率。

2.通过封装至少一种文件上传的方式和样式，为封装的至少一种文件上传的方式和样式中每一种文件上传的方式和样式构建对应的html元素属性，通过接收输入的至少一个目标html元素属性值，解析至少一个目标html元素属性值，即可在所述至少一种文件上传的方式和样式中，选定文件上传的目标方式和样式；也就是说，用户只需要输入元素属性值即可定位出对应的文件上传的方式和样式，进一步提高了应用开发的效率，另外，本发明实施例封装了单文件上传方式和样式、多文件上传方式和样式、单图片上传方式和样式及多图片上传方式和样式中的任意一种或多种，统一了上传组件的显示样式。

3.通过确定文件上传的服务器端地址和文件上传的请求参数表为调变参数，接收用户输入的文件上传的服务器端地址和文件上传的请求参数表对应的参数值，使用户能够按照根据自己的需求设置服务器端地址和文件上传的请求参数，使得本发明实施例提供的调用上传组件的装置具有一定的灵活性，另外，通过webuploader.js文件封装默认参数，当webuploader.js文件存储路径发生变化，用户只需要更改接口中的引入路径，而无须对加载到上传组件中的每一个参数的路径进行更改，进一步减少了工作量，从而进一步提高了开发效率。

需要说明的是，在本文中，诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个······”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同因素。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储在计算机可读取的存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质中。

最后需要说明的是：以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。