CN101221501A - 一种浏览器的文件上传控件的生成方法及生成装置 - Google Patents

Abstract

本发明公开了一种浏览器的文件上传控件的生成方法，包括：在web页面上生成web表单、目标按钮和目标文本框，所述web表单中布置有浏览器默认的文件上传控件；在所述目标按钮中添加第一控制事件，所述第一控制事件用于在鼠标进入所述目标按钮的区域时触发，将所述默认上传控件的右边定位至当前鼠标的位置；在所述默认上传控件中添加第二控制事件、第三控制事件和第四控制事件。本发明可以解决浏览器默认的文件上传控件不能改变的按钮文字和样式所导致的问题，并正确模拟默认文件上传按钮的行为，能在不同浏览器上使用。

Description

一种浏览器的文件上传控件的生成方法及生成装置

技术领域

本发明涉及web应用领域，特别涉及一种浏览器的文件上传控件的生成方法及一种浏览器的文件上传控件的生成装置。

背景技术

目前，在纯Web的应用中，基于各个浏览器开发厂商的限制，在设计文件上传控件时，必须用到浏览器默认的文件上传控件。如图1所示，这种默认的文件上传控件通常由设置在左边的文本框101和设置在右边的按钮102组成，生成后，一旦控件中的按钮受到触发，则会弹出本地硬盘的浏览窗口，用户从中选定文件后，相应文件的路径会出现在文本框中。

然而在实际中，由于这种默认文件上传控件的限制，往往不能满足用户自定义的需求，例如，不能对按钮上的文字进行更改、不能对文本框或按钮的长度进行调节、不能采用其它的网页元素(如图片)来代替按钮、不支持诸多CSS(层叠样式表)事件等。由此，可能产生一系列应用问题，例如，若整个Web系统有自己的默认风格，则这种默认的文件上传控件的固化设置会破坏整个系统的视觉效果；或者，在具有多语言版本(如，简体中文、繁体中文、英文)的Web应用中，当用户用默认语言设置为简体中文的浏览器访问繁体中文或英文版本的时候，看到的上传控件按钮的文字仍然是简体中文的“浏览...”；如果用默认语言设置为英文的浏览器访问简体中文或繁体中文版本的时候，上传控件按钮的文字仍然是英文“Browse...”等。

对此，现有技术提出了一种在这种默认的文件上传控件上叠加自定义控件的解决方式，具体而言，可以通过以下步骤实现：

步骤S1、在页面上布置一个网页表单、一个普通的文本框和一个普通的按钮；

步骤S2、在网页表单中布置一个浏览器默认的文件上传控件，并把它的不透明度设置为0，即使它完全透明。

步骤S3、把这个完全透明的默认文件上传控件设置为绝对定位，并把其中的按钮部分叠加在预先前设置的普通按钮上面；

步骤S4、在默认文件上传控件中注册一个change事件，这个事件是当默认文件上传控件中文本框的值改变时触发的动作，当此控件的值改变时，就把这个值复制到先前定义好的普通文本框里；

当用户在浏览器上点击这个普通按钮时，实际上是点击了那个完全透明的文件上传控件的按钮，所以就会弹出默认的本地硬盘的浏览窗口。用户选定上传的文件，被选中文件的本地硬盘路径会分别出现在这个普通文本框和默认文件上传控件中，这时提交页面上的表单就可以使相应的文件上传到服务器。

然而，这种现有的解决方式仍然存在一些缺陷，例如：

1、因为不能调整浏览器默认的文件上传控件的宽度，所以当自定义的按钮长度大于默认上传控件中的按钮时，默认的按钮不能完全覆盖自定义的按钮，导致点击自定义按钮的某些部分不能触发本地硬盘的浏览窗口；或者，当自定义的按钮长度小于默认上传控件中的按钮时，默认的按钮的覆盖区域会超出自定义的按钮的显示范围，导致点击某些非自定义按钮的部分也会触发本地硬盘的浏览窗口的不合理现象；

