CN105630268A - 网络中上传文件的方法和装置 - Google Patents

Abstract

本申请公开了一种网络中上传文件的方法和装置，包括：提供自定义的文件上传用户界面UI，其中包括自定义的文件上传按钮；在所述自定义的文件上传UI的上层设置网页默认的文件上传UI，并将该网页默认的文件上传UI设置成可绝对移动的透明状态；监测鼠标与所述文件上传UI中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，实时获取鼠标位置信息，实时地将网页默认的文件上传UI中的上传按钮的位置修改为所述实时获取的鼠标位置；在网页默认的文件上传UI中的上传按钮被鼠标触发后，触发文件表单选择和上传操作。利用本发明，可跨域实现自定义的文件上传UI，并提高对浏览器的兼容性。

Description

网络中上传文件的方法和装置

技术领域

本申请涉及计算机和互联网数据处理技术领域，尤其涉及一种网络中上传文件的方法和装置。

背景技术

目前，随着互联网技术的发展，网络逐渐成为人们获取信息的重要来源，特别是在互联网进入Web2.0时代后，用户既是网站内容的浏览者，也是网站内容的制造者。用户可以参与创造的内容包括文字如发表文章、发帖等，用户也可以上传图片等内容。

目前的网络处理系统主要分为web前端处理系统和后台处理系统。其中Web前端，本文中简称前端，就是指人机交互端。前端具体可以通过专门的客户端(Client)实现，也可以通过网络浏览器(Browser)来访问服务器的方式实现，即可以采用浏览器/服务器(B/S)结构，也可以采用客户端/服务器(C/S)结构。

所述C/S结构是能充分发挥客户端PC的处理能力，很多工作可以在客户端处理后再提交给服务器，例如对于上传文件的功能，如果采用C/S结构，可以实现自定义的用户界面(UI)，用户界面可以设计得优美和个性化、人性化。

但是，C/S结构的缺点也很明显，就是客户端需要安装专用的客户端软件。首先涉及到安装的工作量，其次任何一台电脑出问题，如病毒、硬件损坏，都需要进行安装或维护。还有，系统软件升级时，每一台客户机需要重新安装，其维护和升级成本非常高。而B/S结构则没有上述缺点。

B/S结构最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件，只要有一台能上网的智能终端就能使用，客户端零维护成本，系统的扩展也非常容易。

目前B/S结构的网络系统在Web前端实现文件上传主流的解决方案如下：

(1)Flash控件实现文件上传。

(2)超文本标记语言(HTML)提供的应用编程接口(API)实现文件上传功能。

但是，现有技术的上述两种方案存在以下缺点：

Flash控件实现上传方案比较成熟，主要基于Flash技术，可以系统开发方可以自定义设计UI，可以实现比较丰富的功能，但是此方案存在跨域的问题，无法实现跨域的文件上传。所述跨域就是需要跨越域名操作。

采用HTML提供的新的API实现的文件上传方案，虽然不存在跨域问题，但是其网页默认的文件上传UI形式固定、死板，如图1所示，其中只有一个简单常规的文件上传按钮101，以及简要的说明文字102，无法对这种文件上传UI进行有针对性、内容更加丰富的自定义设置；同时，这种技术还存在浏览器兼容问题，特别是IE10以下的版本不支持自定义的图片上传用户界面。具体的，如HTML4和HTML5中file类型的input标签样式在不同的浏览器中表现形式不尽相同，而且在同一个浏览器中它不能通过CSS样式来实现自定义UI的目的。

发明内容

有鉴于此，本发明的主要目的是提供一种网络文件上传方法和装置，可跨域实现自定义的文件上传UI，并提高对浏览器的兼容性。

本发明的技术方案是这样实现的：

一种网络中上传文件的方法，包括：

提供自定义的文件上传用户界面，其中，所述自定义的文件上传用户界面包括自定义的文件上传按钮；

在所述自定义的文件上传用户界面的上层设置网页默认的文件上传用户界面，并将该网页默认的文件上传用户界面设置成可绝对移动的透明状态；

监测鼠标与所述文件上传用户界面中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，实时获取鼠标位置信息，并将所述网页默认的文件上传用户界面中的上传按钮的位置修改为所述实时获取的鼠标位置；

在网页默认的文件上传用户界面中的上传按钮被鼠标触发后，触发文件表单选择和上传操作。

