一种带图片网页数据上传的方法和系统的制作方法
【专利摘要】本发明提供一种带图片网页数据提交的方法，包括如下步骤：（1）用户选择好相关的图片后，触发图片数据提交事件，并将该图片信息上传服务器并存储到数据库的一个图片临时表中；（2）用户在同一个页面输入相应的文字信息后，点击一个提交按钮以触发页面总体提交，并将该文字信息上传服务器并存储到数据库的一个文字临时表中；（3）汇总步骤（1）提交的图片信息和步骤（2）提交的文字信息，创建一条新记录，作为一个新记录存储到相应的表中；所述的图片或文字临时表，至少包括一个用户唯一码标识、图片存储信息等内容。本发明实现同一页面下文字与图片的分别提交，同时能有效防止无效记录的产生，增进计算机的主机装置的使用效率。
【专利说明】一种带图片网页数据上传的方法和系统
【技术领域】
[0001]本发明涉及用计算机处理技术，特别是涉及一种带图片数据上传的方法及系统。
[0002]
【背景技术】
[0003]随着计算机网络的快速发展，越来越多的图片或数据经由网络传输；例如网页进行内容发布。特别地，对于形如电子商务等领域来说，考虑的不仅仅是如何把这些商务信息广告出去，更需要增加这些广告的直观性、趣味性等来吸引眼球，以进一步促进销量和聚集人气，所以用于进行内容发布的网页通常需要图文并茂，生动有趣。
[0004]而Html中，包括图片在内的文件上传，一般通过表单元素〈input type = file来实现。参见图1和图2，通过使用这个元素，浏览器会自动生成一个输入框和一个按钮，输入框可供用户填写本地的文件名和路径名，按钮可以让浏览器打开一个文件选择框供用户选择文件，然后再点击一个上传按钮后将文件上传服务器。同理，在.net环境，可以通过服务器控件<asp:FileUpload实现文件的上传。
[0005]然而，上述的提交方式存在提交范围限定为整个页面内的全部输入区域的情况，而某些应用会希望实现图片与文字的分别上传。解决的方法有，一是采用两个页面进行内容发布，第一个页面负责文字发布，完成后进入第二步的图片上传。但是这种方法比较繁杂，用户体验感不好；二是采用在同一个页面分别提交的方法，即允许先提交图片部分，并在相应的数据库添加一条记录，然后提交文字部分进行记录补齐。这种方法存在一点不足，即当提交图片部分后，可能由于重新提交新图片或文字部分没有及时提交，造成后台数据库产生一条无效的记录，从而影响数据库的使用效率。
[0006]再如，中国专利申请号为2012101284016公开的“网页数据提交方法和装置”它涉及网页页面被设置为两个以上的提交区域，该方法包括:当检测到区域提交标签包含的区域提交事件被触发时，获取区域提交标签包含的一个或一个以上区域标识，区域标识用于表示用户选择的提交区域；根据区域标识，获取区域标识对应的提交区域的页面数据；向服务器发送获取到的页面数据。从而无需提交整个网页页面数据，而只是提交了区域标识对应的提交区域的页面数据，进一步地提高了网页开发者的开发自由度。但是，该发明存在有以下的不足:1)没有考虑.net环境下服务器控件〈aSp:FileUpl0ad在选择上传图片时的自触发功能，这时专门的区域设置已没有必要；2)同一区域重提交或没有及时提交时，该专利会造成的后台数据库产生一条无效记录。
[0007]
【发明内容】
[0008]本发明的目的是提供一种带图片网页数据提交的方法，实现同一页面下文字与图片的分别提交，同时能有效防止无效记录的产生，增进计算机的主机装置的使用效率。
[0009]实现上述目的，本发明采用如下技术方案:一种带图片网页数据提交的方法，其特征在于，包括如下步骤:
(1)用户选择好相关的图片后，触发图片数据提交事件，并将该图片信息上传服务器并存储到数据库的一个图片临时表中；
(2)用户在同一个页面输入相应的文字信息后，点击一个提交按钮以触发页面总体提交，并将该文字信息上传服务器并存储到数据库的一个文字临时表中；
(3)汇总步骤(I)提交的图片信息和步骤(2)提交的文字信息，创建一条新记录，作为一个新记录存储到相应的表中；
所述的图片或文字临时表，至少包括一个用户唯一码标识、图片存储信息等内容。
[0010]进一步，所述的数据提交可以在浏览器端进行有效校验，包括图片格式、大小、文字长度等校验。
[0011]本发明还提供一种网页数据提交的系统，其特征在于，包括依次通信连接的数据获取模块、数据校验模块、数据发送模块、图片数据存储模块和数据汇总存储模块；
数据获取模块，用于检测各数据提交事件被触发时，获取相应提交数据的网面数据； 数据校验模块，用于校验上传数据的格式、大小、长度等是否满足事先约定的要求； 数据发送模块，用于向服务器发送获取到的页面数据；
图片数据存储模块，用于将上传的图片信息存储到一个临时表中；
数据汇总存储模块，用于汇总提交的文字信息，以及数据库中图片临时表中的图片信息，并作为一个新记录存储到相应的表中。
[0012]相比现有技术，本发明具有如下有益效果:
本发明充分利用现有的图像上传控件，实现同一页面下文字与图片的分别提交，避免不必要的翻页操作；同时运用临时表存储数据技术，能有效防止无效记录的产生，从而增进计算机的主机装置的使用效率，提高网页开发人员的自由度，最大程度地方便用户的操作体验。
[0013]本发明所述网页数据提交的系统，功能强大，已应用一些电子商务后台管理领域，取得了预期的效果。
[0014]【专利附图】
【附图说明】
[0015]图1为现有技术的aspx代码示意图；
图2为图1的aspx代码在浏览器显示页面效果示意图；
图3是本发明一个实施例提供的带图片网页数据提交的流程图；
图4是本发明一个实施例提供的带图片网页数据提交的装置结构示意图。
[0016]【具体实施方式】
[0017]为了更清楚地说明本发明技术方案，下面以C#程序为例，结合附图和实施对本发明作进一步详细说明。本发明涉及的带图片网页数据提交的方法，通过在计算机上运行的软件形式来实现。
[0018]参见图3，一种带图片网页数据提交的方法，该方法包括:当用户选择好相关的图片后，自动触发图片数据提交事件，并将该图片信息上传服务器并存储到数据库的一个临时表中；当用户在同一个页面输入相应的文字信息后，点击一个提交按钮以触发页面总体提交；然后汇总提交的文字信息，以及数据库中图片临时表中的图片信息，作为一个新记录存储到相应的表中。
[0019]上述的图片临时表，至少可包括一个用户唯一码标识，图片存储信息等内容。
[0020]上述的数据提交可以在浏览器端进行有效校验，包括图片格式、大小、文字长度等校验。
[0021]这里的用户可以是网页开发者，也可以是普通的终端用户。上述网页数据提交的装置可以包括台式计算机，笔记本，手机，PDA，平台电脑，电子书等。
[0022]参见图4，一种网页数据提交的系统，包括依次通信连接的数据获取模块、数据校验模块、数据发送模块、图片数据存储模块和数据汇总存储模块；
数据获取模块，用于检测各数据提交事件被触发时，获取相应提交数据的网面数据； 数据校验模块，用于校验上传数据的格式、大小、长度等是否满足事先约定的要求； 数据发送模块，用于向服务器发送获取到的页面数据；
图片数据存储模块，用于将上传的图片信息存储到一个临时表中；
数据汇总存储模块，用于汇总提交的文字信息，以及数据库中图片临时表中的图片信息，并作为一个新记录存储到相应的表中。
[0023]在本发明的各个实施例中，对网页中的需要进行数据提交的范围，自动区分为文字和图片提交两个部分，分别进行处理。
[0024]一、图片上传的过程:
例如，可以通过服务器控件<asp:FileUpload控制图片的上传处理,或者通过把html控件〈input type = file设置为服务器控件实现图片上传。其步骤如下:
1、通过控件〈asp:FileUpload或〈input type = file runat=’’ server” 右边的浏览按钮，选择需要上传的图片，当控件判断框内发生变化时，触发onChange事件，从而调用javascript 内的事件处理函数 CheckFileTypeIphone O ；
2、图片上传触发及校验:
函数CheckFileTypeIphone O有两个功能:
(1)校验功能，即校验选择的文件是否是所需要的图片格式，大小是否符合要求等；
(2)通过javascript 代码:document.getElementByld(’btnUpdateTelPic’
).click O ,从而触发隐藏按钮btnUpdatelphonePic的OnClick事件，并由后台btnUpdateIphonePic_Click事件处理图片的提交事宜。
[0025]3、图片的上传及临时存储:
后台btnUpdateIphonePic_Click()事件也有两个功能:
(I)上传图片。可以将图片转化为二进制存储到临时表中，或者直接将图片上传到服务器的指定目录下，并将路径等信息存储到数据库中，以保证用户通过这些信息可能正确获取上传的图片。
[0026](2)存储图片信息。首先，创建一个图片临时存储表，其中至少包括唯一标识，图片信息，其中如果是二进制存储，可以采用Image类型字段；如果图片直接存储到服务器的，可以采用varchar类型存储图片在服务器中的路径。一般地，标识可以采用登陆UserID来区分，主要是考虑到每个登陆用户在给定的时间只能上传一张图片。然后，将上传图片的信息存储到这个临时表中，这样保证每个在线用户只能在临时表中保存一张图片。
[0027]二、文字信息上传及汇总:
1、信息录入及提交。参见图2，在标题或简介域中录入相关的信息。录入完成后，点击按钮 btnSubmit,触发 OnClick 事件 btnSubmit_Click O。
[0028]2、数据校验。可以在后台的Page_Load事件中添加以下的代码: btnSubmit.Attributes.Add(〃onclick〃，〃return confirm() ;,r)
于是，后台处理OnClick事件btnSubmit_Click O之前，需要在客户端调用一段Javascript函数confirmO ,以进行数据校验，如判断数据是否为空，长度是否符合要求，电话号码格式，Email格式，数字格式，货币格式、时间格式等。完成后，执行后台btnSubmit_Click O 事件。
[0029]3、数据提交及汇总存储。执行后台btnSubmit_Click()事件，通过关联登陆UserID方式，采用Sql方式，汇总图片临时表的图片信息，将网页中的图片及文字信息作为一条新记录Insert到相关表中。
[0030]实施例中所述的校验，可以采用客户端校验方式，或服务器终校验方式。
[0031]实施例中所述的图片上传，可以是单个图片上传，也可以是多个图片上传。只是当多个图片上传时，可按照单个图片上传方式，做相似的处理。
[0032]以上所述仅为本发明的较佳实施例而已，并不用以限制本发明。本发明可以用于电子商务领域团购等信息的发布，也可应用在其它领域，只要在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
【权利要求】
1.一种带图片网页数据提交的方法，其特征在于，包括如下步骤: (1)用户选择好相关的图片后，触发图片数据提交事件，并将该图片信息上传服务器并存储到数据库的一个图片临时表中； (2)用户在同一个页面输入相应的文字信息后，点击一个提交按钮以触发页面总体提交，并将该文字信息上传服务器并存储到数据库的一个文字临时表中； (3)汇总步骤(I)提交的图片信息和步骤(2)提交的文字信息，创建一条新记录，作为一个新记录存储到相应的表中； 所述的图片或文字临时表，至少包括一个用户唯一码标识、图片存储信息等内容。
2.根据权利要求1所述带图片网页数据提交的方法，其特征在于，所述的数据提交可以在浏览器端进行有效校验，包括图片格式、大小、文字长度等校验。
3.—种网页数据提交的系统，其特征在于，包括依次通信连接的数据获取模块、数据校验模块、数据发送模块、图片数据存储模块和数据汇总存储模块； 数据获取模块，用于检测各数据提交事件被触发时，获取相应提交数据的网面数据； 数据校验模块，用于校验上传数据的格式、大小、长度等是否满足事先约定的要求； 数据发送模块，用于向服务器发送获取到的页面数据； 图片数据存储模块，用于将上传的图片信息存储到一个临时表中； 数据汇总存储模块，用于汇总提交的文字信息，以及数据库中图片临时表中的图片信息，并作为一个新记录存储到相应的表中。
【文档编号】H04L29/08GK103617043SQ201310658134
【公开日】2014年3月5日 申请日期:2013年12月9日 优先权日:2013年12月9日
【发明者】陈金玉 申请人:重庆大学