2、因为默认的浏览器上传控件有自己的文本框部分，这部分文本框会挡住一部分页面，影响这部分页面的正常行为。例如，前面的解决方案经常会挡住了自定义的文本框，影响文本框的正常获取焦点和输入；

3、当触发了本地硬盘的浏览窗口后，此时屏幕焦点停留在透明的默认文件上传控件上，违反交互习惯；

4、因为不同浏览器的默认文件上传控件的宽度是不一样的，所以不能在不同的浏览器上使用。

发明内容

本发明所要解决的技术问题是提供一种浏览器的文件上传控件的生成方法，用以解决浏览器默认的文件上传控件不能改变的按钮文字和样式所导致的问题，并正确模拟默认文件上传按钮的行为，能在不同浏览器上使用。

本发明还提供了一种浏览器的文件上传控件的生成装置，用以保证上述方法在实际中的实现及应用。

为解决上述技术问题，本发明实施例公开了一种浏览器的文件上传控件的生成方法，包括：

在web页面上生成web表单、目标按钮和目标文本框，所述web表单中布置有浏览器默认的文件上传控件，所述默认上传控件在所述表单中具有固定位置，并且是透明的；

在所述目标按钮中添加第一控制事件，所述第一控制事件用于在鼠标进入所述目标按钮的区域时触发，将所述默认上传控件的右边定位至当前鼠标的位置；

在所述默认上传控件中添加第二控制事件、第三控制事件和第四控制事件，所述第二控制事件用于在所述默认上传控件的文本框中的值改变时触发，将所述改变的值添加至所述目标文本框中；所述第三控制事件用于监控当前鼠标的位置是否在所述目标按钮的区域内，如果是，则依据当前鼠标的位置定位所述默认上传控件；如果否，则屏蔽所述默认上传控件；所述第四控制事件用于在触发所述默认上传控件的按钮时触发，将当前焦点定位至所述目标文本框中。

优选的，所述目标按钮具有显示的样式属性。

优选的，所述第四控制事件的焦点定位操作为在一定延时后将当前焦点定位至所述目标文本框中。

优选的，所述第一控制事件为mouseover事件；所述第二控制事件为change事件；所述第三控制事件为mousemove事件；所述第四控制事件为onclick事件。

本发明实施例还公开了一种浏览器的文件上传控件的生成装置，包括：

生成单元，用于在web页面上生成web表单、目标按钮和目标文本框，所述web表单中布置有浏览器默认的文件上传控件，所述默认上传控件在所述表单中具有固定位置，并且是透明的；

第一事件注册单元，用于在所述目标按钮中添加第一控制事件，所述第一控制事件用于在鼠标进入所述目标按钮的区域时触发，将所述默认上传控件的右边定位至当前鼠标的位置；

第二事件注册单元，用于在所述默认上传控件中添加第二控制事件，所述第二控制事件用于在所述默认上传控件的文本框中的值改变时触发，将所述改变的值添加至所述目标文本框中；

第三事件注册单元，用于在所述默认上传控件中添加第三控制事件，所述第三控制事件用于监控当前鼠标的位置是否在所述目标按钮的区域内，如果是，则依据当前鼠标的位置定位所述默认上传控件；如果否，则屏蔽所述默认上传控件；

第四事件注册单元，用于在所述默认上传控件中添加第四控制事件，所述第四控制事件用于在触发所述默认上传控件的按钮时触发，将当前焦点定位至所述目标文本框中。

优选的，所述目标按钮具有显示的样式属性。

优选的，所述第一控制事件为mouseover事件；所述第二控制事件为change事件；所述第三控制事件为mousemove事件；所述第四控制事件为onclick事件。

与现有技术相比，本发明实施例具有以下优点：