一种网络中上传文件的装置，包括：

自定义界面模块，用于提供自定义的文件上传用户界面，其中，所述自定义的文件上传用户界面包括自定义的文件上传按钮展示自定义的文件上传用户界面UI，其中包括自定义的文件上传按钮；

默认界面模块，用于在所述自定义的文件上传UI用户界面的上层设置网页默认的文件上传UI用户界面，并将该网页默认的文件上传UI用户界面设置成可绝对移动的透明状态；

跟随鼠标模块，用于监测鼠标与所述文件上传UI用户界面中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，实时获取鼠标位置信息，实时地将网页默认的文件上传UI用户界面中的上传按钮的位置修改为所述实时获取的鼠标位置；

上传模块，用于在网页默认的文件上传UI用户界面中的上传按钮被鼠标触发后，触发文件表单选择和上传操作。

与现有技术相比，本发明会首先展示自定义的文件上传用户界面(UI)，其中包括自定义的文件上传按钮，该自定义的文件上传UI设置在网页默认的文件上传UI中的上传按钮的下一层，而在所述自定义的文件上传UI的上层设置网页默认的文件上传UI，并将该网页默认的文件上传UI设置成可绝对移动的透明状态；然后监测鼠标与所述文件上传UI中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，即鼠标落在该自定义文件上传按钮上时，实时获取鼠标位置信息，实时地将网页默认的文件上传UI中的上传按钮的位置修改为所述实时获取的鼠标位置。这样就可以实现只要鼠标在自定义文件上传按钮的范围内移动，网页默认的文件上传UI中的上传按钮就跟随鼠标移动，一旦鼠标发生触发点击的操作，由于网页默认的文件上传UI在所述自定义的文件上传按钮的上一层，实际上会直接触发该网页默认的文件上传UI中的上传按钮，进而触发文件表单选择和上传操作。也就是说，用户看到的是自定义的文件上传UI，但点击的是网页默认的文件上传UI中的上传按钮。因此采用本发明，由于没有使用flash，避免了跨域问题；而且将网页默认的文件上传UI设置为透明状态，用户只能看到自定义的文件上传UI，即时浏览器版本不同导致网页默认的文件上传UI显示不一致，对于用户来讲也看不到这种不一致，因此巧妙地解决了浏览器的兼容问题，提高了对浏览器的兼容性。

附图说明

图1为目前网页默认的文件上传UI的一种示意图；

图2为本发明所述的一种网络中上传文件的方法的流程图；

图3为本发明所述在网页默认的文件上传UI的下一层展示的自定义的文件上传UI的示意图；

图4为本发明所述网页默认的文件上传按钮跟随鼠标的一种示意图；

图5为本发明所述的一种网络中上传文件的方法的有一种实施例的流程图；

图6为本发明所述一种网络中上传文件的装置的组成示意图；

图7为本发明所述又一种网络中上传文件的装置的组成示意图。

具体实施方式

下面结合附图及具体实施例对本发明再作进一步详细的说明。

本发明的方法和装置应用在网络系统的前端，即人机交互端。通常的前端技术具体可以通过专门的客户端(Client)实现，也可以通过网络浏览器(Browser)来访问服务器的方式实现，即可以采用浏览器/服务器(B/S)结构，也可以采用客户端/服务器(C/S)结构。

本发明主要应用在采用B/S结构的网络系统前端，但是，如果采用C/S结构的网络系统前端中，其客户端利用浏览器内核来展示浏览网页，则本发明的方案同样适用于这种C/S结构的网络系统前端中。

图2为本发明所述的一种网络中上传文件的方法的流程图。参见图2，该方法主要包括：

步骤201、提供自定义的文件上传用户界面，其中，所述自定义的文件上传用户界面包括自定义的文件上传按钮。

如图3为本发明所述在网页默认的文件上传UI的下一层展示的自定义的文件上传UI的示意图。参见图3，本步骤中，首先在网页中展示一个自定义的文件上传UI300，该文件上传UI中的各种元素可以由网页发布者自行设置和规定，而不受HTML技术规范的影响，如图3中所述文件上传按钮301可以设计得更柔和一点的风格，所述说明文字302可以自定义设置。该自定义的文件上传UI需要在网页中展示出来，用户可以看到。

