网络中上传文件的方法和装置的制造方法
【技术领域】
[0001]本申请涉及计算机和互联网数据处理技术领域，尤其涉及一种网络中上传文件的方法和装置。
【背景技术】
[0002]目前，随着互联网技术的发展，网络逐渐成为人们获取信息的重要来源，特别是在互联网进入Web2.0时代后，用户既是网站内容的浏览者，也是网站内容的制造者。用户可以参与创造的内容包括文字如发表文章、发帖等，用户也可以上传图片等内容。
[0003]目前的网络处理系统主要分为web前端处理系统和后台处理系统。其中Web前端，本文中简称前端，就是指人机交互端。前端具体可以通过专门的客户端(Client)实现，也可以通过网络浏览器(Browser)来访问服务器的方式实现，即可以采用浏览器/服务器(B/S)结构，也可以采用客户端/服务器(C/S)结构。
[0004]所述C/S结构是能充分发挥客户端PC的处理能力，很多工作可以在客户端处理后再提交给服务器，例如对于上传文件的功能，如果采用C/S结构，可以实现自定义的用户界面(UI)，用户界面可以设计得优美和个性化、人性化。
[0005]但是，C/S结构的缺点也很明显，就是客户端需要安装专用的客户端软件。首先涉及到安装的工作量，其次任何一台电脑出问题，如病毒、硬件损坏，都需要进行安装或维护。还有，系统软件升级时，每一台客户机需要重新安装，其维护和升级成本非常高。而B/S结构则没有上述缺点。
[0006]B/S结构最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件，只要有一台能上网的智能终端就能使用，客户端零维护成本，系统的扩展也非常容易。
[0007]目前B/S结构的网络系统在Web前端实现文件上传主流的解决方案如下:
[0008](I)Flash控件实现文件上传。
[0009](2)超文本标记语言(HTML)提供的应用编程接口(API)实现文件上传功能。
[0010]但是，现有技术的上述两种方案存在以下缺点:
[0011 ] Flash控件实现上传方案比较成熟，主要基于Flash技术，可以系统开发方可以自定义设计UI，可以实现比较丰富的功能，但是此方案存在跨域的问题，无法实现跨域的文件上传。所述跨域就是需要跨越域名操作。
[0012]采用HTML提供的新的API实现的文件上传方案，虽然不存在跨域问题，但是其网页默认的文件上传UI形式固定、死板，如图1所示，其中只有一个简单常规的文件上传按钮101，以及简要的说明文字102，无法对这种文件上传UI进行有针对性、内容更加丰富的自定义设置；同时，这种技术还存在浏览器兼容问题，特别是IElO以下的版本不支持自定义的图片上传用户界面。具体的，如HTML4和HTML5中file类型的input标签样式在不同的浏览器中表现形式不尽相同，而且在同一个浏览器中它不能通过CSS样式来实现自定义UI的目的。
【发明内容】
[0013]有鉴于此，本发明的主要目的是提供一种网络文件上传方法和装置，可跨域实现自定义的文件上传UI，并提高对浏览器的兼容性。
[0014]本发明的技术方案是这样实现的:
[0015]一种网络中上传文件的方法，包括:
[0016]提供自定义的文件上传用户界面，其中，所述自定义的文件上传用户界面包括自定义的文件上传按钮；
[0017]在所述自定义的文件上传用户界面的上层设置网页默认的文件上传用户界面，并将该网页默认的文件上传用户界面设置成可绝对移动的透明状态；
[0018]监测鼠标与所述文件上传用户界面中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，实时获取鼠标位置信息，并将所述网页默认的文件上传用户界面中的上传按钮的位置修改为所述实时获取的鼠标位置；
[0019]在网页默认的文件上传用户界面中的上传按钮被鼠标触发后，触发文件表单选择和上传操作。
[0020]一种网络中上传文件的装置，包括:
[0021]自定义界面模块，用于提供自定义的文件上传用户界面，其中，所述自定义的文件上传用户界面包括自定义的文件上传按钮展示自定义的文件上传用户界面UI，其中包括自定义的文件上传按钮；
[0022]默认界面模块，用于在所述自定义的文件上传UI用户界面的上层设置网页默认的文件上传UI用户界面，并将该网页默认的文件上传UI用户界面设置成可绝对移动的透明状态；
[0023]跟随鼠标模块，用于监测鼠标与所述文件上传UI用户界面中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，实时获取鼠标位置信息，实时地将网页默认的文件上传UI用户界面中的上传按钮的位置修改为所述实时获取的鼠标位置；
[0024]上传模块，用于在网页默认的文件上传UI用户界面中的上传按钮被鼠标触发后，触发文件表单选择和上传操作。
[0025]与现有技术相比，本发明会首先展示自定义的文件上传用户界面(UI)，其中包括自定义的文件上传按钮，该自定义的文件上传UI设置在网页默认的文件上传UI中的上传按钮的下一层，而在所述自定义的文件上传UI的上层设置网页默认的文件上传UI，并将该网页默认的文件上传UI设置成可绝对移动的透明状态；然后监测鼠标与所述文件上传UI中的自定义文件上传按钮的相对位置，在鼠标进入所述自定义文件上传按钮的范围时，即鼠标落在该自定义文件上传按钮上时，实时获取鼠标位置信息，实时地将网页默认的文件上传UI中的上传按钮的位置修改为所述实时获取的鼠标位置。这样就可以实现只要鼠标在自定义文件上传按钮的范围内移动，网页默认的文件上传UI中的上传按钮就跟随鼠标移动，一旦鼠标发生触发点击的操作，由于网页默认的文件上传UI在所述自定义的文件上传按钮的上一层，实际上会直接触发该网页默认的文件上传UI中的上传按钮，进而触发文件表单选择和上传操作。也就是说，用户看到的是自定义的文件上传UI，但点击的是网页默认的文件上传UI中的上传按钮。因此采用本发明，由于没有使用flash，避免了跨域问题；而且将网页默认的文件上传UI设置为透明状态，用户只能看到自定义的文件上传UI，即时浏览器版本不同导致网页默认的文件上传UI显示不一致，对于用户来讲也看不到这种不一致，因此巧妙地解决了浏览器的兼容问题，提高了对浏览器的兼容性。
【附图说明】
[0026]图1为目前网页默认的文件上传UI的一种示意图；
[0027]图2为本发明所述的一种网络中上传文件的方法的流程图；
[0028]图3为本发明所述在网页默认的文件上传UI的下一层展示的自定义的文件上传UI的TK意图；
[0029]图4为本发明所述网页默认的文件上传按钮跟随鼠标的一种示意图；
[0030]图5为本发明所述的一种网络中上传文件的方法的有一种实施例的流程图；
[0031]图6为本发明所述一种网络中上传文件的装置的组成示意图；
[0032]图7为本发明所述又一种网络中上传文件的装置的组成示意图。
【具体实施方式】
[0033]下面结合附图及具体实施例对本发明再作进一步详细的说明。
[0034]本发明的方法和装置应用在网络系统的前端，即人机交互端。通常的前端技术具体可以通过专门的客户端(Client)实现，也可以通过网络浏览器(Browser)来访问服务器的方式实现，即可以采用浏览器/服务器(B/S)结构，也可以采用客户端/服务器(C/S)结构。
[0035]本发明主要应用在采用B/S结构的网络系统前端，但是，如果采用C/S结构的网络系统前端中，其客户端利用浏览器内核来展示浏览网页，则本发明的方案同样适用于这种C/S结构的网络系统前端中。
[0036]图2为本发明所述的一种网络中上传文件的方法的流程图。参见图2，该方法主要包括:
[0037]步骤201、提供自定义的文件上传用户界面，其中，所述自定义的文件上传用户界面包括自定义的文件上传按钮。
[0038]如