首先，本发明通过所述目标按钮中的第一控制事件，依据当前鼠标的位置具体定位所述默认上传控件，以及，通过所述默认上传控件中的第三控制事件监控当前鼠标的位置，实时判断是否在所述目标按钮的区域内，如果是，则依据当前鼠标的位置定位所述默认上传控件，即控制默认上传控件相对于鼠标的位置静止地移动，从而在目标按钮区域内的任何位置都能触发本地硬盘的浏览窗口，避免了现有技术中当自定义的按钮长度(即本发明中的目标按钮)大于默认上传控件中的按钮时，点击自定义按钮的某些部分不能触发本地硬盘的浏览窗口的问题；以及，当自定义的按钮长度小于默认上传控件中的按钮时，默认的按钮的覆盖区域会超出自定义的按钮的显示范围，点击某些非自定义按钮的部分也会触发本地硬盘的浏览窗口的不合理现象；如果当前鼠标的位置不在目标按钮的区域内，就屏蔽所述默认上传控件，即将默认上传控件在屏幕上隐藏，使它不会阻挡页面其它元素的正常行为，进而可以使本发明的文件上传控件在不同浏览器上使用。

再者，本发明通过所述默认上传控件中的第四控制事件在触发所述默认上传控件的按钮时，将当前焦点重新定位至所述目标文本框中，从而避免了现有技术中违反交互习惯的屏幕焦点停留在默认上传控件的行为。

最后，本发明对于服务提供商来说，技术实现简单，无技术障碍，无特殊保密算法，成本和风险较低。

附图说明

图1是一种浏览器默认的文件上传控件结构的示意图；

图2是本发明的一种浏览器的文件上传控件的生成方法实施例1的流程图；

图3是本发明的一种浏览器的文件上传控件的生成方法实施例2的流程图；

图4是本发明的一种浏览器的文件上传控件的生成装置实施例的结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

本发明可用于众多通用或专用的计算系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、包括以上任何系统或设备的分布式计算环境等等。

本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

参考图2，示出了本发明的一种浏览器的文件上传控件的生成方法实施例1的流程图，可以包括以下步骤：

步骤201、在web页面上生成web表单、目标按钮和目标文本框，所述web表单中布置有浏览器默认的文件上传控件，所述默认上传控件在所述表单中具有固定位置，并且是透明的；

步骤202、在所述目标按钮中添加第一控制事件，所述第一控制事件用于在鼠标进入所述目标按钮的区域时触发，将所述默认上传控件的右边定位至当前鼠标的位置；

步骤203、在所述默认上传控件中添加第二控制事件，所述第二控制事件用于在所述默认上传控件的文本框中的值改变时触发，将所述改变的值添加至所述目标文本框中；

步骤204、在所述默认上传控件中添加第三控制事件，所述第三控制事件用于监控当前鼠标的位置是否在所述目标按钮的区域内，如果是，则依据当前鼠标的位置定位所述默认上传控件；如果否，则屏蔽所述默认上传控件；

步骤205、在所述默认上传控件中添加第四控制事件，所述第四控制事件用于在触发所述默认上传控件的按钮时触发，将当前焦点定位至所述目标文本框中。

在实际中，所述web表单、目标按钮和目标文本框都是可以任意地控制样式的。优选的是，为了防止默认上传控件的高度超过所述目标按钮的高度，可以将所述默认上传控件的高度设置得比较小，例如，10px。此外，还可以将所述目标按钮的样式属性display设置为，在屏幕上正常显示。

在IE浏览器中，由于弹出本地硬盘浏览窗口和脚本的执行是异步的，所以在重定位焦点时，可能会对弹出本地硬盘浏览窗口的行为产生影响，导致本地硬盘的浏览窗口不能弹出。对此，可以设置所述第四控制事件的焦点定位操作为，在一定延时后将当前焦点定位至所述目标文本框中。具体而言，可以设置一个定时器，用于在触发所述默认上传控件的按钮一段时间后(如1秒)，再做屏幕焦点重定位的操作。当然，上述延时方案的设计仅对于目前的IE浏览器而言，事实上，在其它的浏览器中，弹出本地硬盘浏览窗口和脚本的执行过程可能是同步的，在这种情况下，则直接将当前焦点定位至所述目标文本框中即可。对此，本领域技术人员根据实际情况相应处理即可，本发明对此不需要进行限定。