步骤202、在所述自定义的文件上传UI的上层设置网页默认的文件上传UI，并将该网页默认的文件上传UI设置成可绝对移动的透明状态。

例如，在展示了如图3所示的自定义的文件上传UI后，可以在该自定义的文件上传UI的上层设置网页默认的文件上传UI。具体的，该网络默认的文件上传UI可以为超文本标记语言(HTML)中的表单标签(即form标签)中包含的文件类型(即file类型)的输入标签(即input标签)实现的UI。HTML是目前网络上应用最为广泛的网络计算机技术，网页的本质就是HTML，通过结合使用其他的Web技术(如：脚本语言、公共网关接口、组件等)，可以创造出功能强大的网页。

网络浏览器能够解释HTML文件来显示网页，这是网络浏览器的主要作用。当用户使用浏览器在互联网上浏览网页时，浏览器软件就自动完成HTML文件到网页的转换。因此本发明主要应用在网络浏览器为前端，或者具备网络浏览器内核的客户端为前端的场景。

HTML中的表单form标签中的input标签用于向在网页中展示各种输入接口供用户输入信息并提交到网络后台，例如所述输入接口包括文字输入框、文件上传UI等，其中file类型的input标签提供文件上传UI，并实现文件上传功能。该file类型的input标签有许多属性。

在HTML文档中<inputtype＝"file">标签每出现一次，一个文件上传(FileUpload)对象就会被创建。该元素通常包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。

具体的，所述将网页默认的文件上传UI设置成可绝对移动的透明状态，具体包括：将所述file类型的input标签的定位样式(即position样式)的属性设置为绝对状态(即absolute)，将该input标签的透明度设置为0。

通过上述处理，用户看到的是自定义的文件上传UI，但在该自定义的文件上传UI的上层还有一层是网页默认的文件上传UI，用于响应用户的鼠标操作时间。

但是，网页默认的file类型的input标签的文件上传按钮在不同的浏览器中的宽度和高度是不一样的，如何保证用于可以点击到file类型的input标签的文件上传按钮呢？本发明采用后续步骤203的标签跟随鼠标的方法类解决这个问题。

步骤203、监测鼠标与所述文件上传UI中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，实时获取鼠标位置信息，实时地将网页默认的文件上传UI中的上传按钮的位置修改为所述实时获取的鼠标位置。

如图4为本发明所述网页默认的文件上传按钮跟随鼠标的一种示意图。参见图4，当用户鼠标进入自定义的文件上传UI300中的文件上传按钮301的范围时，所述透明的网页默认文件上传按钮101(图中以虚线标识，实际上是不会显示出来的)会跟随鼠标位置，使得鼠标总是位于该上传按钮101的点击位置，即鼠标总是位于所述file类型的input标签的触发范围中，此时只要用户点击鼠标，就一定会点击到该file类型的input标签，即点击到该网页默认的上传按钮101，从而会触发后续的文件表单选择和上传操作。由于网页默认的文件上传UI是透明的，因此对于用户来说，用户还以为点击的是自定义文件上传UI中的文件上传按钮301。

步骤204、在网页默认的文件上传UI中的上传按钮被鼠标触发后，触发文件表单选择和上传操作。

所述文件表达选择和上传操作和现有技术相同，即出现一个图形化的文件选择窗口供用户选择欲上传的文件，用户选择完成后，将该所选的文件上传到网络后台。

通过上述处理，本发明使用户看到的是自定义的文件上传UI，但点击的是网页默认的文件上传UI中的上传按钮。因此采用本发明，由于没有使用flash，避免了跨域问题；而且将网页默认的文件上传UI设置为透明状态，用户只能看到自定义的文件上传UI，即时浏览器版本不同导致网页默认的文件上传UI显示不一致，对于用户来讲也看不到这种不一致，因此巧妙地解决了浏览器的兼容问题，提高了对浏览器的兼容性。

在现有技术中，还存在另一个技术问题，就是form表单提交时会强制刷新页面，但是对于文件上传界面来讲，通常刷新页面的操作会严重影响用户的使用效率，如果遇到网络带宽不高或网络通信拥堵的情况下，会长时间滞留在等待刷新的页面，造成浏览器运行不畅。

为了解决这个问题，在本发明的一种优选实施例中，进一步包括以下步骤205到207，如图5所示：

步骤205、在当前网页的框架内创建一个子框架，当前网页的框架为父框架，将所述子框架设置为隐藏模式；在所述父框架中设置回调通知函数。

