CN100421109C - 非标准上传组件及非标准上传组件多文件上传方法 - Google Patents
非标准上传组件及非标准上传组件多文件上传方法 Download PDFInfo
- Publication number
- CN100421109C CN100421109C CNB200510037522XA CN200510037522A CN100421109C CN 100421109 C CN100421109 C CN 100421109C CN B200510037522X A CNB200510037522X A CN B200510037522XA CN 200510037522 A CN200510037522 A CN 200510037522A CN 100421109 C CN100421109 C CN 100421109C
- Authority
- CN
- China
- Prior art keywords
- transmitting assembly
- file
- standard transmitting
- upload
- layer
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明涉及计算机通讯网络中的网页技术，特别涉及网页中一种非标准上传组件及非标准上传组件多文件上传方法。一种非标准上传组件，包括：一个标准上传组件，保存在页面第一个层的特定位置上；一个元素，保存在页面第二个层的对应位置上；其中，两个层相互重叠，使得所述标准上传组件位于所述元素的前端。本发明通过制造出一个非标准上传组件，使得WEB网页提供者可以通过更改所述元素来更改上传组件的外观，制作个性化的上传组件。本发明又提供了一种采用所述非标准上传组件的多文件上传方法，可以实现在只有单个上传组件接口下，多文件同时上传的方法，节省了使用者的时间，又避免了多文件上传时导致页面拥挤的现象，保证了页面的美观。
Description
[技术领域]
本发明涉及计算机通讯网络中的网页技术，特别涉及网页中一种非标准上传组件及非标准上传组件多文件上传方法。
[背景技术]
现在在网页上，只能使用传统的标准文件上传组件。标准文件上传组件是唯一可以将使用者个人电脑上的文件上传到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步)。服务器通过读取页面上的已被隐藏的标准上传组件的值，来确定将用户电脑上相应的文件保存到服务器。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的权利要求范围之内。
Claims (9)
1. 一种非标准上传组件，其特征在于包括：
一个标准上传组件，保存在页面第一个层的特定位置上；
一个元素，保存在页面第二个层的对应位置上；
其中，两个层相互重叠，使得所述标准上传组件位于所述元素的前端；
还包括上传管理模块，用于确认用户所选择的一个文件后，将当前保存在第一个层里的标准上传组件移动到另一个位置，同时创建一个新的标准上传组件，并保存在第一个层里所述特定位置上。
2. 根据权利要求1所述的非标准上传组件，起特征在于：第一个层完全透明。
3. 根据权利要求1所述的非标准上传组件，其特征在于：所述元素为网页上的文字、链接或图片。
4. 一种非标准上传组件多文件上传方法，其特征在于：
非标准上传组件包括一个保存在页面第一个层的特定位置上的标准上传组件，以及一个保存在页面第二个层的对应位置上的元素；且两个层相互重叠，使得所述标准上传组件位于所述元素的前端；
当用户利用所述非标准上传组件完成一个上传文件事件后，上传管理模块将当前保存在第一个层里的标准上传组件移动到另一个位置，同时创建一个新的标准上传组件，并保存在第一个层里所述特定位置上；
当用户选择完全部要上传的文件后，上传文件到服务器。
5. 根据权利要求4所述的非标准上传组件多文件上传方法，其特征在于：采用网页图像处理技术将第一个层透明化。
6. 根据权利要求4所述的非标准上传组件多文件上传方法，其特征在于：还包括上传文件列表，受上传管理模块控制，保存在页面上，用于将用户所选择的文件列表展示出来。
7. 根据权利要求4所述的非标准上传组件多文件上传方法，其特征在于一个上传文件事件包括步骤：
701，上传管理模块获取要上传的单个文件后，将文件添加到缓存中，并更新当前已选择要上传文件列表；
702，上传管理模块将当前保存在第一个层里的标准上传组件移动到另一个位置，同时创建一个新的标准上传组件，并保存在第一个层里所述特定位置上。
8. 根据权利要求7所述的非标准上传组件多文件上传方法，其特征在于：步骤701中，上传管理模块获取要上传的单个文件后，首先在缓存中搜索是否存在相同文件，如果没有则将文件添加到缓存中，并更新当前已选择要上传文件列表，否则通知用户该文件已经被添加。
9. 根据权利要求4所述的非标准上传组件多文件上传方法，其特征在于：当用户要对已经选择的上传文件进行删除时，上传管理模块首先将缓存中的文件删除，并更新当前已选择要上传文件列表，然后移除页面上对应的标准上传组件。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CNB200510037522XA CN100421109C (zh) | 2005-09-27 | 2005-09-27 | 非标准上传组件及非标准上传组件多文件上传方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CNB200510037522XA CN100421109C (zh) | 2005-09-27 | 2005-09-27 | 非标准上传组件及非标准上传组件多文件上传方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN1940919A CN1940919A (zh) | 2007-04-04 |
| CN100421109C true CN100421109C (zh) | 2008-09-24 |
Family
ID=37959109
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CNB200510037522XA Active CN100421109C (zh) | 2005-09-27 | 2005-09-27 | 非标准上传组件及非标准上传组件多文件上传方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN100421109C (zh) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103853416B (zh) * | 2012-11-29 | 2017-09-12 | 腾讯科技（深圳）有限公司 | 附件上传的方法及装置 |
| CN104424193B (zh) * | 2013-08-20 | 2019-04-09 | 腾讯科技（深圳）有限公司 | 一种在网页上呈现上传组件的方法及装置 |
| CN106294399B (zh) * | 2015-05-21 | 2019-07-16 | 阿里巴巴集团控股有限公司 | 多文件上传方法及装置 |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1467634A (zh) * | 2002-07-09 | 2004-01-14 | 鼎新电脑股份有限公司 | 接收触发事件时完成网页更新的系统与方法 |
-
2005
- 2005-09-27 CN CNB200510037522XA patent/CN100421109C/zh active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1467634A (zh) * | 2002-07-09 | 2004-01-14 | 鼎新电脑股份有限公司 | 接收触发事件时完成网页更新的系统与方法 |
Non-Patent Citations (4)
| Title |
|---|
| 几种软件的图层处理功能. 贺蜀山.重庆石油高等专科学校学报，第5卷第1期. 2003 |
| 几种软件的图层处理功能. 贺蜀山.重庆石油高等专科学校学报，第5卷第1期. 2003 * |
| 用Dreamweaver的层准确定位网页元素. 吴俊.软件报. 2000 |
| 用Dreamweaver的层准确定位网页元素. 吴俊.软件报. 2000 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN1940919A (zh) | 2007-04-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9971749B2 (en) | Editor for website and website menu | |
| US9361280B2 (en) | Web application theme preview based on live previews | |
| US20150339375A1 (en) | Web application for debate maps | |
| US7823086B2 (en) | Publishing protocol extensions for enhanced authoring of web pages | |
| US11599584B2 (en) | Method and system for processing information in social network system | |
| CN104221356A (zh) | 用于创建相册的应用程序 | |
| CN103412748B (zh) | 嵌入式平台的用户界面的显示控制方法、装置及系统 | |
| WO2012075284A2 (en) | A website file and data structure, website management platform and method of manufacturing customized, managed websites | |
| JP2009009519A (ja) | 情報表示装置、情報表示制御プログラム、情報表示システム、情報表示システムのサーバ制御プログラム | |
| CN104145265A (zh) | 涉及搜索和/或搜索整合的特征的系统和方法 | |
| CN101930456A (zh) | 通过浏览器创建聚合LinkUGC的方法和系统 | |
| US20090019370A1 (en) | System for controlling objects in a recursive browser system: forcefield | |
| CN100421109C (zh) | 非标准上传组件及非标准上传组件多文件上传方法 | |
| CN105608158A (zh) | 一种瀑布流式显示图片的方法和装置 | |
| US7640505B1 (en) | Element view toggling | |
| CN109074209B (zh) | 用户界面的细节窗格 | |
| Rossi et al. | User interface patterns for hypermedia applications | |
| US12002078B2 (en) | System and method for customizing photo product designs with minimal and intuitive user inputs | |
| CN103248919A (zh) | 一种iptv系统 | |
| CN103577460B (zh) | 一种上传图片的方法及系统 | |
| CN100594477C (zh) | 用于标记语言文件内的工具窗格的系统和方法 | |
| US20060095840A1 (en) | Method and system for capturing website information | |
| CN1924857B (zh) | 复杂业务驱动的多层动态页面设计方法 | |
| KR100377966B1 (ko) | 디지털 텔레비젼용 컨텐츠의 저작 시스템 및 그 방법 | |
| KR20090004230A (ko) | 사용자 제작 컨텐츠에 포함되는 화상 데이터의 편집을 위한사용자 인터페이스 제공 방법 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| C41 | Transfer of patent application or patent right or utility model | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20151221 Address after: The South Road in Guangdong province Shenzhen city Fiyta building 518057 floor 5-10 Nanshan District high tech Zone Patentee after: Shenzhen Tencent Computer System Co., Ltd. Address before: 518057, room 410, east two, SEG science and Technology Park, Zhenxing Road, Shenzhen, Guangdong Patentee before: Tencent Technology (Shenzhen) Co., Ltd. |