应用本实施例，在浏览器上点击目标按钮时，实际上是点击了默认上传控件的按钮，所以就会弹出默认的本地硬盘的浏览窗口；当选定要上传的文件确认后，被选中文件的本地硬盘路径则会分别出现在目标文本框和默认上传控件的文本框中，由于后者是透明的，并且此时焦点也会停留在目标按钮上，所以操作的过程和结果与触发所述默认上传控件是一样的。此时，提交所述web页面的web表单即可将相应的文件执行上传操作。

本发明通过所述目标按钮中的第一控制事件，依据当前鼠标的位置具体定位所述默认上传控件，以及，通过所述默认上传控件中的第三控制事件监控当前鼠标的位置，实时判断是否在所述目标按钮的区域内，如果是，则依据当前鼠标的位置定位所述默认上传控件，即控制默认上传控件相对于鼠标的位置静止地移动，从而在目标按钮区域内的任何位置都能触发本地硬盘的浏览窗口，避免了现有技术中当自定义的按钮长度(即本发明中的目标按钮)大于默认上传控件中的按钮时，点击自定义按钮的某些部分不能触发本地硬盘的浏览窗口的问题；以及，当自定义的按钮长度小于默认上传控件中的按钮时，默认的按钮的覆盖区域会超出自定义的按钮的显示范围，点击某些非自定义按钮的部分也会触发本地硬盘的浏览窗口的不合理现象；如果当前鼠标的位置不在目标按钮的区域内，就屏蔽所述默认上传控件，即将默认上传控件在屏幕上隐藏，使它不会阻挡页面其它元素的正常行为，进而可以使本发明的文件上传控件在不同浏览器上使用。再者，通过所述默认上传控件中的第四控制事件在触发所述默认上传控件的按钮时，将当前焦点重新定位至所述目标文本框中，从而避免了现有技术中违反交互习惯的屏幕焦点停留在默认上传控件的行为。

参考图3，示出了本发明的一种浏览器的文件上传控件的生成方法实施例2的流程图，可以包括以下步骤：

步骤301、在web页面上生成web表单、目标按钮和目标文本框，所述web表单中布置有浏览器默认的文件上传控件，所述默认上传控件在所述表单中具有固定位置，并且是透明的；

步骤302、在所述目标按钮中添加mouseover事件，所述mouseover事件用于在鼠标进入所述目标按钮的区域时触发，将所述默认上传控件的右边定位至当前鼠标的位置，并把所述目标按钮的样式属性设置为在屏幕上显示；

步骤303、在所述默认上传控件中添加change事件，所述change事件用于在所述默认上传控件的文本框中的值改变时触发，将所述改变的值添加至所述目标文本框中；

例如，在用户在本地硬盘的浏览窗口中选定上传文件后，所述默认上传控件的文本框中的值会改变为该上传文件的路径，此时，change事件将控制把这个路径复制到目标文本框中。

步骤304、在所述默认上传控件中添加mousemove事件，所述mousemove事件用于监控当前鼠标的位置是否在所述目标按钮的区域内，如果是，则依据当前鼠标的位置定位所述默认上传控件；如果否，则屏蔽所述默认上传控件；

步骤305、在所述默认上传控件中添加onclick事件，所述onclick事件用于在触发所述默认上传控件的按钮时触发，将当前焦点定位至所述目标文本框中。

对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。此外，在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

参考图4，示出了本发明的一种浏览器的文件上传控件的生成装置实施例的结构框图，可以包括以下单元：

生成单元401，用于在web页面上生成web表单、目标按钮和目标文本框，所述web表单中布置有浏览器默认的文件上传控件，所述默认上传控件在所述表单中具有固定位置，并且是透明的；

第一事件注册单元402，用于在所述目标按钮中添加第一控制事件，所述第一控制事件用于在鼠标进入所述目标按钮的区域时触发，将所述默认上传控件的右边定位至当前鼠标的位置；

第二事件注册单元403，用于在所述默认上传控件中添加第二控制事件，所述第二控制事件用于在所述默认上传控件的文本框中的值改变时触发，将所述改变的值添加至所述目标文本框中；