此实施例中，所述子框架为HTML中内联框架(iframe)标签对应的框架，所述文件表单为标签表单，即form表单，所述文件表单的上传执行信息为该标签表单(即form表单)的行动(action)属性，所述文件表单的上传结果响应目标为该标签表单(即form表单)的目标(target)属性。

步骤206、将所述文件表单的上传执行信息中增加所述回调通知函数的名称，例如callback，并将所述文件表单的上传结果响应目标指向所述子框架；这样设置，用于一旦用户点击了网页默认的文件上传按钮后，会通知后台在接受上传文件后，将处理结果包装在所述回调通知函数名中，返回给所述子框架。

例如后台返回的回调通知函数名和处理结果的一种具体的javascript代码格式为：

self.parent.callback(data)；

其中data为后台对上传文件的处理结果，通常是文件上传是否成功的信息。

步骤207、所述子框架在收到后台返回的处理结果和回调通知函数名后，强制刷新本子框架内的页面，由于该子框架为隐藏状态，因此对于用户来讲是看不到页面刷新的，同时子框架会自己执行上述javascript代码，调用父框架中的所述回调通知函数，将后台处理结果发送给该回调通知函数，该回调通知函数输出所述后台处理结果。

所述回调通知函数的执行内容可以由网页发布方自定设定，例如，所述回调通知函数可以利用弹窗的形式将处理结果显示给用户，其中提示“文件已经上传完毕！”或“文件未成功上传！”等。这样，对于用户来讲看不到页面强制刷新的过程，而只是看到简洁的提示文字，大大提高了用户的操作效率。

与上述方法对应，本发明还公开了一种网络中上传文件的装置。图6为本发明所述一种网络中上传文件的装置的组成示意图，该装置600包括：

自定义界面模块601，用于提供自定义的文件上传用户界面，其中，所述自定义的文件上传用户界面包括自定义的文件上传按钮。

默认界面模块602，用于在所述自定义的文件上传UI的上层设置网页默认的文件上传UI，并将该网页默认的文件上传UI设置成可绝对移动的透明状态。

所述网络默认的文件上传UI为HTML中的form标签中包含的file类型的input标签实现的UI。其中，所述默认界面模块具体用于：将所述file类型的input标签的position样式的属性设置为absolute，将该input标签的透明度设置为0。

跟随鼠标模块603，用于监测鼠标与所述文件上传UI中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，实时获取鼠标位置信息，实时地将网页默认的文件上传UI中的上传按钮的位置修改为所述实时获取的鼠标位置。

上传模块604，用于在网页默认的文件上传UI中的上传按钮被鼠标触发后，触发文件表单选择和上传操作。

在进一步优选的实施例中，该装置600进一步包括：

框架设置模块605，用于在当前网页的框架内创建一个子框架，当前网页的框架为父框架，将所述子框架设置为隐藏模式；在所述父框架中设置回调通知函数；

表单设置模块606，用于将所述文件表单的上传执行信息中增加该回调通知函数的名称，并将所述文件表单的上传结果响应目标指向所述子框架；这样设置用于通知后台在接受上传文件后，将处理结果包装在所述回调通知函数名中，返回给所述子框架；

上传响应模块607，用于在上传文件后，所述子框架收到后台返回的处理结果和回调通知函数名后，强制刷新本子框架内的页面，并调用父框架中的所述回调通知函数，将后台处理结果发送给该回调通知函数，该回调通知函数输出所述后台处理结果。

其中，所述子框架为iframe标签对应的框架，所述文件表单为form表单，所述文件表单的上传执行信息为form表单的action属性，所述文件表单的上传结果响应目标为该form表单的target属性。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。所述各实施例的功能模块可以位于一个终端或网络节点，或者也可以分布到多个终端或网络节点上。

另外，本发明的每一个实施例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本发明。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和或内存)中执行。因此，这样的存储介质也构成了本发明。存储介质可以使用任何类型的记录方式，例如纸张存储介质(如纸带等)、磁存储介质(如软盘、硬盘、闪存等)、光存储介质(如CD-ROM等)、磁光存储介质(如MO等)等。

因此本发明还公开了一种存储介质，其中存储有数据处理程序，该数据处理程序用于执行本发明上述方法的任何一种实施例。

