发明内容
本发明实施例的目的是提供一种图片信息的上传方法及上传装置,能够减少图片上传的等待时间,改善用户体验。
为了实现上述目的,本发明提供了一种图片信息的上传方法,包括:
检测到网页中位于输入区域的图片输入事件;
将所述图片输入事件对应的输入图片上传到图床服务器,并获得所述输入图片在图床服务器中的链接信息;
在所述输入区域上生成并加载一包括所述输入图片的悬浮层;
检测到对输入区域内容的向应用服务器进行提交的上传事件;
将所述悬浮层的超文本标记语言信息上传到应用服务器,其中所述悬浮层的超文本标记语言信息包含所述输入图片在图床服务器中的所述链接信息。
优选地,上述的上传方法中,还包括:
在所述悬浮层生成预览图片元素,所述预览图片元素的链接地址为操作端本地地址;则
在检测到所述上传事件后,将所述预览图片元素的链接地址修改为所述链接信息并进行上传。
优选地,上述的上传方法中,在将所述悬浮层的超文本标记语言信息上传到应用服务器的步骤中,在上传前对所述超文本标记语言信息进行加密和/或编码处理。
优选地,上述的上传方法中,所述悬浮层包括多个所述输入图片,每个所述输入图片都被上传到所述图床服务器,并获得对应的链接信息。
优选地,上述的上传方法中,在所述图床服务器与本地浏览器具有匹配协议的条件下,所述图床服务器采用所述本地浏览器的客户端本地地址作为所述链接信息。
优选地,上述的上传方法中,在所述输入区域上中生成并加载一包括所述输入图片的悬浮层的步骤具体包括:
由网页浏览器提供的第一定制处理函数来生成所述悬浮层;
第二定制处理函数用对应的HTML标签标记所述输入图片的链接地址,以将所述输入图片转换为对应的HTML元素;
第三定制处理函数将所述HTML元素写入到所述悬浮层中,并显示所述图片的内容。
优选地,上述的上传方法中,所述悬浮层包括:DIV层,且该DIV层的位置参数为“相对位置”。
优选地,上述的上传方法中,在所述输入区域完成加载后生成所述悬浮层,并且通过检测所述悬浮层来获取所述图片输入事件。
优选地,上述的上传方法中,所述输入区域为文本输入框控件;所述图片输入事件为图片拖拽事件或图片粘贴事件;所述操作端本地地址为操作端剪贴板地址、操作端缓存地址或者操作端硬盘地址;所述上传事件为上传按钮触发或者所述输入区域失去焦点。
本发明还提供一种图片信息的上传装置,包括:
输入事件检测单元,其配置为:检测到网页中位于输入区域的图片输入事件;
图床单元,其配置为:将所述图片输入事件对应的输入图片上传到图床服务器,并获得所述输入图片在图床服务器中的链接信息;
悬浮层单元,其配置为:在所述输入区域上生成并加载一包括所述输入图片的悬浮层;
上传事件检测单元,其配置为:检测到对输入区域内容的向应用服务器进行提交的上传事件;
上传单元,其配置为:将所述悬浮层的超文本标记语言信息上传到应用服务器,其中所述悬浮层的超文本标记语言信息包含所述输入图片在图床服务器中的所述链接信息。
优选地,上述的上传装置中,还包括图片预览单元,其配置为:在所述悬浮层生成预览图片元素,所述预览图片元素的链接地址为操作端本地地址;
在检测到所述上传事件后,将所述预览图片元素的链接地址修改为所述链接信息。
优选地,上述的上传装置中,所述上传单元,在上传前对所述超文本标记语言信息进行加密和/或编码处理。
优选地,上述的上传装置中,所述悬浮层包括多个所述输入图片,每个所述输入图片都被上传到所述图床服务器,并获得对应的链接信息。
优选地,上述的上传装置中,在所述图床服务器与本地浏览器具有匹配协议的条件下,所述图床服务器采用所述本地浏览器的客户端本地地址作为所述链接信息。
优选地,上述的上传装置中,所述悬浮层单元,其配置为:
在所述输入区域上中生成并加载一包括所述输入图片的悬浮层的步骤具体包括:
由网页浏览器提供的第一定制处理函数来生成所述悬浮层;
第二定制处理函数用对应的HTML标签标记所述输入图片的链接地址,以将所述输入图片转换为对应的HTML元素;
第三定制处理函数将所述HTML元素写入到所述悬浮层中。
优选地,上述的上传装置中,所述悬浮层包括:DIV层,且该DIV层的位置参数为“相对位置”。
优选地,上述的上传装置中,所述悬浮层单元在所述输入区域完成加载后生成所述悬浮层,并且通过检测所述悬浮层来获取所述图片输入事件。
优选地,上述的上传装置中,所述输入区域为文本输入框控件;
所述图片输入事件为图片拖拽事件或图片粘贴事件;
所述操作端本地地址为操作端剪贴板地址、操作端缓存地址或者操作端硬盘地址;
所述上传事件为上传按钮触发或者所述输入区域失去焦点。
本发明实施例至少存在以下技术效果:
1)本发明实施例中,在检测到图片输入事件后,就立即启动图床上传,在用户完成预览决定上传时,图片已经上传了一段时间了,因此,对于用户来说其决定上传后图片可能已经上传完毕或者已经上传了大部分,大大节约了用户的等待时间,改善了用户体验。
2)本发明实施例中,通过DIV层来支持HTML数据的图片输入,可以在输入区域直接进行预览,预览图片元素的链接地址采用操作端本地地址,因此不必等待图床上传结束就可以实现立即预览,用户可以立即确认输入区域上传的图片是否正确,改善了用户体验。
3)本发明实施改变了现有的图片上传方式,用户可以通过托拽或粘贴的方式直接向输入框输入图片,不用再采用现有技术的填入路径地址的方式,所见即所输入,避免因输入路径地址方式产生的因无法预览造成的输入错误和查找不便等缺陷,又可以使得图片上传的速度增加,使得用户获得了更好地使用体验。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合附图对具体实施例进行详细描述。
图1为本发明方法实施例提供的步骤流程图,如图1所示,本发明实施例提供了一种图片信息的上传方法,包括:
步骤101,检测到网页中位于输入区域的图片输入事件;
步骤102,将所述图片输入事件对应的输入图片上传到图床服务器,并获得所述输入图片在图床服务器中的链接信息;
步骤103,在所述输入区域上生成并加载一包括所述输入图片的悬浮层;
步骤104,检测到对输入区域内容的向应用服务器进行提交的上传事件;
步骤105,将所述悬浮层的超文本标记语言信息上传到应用服务器,其中所述悬浮层的超文本标记语言信息包含所述输入图片在图床服务器中的所述链接信息。
可见,本发明实施例中,在检测到图片输入事件后,就立即启动图床上传,在用户完成预览决定上传时,图片已经上传了一段时间了,因此,对于用户来说其决定上传后图片可能已经上传完毕或者已经上传了大部分,大大节约了用户的等待时间,改善了用户体验。
在本发明的一个优选实施例中,上传方法还包括:在所述悬浮层生成预览图片元素,所述预览图片元素的链接地址为操作端本地地址;则在检测到所述上传事件后,将所述预览图片元素的链接地址修改为所述链接信息并进行上传。
可见,本发明实施例中,通过悬浮层来支持HTML数据的图片输入,可以在输入区域直接进行预览,预览图片元素的链接地址采用操作端本地地址,因此不必等待图床上传结束就可以实现立即预览,用户可以立即确认输入区域上传的图片是否正确,改善了用户体验。其中该悬浮层为DIV层。
在本发明的一个优选实施例中,在步骤105中,在上传前对所述超文本标记语言信息进行加密和/或编码处理。
在本发明的一个优选实施例中,所述悬浮层包括多个所述输入图片,每个所述输入图片都被上传到所述图床服务器,并获得对应的链接信息。因此,本发明可以支持多个图片的预览和集体上传。因为每个图片的上传都节约了等待时间,所以当多个图片上传时节约的总体时间非常可观。
在本发明的一个优选实施例中,在所述图床服务器与本地浏览器具有匹配协议的条件下,所述图床服务器采用所述本地浏览器的客户端本地地址作为所述链接信息。因此,如果图床服务器和浏览器是同一个提供商或者是合作伙伴,图床服务器可以仅作为云端,可以直接访问浏览器本地的图片地址,大大节约了图床服务器的存储空间。
在本发明的一个优选实施例中,步骤103具体包括:
由网页浏览器提供的第一定制处理函数来生成所述悬浮层;
第二定制处理函数用对应的HTML标签标记所述输入图片的链接地址,以将所述输入图片转换为对应的HTML元素;
第三定制处理函数将所述HTML元素写入到所述悬浮层中,并显示所述图片的内容。
其中,所述悬浮层包括:DIV层,且该DIV层的位置参数为“相对位置”。
在本发明的一个优选实施例中,悬浮层的加载时机可以选择,可以在输入区域的图片输入事件后加载,也可以在输入区域自身完成加载后就立即生成所述悬浮层,这时候因为悬浮层覆盖了输入区域,所以通过检测所述悬浮层来获取所述图片输入事件。
IE(Internet Explorer)开发者可以使用HTML element(网页元素)具有的Event(事件):拖拽(onDrag)、拷贝(onCopy),可以将被拖拽的元素中的内容(文本、图片、文件)存到系统剪切板中。本发明实施例在所述输入区域加入DIV层,可以将系统剪切板中的数据转化为HTML数据存入到DIV层中进行预览,支持向输入区域的直接图片拖拽和粘贴。因此本发明一个实施例中,所述输入区域为文本输入框控件;所述图片输入事件为图片拖拽事件或图片粘贴事件;所述操作端本地地址为操作端剪贴板地址、操作端缓存地址或者操作端硬盘地址;所述上传事件为上传按钮触发或者所述输入区域失去焦点。
图2为本发明上传装置实施例的结构图,如图2所示,图片信息的上传装置包括:
输入事件检测单元201,其配置为:检测到网页中位于输入区域的图片输入事件;
图床单元202,其配置为:将所述图片输入事件对应的输入图片上传到图床服务器,并获得所述输入图片在图床服务器中的链接信息;
悬浮层单元203,其配置为:在所述输入区域上生成并加载一包括所述输入图片的悬浮层;
上传事件检测单元204,其配置为:检测到对输入区域内容的向应用服务器进行提交的上传事件;
上传单元205,其配置为:将所述悬浮层的超文本标记语言信息上传到应用服务器,其中所述悬浮层的超文本标记语言信息包含所述输入图片在图床服务器中的所述链接信息。
可见,本发明装置实施例中,在检测到图片输入事件后,就立即启动图床上传,对于用户来说其决定上传时图片可能已经上传完毕或者已经上传了大部分,大大节约了用户的等待时间,改善了用户体验。
在本发明的一个优选实施例中,还包括图片预览单元206,其配置为:在所述悬浮层生成预览图片元素,所述预览图片元素的链接地址为操作端本地地址;在检测到所述上传事件后,将所述预览图片元素的链接地址修改为所述链接信息。
本发明实施例中,输入事件检测单元201、上传事件检测单元204,可以检测显示屏的浏览器区域,可以由显示屏硬件和输入交互功能单元组成。图床单元202和上传单元205可以为计算机的网络通信部件。悬浮层单元203需要计算机处理器支持,例如cpu。图片预览单元206需要显示器、显卡等硬件。因此,本发明实施例中各部件可以是硬件与相关功能单元的组合。
在优选实施例中,所述上传单元,在上传前对所述超文本标记语言信息进行加密和/或编码处理。
所述悬浮层包括多个所述输入图片,每个所述输入图片都被上传到所述图床服务器,并获得对应的链接信息。在所述图床服务器与本地浏览器具有匹配协议的条件下,所述图床服务器采用所述本地浏览器的客户端本地地址作为所述链接信息。
所述悬浮层单元,其配置为:在所述输入区域上中生成并加载一包括所述输入图片的悬浮层的步骤具体包括:由网页浏览器提供的第一定制处理函数来生成所述悬浮层;第二定制处理函数用对应的HTML标签标记所述输入图片的链接地址,以将所述输入图片转换为对应的HTML元素;第三定制处理函数将所述HTML元素写入到所述悬浮层中。
其中,所述悬浮层包括:DIV层,且该DIV层的位置参数为“相对位置”。所述悬浮层单元在所述输入区域完成加载后生成所述悬浮层,并且通过检测所述悬浮层来获取所述图片输入事件。
其中,所述输入区域为文本输入框控件;所述图片输入事件为图片拖拽事件或图片粘贴事件;所述操作端本地地址为操作端剪贴板地址、操作端缓存地址或者操作端硬盘地址;所述上传事件为上传按钮触发或者所述输入区域失去焦点。
可见,本发明提供了一种拖拽图片到输入框中,拖拽结束后即实现后台图片的上传的上传方法和上传装置,能生成图床中的URL,然后进行提交,这样提交的信息很少,也不影响图片的显示,加快了提交图片的显示。
因此,本发明改变了现有的图片上传方式,用户可以通过托拽或粘贴的方式直接向输入框输入图片,不用再采用现有技术的填入路径地址的方式,所见即所输入,避免因输入路径地址方式产生的因无法预览造成的输入错误和查找不便等缺陷,又可以使得图片上传的速度增加,使得用户获得了更好地使用体验。
在具体实现中,当网页中检测到对于图片的“ondrag”和“oncopy”的事件时,获取到被拖拽或者图片对象的文件名或者文件信息。
在ondrop事件发生在输入框控件(例如Textarea(文本区域)控件或者Input(输入)控件)时,位于输入框控件之上生成一DIV。
该过程可以通过存有代码的固件实现,可以通过功能单元实现。
该生成的DIV的主要通过以下函数获取事件:
window.external.OnPaste
window.external.OnDrop
该生成的DIV关键参数包括:
position:relative;//位置参数为相对位置
height:250px;width:250px;//尺寸
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image",//过滤属性
src="file:///c:/pics/69c99583gw1dtvfndt8adj.j pg">//连接地址
本实施例中以Textarea控件为例,其上对应生成有DIV层,其中带有生成的IMG元素,这些都是用户拖拽到textarea控件中时产生的HTML转换数据。当用户点击submi t按钮时或者在textarea控件失去焦点时,触发对上述DIV中的网页元素的BASE64加密处理和上传到应用服务器(例如Sina的数据服务器)。
其中,生成的IMG元素是以本地图片地址进行预览的,该图片可以使缓存区中的图片也可以是剪切板中的临时图片数据的地址,只是进行显示,让用户知道有这样的图片会被提交;
后台中正在进行上述图片的图床上传,该图床可以是由浏览器提供商自己维护的图床数据库,其会生成一个URL并回传给客户端(即所述的get函数获取到所述URL),该URL会在“onsubmit”或者“onblur”事件时触发,并将所述IMG中的本地地址换为所述得到的URL,并进行加密后的上传流程。
该过程可以通过存储有代码的固件实现,也可以通过功能单元实现,采用的代码中关键函数举例如下:
DragQueryFile();
StringCchPrintf();
采用的代码中关键参数举例如下:
position:relative;//位置参数为相对位置
以下是一个微博依据该方案进行图片上传的例子:需要上传的图片在本地文件中会有作为预览的小图标图片,上述小图标图片会被拖拽到上述输入框中,图片会依据登录浏览器用户进行对应的图床上传和URL获取。
可见,本发明可以支持对于图片发布过程中的图片上传过程分为两部分,一部分进行预览,一部分在后台于ondrop事件后即开始进行图床的上传和URL的获取,为点击Submit之后的提交节约时间。依据本方案,上传的图片越多(即拖拽的图片越多),用户所花费的时间相对越少,提高了用户体验。
上述本发明实施例中的方法、装置适用于各种网络或者客户端环境中,例如可以实现在诸如个人计算机设备之类的计算机设备中,或者可以实现在诸如移动电话、移动通信设备、个人数字助理(PDA)等其他便携式电子设备或者非便携式电子设备中。因此本领域技术人员要明确的是,本发明的保护范围并不限于PC上运行浏览器中的图片上传功能和图片拖拽功能,仅是出于描述的简洁和方便而在本发明实施例中采用了PC上运行浏览器中的图片上传功能和图片拖拽功能进行描述。
由上可知,本发明实施例具有以下优势:
1)本发明实施例中,在检测到图片输入事件后,就立即启动图床上传,在用户完成预览决定上传时,图片已经上传了一段时间了,因此,对于用户来说其决定上传后图片可能已经上传完毕或者已经上传了大部分,大大节约了用户的等待时间,改善了用户体验。
2)本发明实施例中,通过DIV层来支持HTML数据的图片输入,可以在输入区域直接进行预览,预览图片元素的链接地址采用操作端本地地址,因此不必等待图床上传结束就可以实现立即预览,用户可以立即确认输入区域上传的图片是否正确,改善了用户体验。
3)本发明实施改变了现有的图片上传方式,用户可以通过托拽或粘贴的方式直接向输入框输入图片,不用再采用现有技术的填入路径地址的方式,所见即所输入,避免因输入路径地址方式产生的因无法预览造成的输入错误和查找不便等缺陷,又可以使得图片上传的速度增加,使得用户获得了更好地使用体验。
以上所述仅是本发明的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本发明原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本发明的保护范围。