第三事件注册单元404，用于在所述默认上传控件中添加第三控制事件，所述第三控制事件用于监控当前鼠标的位置是否在所述目标按钮的区域内，如果是，则依据当前鼠标的位置定位所述默认上传控件；如果否，则屏蔽所述默认上传控件；

第四事件注册单元405，用于在所述默认上传控件中添加第四控制事件，所述第四控制事件用于在触发所述默认上传控件的按钮时触发，将当前焦点定位至所述目标文本框中。

优选的是，所述目标按钮具有显示的样式属性。

更具体地，所述第一控制事件可以为mouseover事件；所述第二控制事件可以为change事件；所述第三控制事件可以为mousemove事件；所述第四控制事件可以为onclick事件。

由于图4所示的浏览器的文件上传控件的生成装置实施例可以对应适用于前述的各种方法实施例中，所以针对图4的描述较为简略，未详尽之处可以参见本说明书前面相应部分的描述。

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

以上对本发明所提供的一种浏览器的文件上传控件的生成方法、及一种浏览器的文件上传控件的生成装置进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (7)

1.一种浏览器的文件上传控件的生成方法，其特征在于，包括：

在web页面上生成web表单、目标按钮和目标文本框，所述web表单中布置有浏览器默认的文件上传控件，所述默认上传控件在所述表单中具有固定位置，并且是透明的；

在所述目标按钮中添加第一控制事件，所述第一控制事件用于在鼠标进入所述目标按钮的区域时触发，将所述默认上传控件的右边定位至当前鼠标的位置；

在所述默认上传控件中添加第二控制事件、第三控制事件和第四控制事件，所述第二控制事件用于在所述默认上传控件的文本框中的值改变时触发，将所述改变的值添加至所述目标文本框中；所述第三控制事件用于监控当前鼠标的位置是否在所述目标按钮的区域内，如果是，则依据当前鼠标的位置定位所述默认上传控件；如果否，则屏蔽所述默认上传控件；所述第四控制事件用于在触发所述默认上传控件的按钮时触发，将当前焦点定位至所述目标文本框中。

2.如权利要求1所述的方法，其特征在于，所述目标按钮具有显示的样式属性。

3.如权利要求1或2所述的方法，其特征在于，所述第四控制事件的焦点定位操作为在一定延时后将当前焦点定位至所述目标文本框中。

4.如权利要求1所述的方法，其特征在于，所述第一控制事件为mouseover事件；所述第二控制事件为change事件；所述第三控制事件为mousemove事件；所述第四控制事件为onclick事件。

5.一种浏览器的文件上传控件的生成装置，其特征在于，包括：

生成单元，用于在web页面上生成web表单、目标按钮和目标文本框，所述web表单中布置有浏览器默认的文件上传控件，所述默认上传控件在所述表单中具有固定位置，并且是透明的；

第一事件注册单元，用于在所述目标按钮中添加第一控制事件，所述第一控制事件用于在鼠标进入所述目标按钮的区域时触发，将所述默认上传控件的右边定位至当前鼠标的位置；

第二事件注册单元，用于在所述默认上传控件中添加第二控制事件，所述第二控制事件用于在所述默认上传控件的文本框中的值改变时触发，将所述改变的值添加至所述目标文本框中；

第三事件注册单元，用于在所述默认上传控件中添加第三控制事件，所述第三控制事件用于监控当前鼠标的位置是否在所述目标按钮的区域内，如果是，则依据当前鼠标的位置定位所述默认上传控件；如果否，则屏蔽所述默认上传控件；

第四事件注册单元，用于在所述默认上传控件中添加第四控制事件，所述第四控制事件用于在触发所述默认上传控件的按钮时触发，将当前焦点定位至所述目标文本框中。

6.如权利要求5所述的装置，其特征在于，所述目标按钮具有显示的样式属性。

7.如权利要求5所述的装置，其特征在于，所述第一控制事件为mouseover事件；所述第二控制事件为change事件；所述第三控制事件为mousemove事件；所述第四控制事件为onclick事件。

Images