另外，本发明所述的方法步骤除了可以用数据处理程序来实现，还可以由硬件来实现，例如，可以由逻辑门、开关、专用集成电路(ASIC)、可编程逻辑控制器和嵌入微控制器等来实现。因此这种可以实现本发明所述方法的硬件也可以构成本发明。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (10)

1.一种网络中上传文件的方法，其特征在于，包括：

提供自定义的文件上传用户界面，其中，所述自定义的文件上传用户界面包括自定义的文件上传按钮；

在所述自定义的文件上传用户界面的上层设置网页默认的文件上传用户界面，并将该网页默认的文件上传用户界面设置成可绝对移动的透明状态；

监测鼠标与所述文件上传用户界面中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，实时获取鼠标位置信息，并将所述网页默认的文件上传用户界面中的上传按钮的位置修改为所述实时获取的鼠标位置；

在网页默认的文件上传用户界面中的上传按钮被鼠标触发后，触发文件表单选择和上传操作。

2.根据权利要求1所述的方法，其特征在于，所述网络默认的文件上传用户界面为超文本标记语言中的表单标签中包含的文件类型的输入标签实现的用户界面。

3.根据权利要求2所述的方法，其特征在于，所述将网页默认的文件上传用户界面设置成可绝对移动的透明状态，具体包括：将所述文件类型的输入标签的定位样式的属性设置为绝对状态，将该输入标签的透明度设置为0。

4.根据权利要求1所述的方法，其特征在于，该方法进一步包括：

在当前网页的框架内创建一个子框架，当前网页的框架为父框架，将所述子框架设置为隐藏模式；在所述父框架中设置回调通知函数；

将所述文件表单的上传执行信息中增加所述回调通知函数的名称，并将所述文件表单的上传结果响应目标指向所述子框架；

所述子框架在收到后台返回的处理结果和回调通知函数名后，强制刷新本子框架内的页面，并调用父框架中的所述回调通知函数，将后台处理结果发送给该回调通知函数，该回调通知函数输出所述后台处理结果。

5.根据权利要求4所述的方法，其特征在于，所述子框架为内联框架标签对应的框架，所述文件表单为标签表单，所述文件表单的上传执行信息为标签表单的行动属性，所述文件表单的上传结果响应目标为该标签表单的目标属性。

6.一种网络中上传文件的装置，其特征在于，包括：

自定义界面模块，用于提供自定义的文件上传用户界面，其中，所述自定义的文件上传用户界面包括自定义的文件上传按钮；

默认界面模块，用于在所述自定义的文件上传用户界面的上层设置网页默认的文件上传用户界面，并将该网页默认的文件上传用户界面设置成可绝对移动的透明状态；

跟随鼠标模块，用于监测鼠标与所述文件上传用户界面中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，实时获取鼠标位置信息，实时地将网页默认的文件上传用户界面中的上传按钮的位置修改为所述实时获取的鼠标位置；

上传模块，用于在网页默认的文件上传用户界面中的上传按钮被鼠标触发后，触发文件表单选择和上传操作。

7.根据权利要求6所述的装置，其特征在于，所述网络默认的文件上传用户界面为超文本标记语言中的表单标签中包含的文件类型的输入标签实现的用户界面。

8.根据权利要求7所述的装置，其特征在于，所述默认界面模块具体用于：将所述文件类型的输入标签的定位样式的属性设置为绝对状态，将该输入标签的透明度设置为0。

9.根据权利要求6所述的装置，其特征在于，该装置进一步包括：

框架设置模块，用于在当前网页的框架内创建一个子框架，当前网页的框架为父框架，将所述子框架设置为隐藏模式；在所述父框架中设置回调通知函数；

表单设置模块，用于将所述文件表单的上传执行信息中增加该回调通知函数的名称，并将所述文件表单的上传结果响应目标指向所述子框架；

上传响应模块，用于在所述子框架收到后台返回的处理结果和回调通知函数名后，强制刷新本子框架内的页面，并调用父框架中的所述回调通知函数，将后台处理结果发送给该回调通知函数，该回调通知函数输出所述后台处理结果。

10.根据权利要求9所述的装置，其特征在于，所述子框架为内联框架标签对应的框架，所述文件表单为标签表单，所述文件表单的上传执行信息为标签表单的行动属性，所述文件表单的上传结果响应目标为该标签表单的目标属性。