专利名称：非标准上传组件及非标准上传组件多文件上传方法
技术领域：
本发明涉及计算机通讯网络中的网页技术，特别涉及网页中一种非标准上传组件及非标准上传组件多文件上传方法。现在在网页上，只能使用传统的标准文件上传组件。标准文件上传组件是唯一可以将使用者个人电脑上的文件上传到WEB服务器的接口组件。
图1所示是现有标准上传组件的外观示意图，一般包括输入框和“浏览”按钮。右边的“提交”按钮不是标准上传组件的一部分，但是浏览器需要这个按钮来将文件发送给服务器。当用户在页面上点击“浏览”按钮后，就会出现图2所示文件选择框。用户选择了要上传文件后输入框中会显示被选文件路径，但是此时文件内容还没有提交到服务器，再点击“提交”按钮后，浏览器才会将被选文件内容提交到服务器。这样，需要上传多个文件时，就要反复点击“浏览”按钮和“提交”按钮，并等待浏览器上传，浪费用户时间，效率低。
在做网页时，WEB网页提供者不能控制标准上传组件的事件和属性，比如不能在程序里直接将文件的路径写入到左边的输入框里，因为这里涉及到用户电脑的安全性问题。这样，WEB网页提供者就无法个性化地定制一种标准文件上传组件的外观。同时，一个标准上传组件的模式是固定的——由两个组件组合在一起，WEB网页提供者不能改变它的外观和行为。如果需要在页面上同时上传多个文件，就需要在页面上设置相应多的标准上传组件，就会出现图3所示的页面，导致页面的拥挤，很不美观。本发明的目的在于提供一种可更改上传组件外观、美观的非标准上传组件，以及一种在单个上传组件接口下、可同时上传多个文件的非标准上传组件多文件上传方法。
本发明解决其技术问题所采用的技术方案是一种非标准上传组件，包括一个标准上传组件，保存在页面第一个层的特定位置上；一个元素，保存在页面第二个层的对应位置上；其中，两个层相互重叠，使得所述标准上传组件位于所述元素的前端。
其中，第一个层完全透明。
网页上的文字、链接，或图片等都可以作为元素。
本发明还提供了一种非标准上传组件多文件上传方法，非标准上传组件包括一个保存在页面第一个层的特定位置上的标准上传组件，以及一个保存在页面第二个层的对应位置上的元素；且两个层相互重叠，使得所述标准上传组件位于所述元素的前端；当用户利用所述非标准上传组件完成一个上传文件事件后，上传管理模块将当前保存在第一个层里的标准上传组件移动到另一个位置，同时创建一个新的标准上传组件，并保存在第一个层里所述特定位置上。
采用网页图像处理技术将第一个层透明化。
还包括上传文件列表，受上传管理模块控制，保存在页面上，用于将用户所选择的文件列表展示出来。
一个上传文件事件包括步骤701，上传管理模块获取要上传的单个文件后，将文件添加到缓存中，并更新当前已选择要上传文件列表；702，上传管理模块将当前保存在第一个层里的标准上传组件移动到另一个位置，同时创建一个新的标准上传组件，并保存在第一个层里所述特定位置上。
作为本发明的一个改进，步骤701中，上传管理模块获取要上传的单个文件后，首先在缓存中搜索是否存在相同文件，如果没有则将文件添加到缓存中，并更新当前已选择要上传文件列表，否则通知用户该文件已经被添加。
当用户要对已经选择的上传文件进行删除时，上传管理模块首先将缓存中的文件删除，并更新当前已选择要上传文件列表，然后移除页面上对应的标准上传组件。
当用户选择完全部要上传的文件后，上传所有文件到服务器。
本发明通过将存有标准上传组件的第一个层透明化，并增加存有元素的第二个层，然后将两个层叠加，制造出一个非标准上传组件，使得WEB网页提供者可以通过更改所述元素来更改上传组件的外观，制作个性化的上传组件。本发明又提供了一种采用所述非标准上传组件的多文件上传方法，可以实现在只有单个上传组件接口下，多文件同时上传的方法，节省了使用者的时间，又避免了多文件上传时导致页面拥挤的现象，保证了页面的美观。图1是现有标准上传组件的外观图。
图2是文件选择框示意图。
图3是采用标准上传组件多文件上传示意图。
图4是本发明中透明度为50％时非标准上传组件的实现效果图。
图5是本发明中透明度为80％时非标准上传组件的实现效果图。
图6是本发明非标准上传组件多文件上传的完整效果图。
图7是本发明多文件上传方法的流程图。下面根据附图和具体实施例对本发明作进一步阐述。
首先介绍非标准上传组件的制作方法WEB网页提供者先用页面上的两个层，第一个层用于保存标准上传组件，第二个层用于保存一个元素，且第一个层位于第二个层的前端。在页面初始化时，上传管理模块动态地创造一个标准上传组件，并将此组件保存在第一个层的一个特定位置上，而所述元素被保存在第二个层的相应位置上，两个层通过指定位置的属性来达到重叠，然后通过网页图像处理技术中的透明处理技术，比如Alpha Filter技术将第一个层完全透明化。这样就完成了一个非标准上传组件。图4和图5分别显示了第一个层的透明度为50％和80％时非标准上传组件的实现效果图。
在用户使用的过程中，由于保存有标准上传组件的第一个层已经被透明化，用户看到的只是一个“元素”，而不是标准上传组件。当用户点击那个“元素”时，其实点击的是第一个层里面的标准上传组件，此时会触发标准上传组件的事件，然后用户就可以选择文件进行上传了。上述元素可以是页面上的一个图片，或是一个超连接，甚至是一段文字，WEB网页提供者可自行选择定制。
为实现非标准上传组件的多文件上传，页面中还包括上传文件列表和与每个以选择上传文件对应的删除功能按钮。上述上传文件列表和删除功能按钮都受上传管理模块控制，保存在页面上。上传文件列表用于将用户所选择的文件列表展示出来，删除功能按钮用于将已经选择需要上传的文件从上传文件列表和缓存中删除。完整效果图如图6所示，可以看到第一个层被完全透明化。
首先，用户在页面上找到代表非标准上传组件的“元素”，点击添加一个要上传的文件。如图7第2步，为避免重复选择，上传管理模块读取该文件后，首先在缓存中搜索是否存在相同文件，如果没有则将文件添加到缓存中(图7第3步)，并更新上传文件列表(图7第4步)，否则通知用户该文件已经被添加。添加文件后，上传文件列表显示出该用户所选择上传的文件的路径。然后，上传管理模块将当前保存在第一个层里的标准上传组件移动到另一个位置，同时创建一个新的标准上传组件，并保存在第一个层里所述特定位置上(图7第5步)。然后用户又可以再次选择下一个需要上传的文件(图7第6步)。
这样，每当上传管理模块确认用户所选择的一个文件后，标准上传组件就会被移位，移到一个页面上看不到的地方，再动态创建一个新的标准上传组件，然后放到旧的标准上传组件的位置，也就是图4中“附件”图片上方的层里面，这样就可以实现只需一个非标准上传组件，实现多个文件选择并上传的方法。
如果用户因故需要对已经选择的上传文件进行删除，只要点击上传文件列表中该文件对应的删除功能按钮即可。上传管理模块得到删除命令后，通过搜索，确定用户需要删除哪一个被选择了的文件，然后在缓存中删除，并刷新上传文件列表。最后，在页面第一个层上移除对应的已被隐藏的标准上传组件，确保被用户删除的文件在提交时不会被服务器保存。
当用户选择完全部要上传的文件后，就可以点击提交按钮上传所有文件到服务器(图7第7步)。服务器通过读取页面上的已被隐藏的标准上传组件的值，来确定将用户电脑上相应的文件保存到服务器。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的权利要求范围之内。
权利要求
1.一种非标准上传组件，其特征在于包括一个标准上传组件，保存在页面第一个层的特定位置上；一个元素，保存在页面第二个层的对应位置上；其中，两个层相互重叠，使得所述标准上传组件位于所述元素的前端。
2.根据权利要求1所述的非标准上传组件，起特征在于第一个层完全透明。
3.根据权利要求1所述的非标准上传组件多文件上传方法，其特征在于网页上的文字、链接，或图片等都可以作为元素。
4.一种非标准上传组件多文件上传方法，其特征在于非标准上传组件包括一个保存在页面第一个层的特定位置上的标准上传组件，以及一个保存在页面第二个层的对应位置上的元素；且两个层相互重叠，使得所述标准上传组件位于所述元素的前端；当用户利用所述非标准上传组件完成一个上传文件事件后，上传管理模块将当前保存在第一个层里的标准上传组件移动到另一个位置，同时创建一个新的标准上传组件，并保存在第一个层里所述特定位置上。
5.根据权利要求4所述的非标准上传组件多文件上传方法，其特征在于采用网页图像处理技术将第一个层透明化。
6.根据权利要求4所述的非标准上传组件多文件上传方法，其特征在于还包括上传文件列表，受上传管理模块控制，保存在页面上，用于将用户所选择的文件列表展示出来。
7.根据权利要求4所述的非标准上传组件多文件上传方法，其特征在于一个上传文件事件包括步骤
701，上传管理模块获取要上传的单个文件后，将文件添加到缓存中，并更新当前已选择要上传文件列表；702，上传管理模块将当前保存在第一个层里的标准上传组件移动到另一个位置，同时创建一个新的标准上传组件，并保存在第一个层里所述特定位置上。
8.根据权利要求7所述的非标准上传组件多文件上传方法，其特征在于步骤701中，上传管理模块获取要上传的单个文件后，首先在缓存中搜索是否存在相同文件，如果没有则将文件添加到缓存中，并更新当前已选择要上传文件列表，否则通知用户该文件已经被添加。
9.根据权利要求4所述的非标准上传组件多文件上传方法，其特征在于当用户要对已经选择的上传文件进行删除时，上传管理模块首先将缓存中的文件删除，并更新当前已选择要上传文件列表，然后移除页面上对应的标准上传组件。
10.根据权利要求4所述的非标准上传组件多文件上传方法，其特征在于当用户选择完全部要上传的文件后，上传所有文件到服务器。
全文摘要
本发明涉及计算机通讯网络中的网页技术，特别涉及网页中一种非标准上传组件及非标准上传组件多文件上传方法。一种非标准上传组件，包括一个标准上传组件，保存在页面第一个层的特定位置上；一个元素，保存在页面第二个层的对应位置上；其中，两个层相互重叠，使得所述标准上传组件位于所述元素的前端。本发明通过制造出一个非标准上传组件，使得WEB网页提供者可以通过更改所述元素来更改上传组件的外观，制作个性化的上传组件。本发明又提供了一种采用所述非标准上传组件的多文件上传方法，可以实现在只有单个上传组件接口下，多文件同时上传的方法，节省了使用者的时间，又避免了多文件上传时导致页面拥挤的现象，保证了页面的美观。
文档编号H04L29/00GK1940919SQ20051003752
公开日2007年4月4日 申请日期2005年9月27日 优先权日2005年9月27日
发明者陈斌 申请人:腾讯科技(深圳)有限公司