CN106953925A - 一种图片数据上传方法和系统 - Google Patents

Abstract

本申请提供一种图片数据上传方法和系统。第一页面上创建有一框架，所述框架的src属性中规定了第二页面的地址，方法包括：当第一页面接收到需要上传图片的上传请求时，第一页面依据框架的src属性中规定的第二页面的地址，调取出第二页面；第二页面接收待上传图片，并对待上传图片进行验证；当第二页面验证待上传图片合法后，第二页面将待上传图片上传至服务器；第一页面接收服务器返回的待上传图片的存储地址信息；第一页面接收用户输入的图片相关信息；当第一页面接收到确认上传请求时，第一页面将图片相关信息和服务器返回的待上传图片的存储地址信息一同上传至服务器。本申请避免了图片相关信息的重复输入且提高了页面的反应效率。

Description

一种图片数据上传方法和系统

技术领域

本申请涉及图片上传技术领域，尤其涉及一种图片数据上传方法和系统。

背景技术

图片数据包括图片和图片相关信息，其中图片相关信息包括图片的描述内容、用户信息(如用户名，邮箱信息)等。

目前现有的图片数据上传方法或是利用HTML(HyperText Markup Language，超文本标记语言)自带的上传控件提交表单，并在刷新页面后触发提交请求，完成上传，或是利用FLASH控件直接实现图片数据的异步上传。

然而本申请的申请人发现，利用HTML自带的上传控件完成图片数据上传的过程中，只有当表单提交的时候才会验证图片的类型、安全性等，而如果图片验证失败，页面要求重新上传图片的同时，还会将用户之前填写的图片相关信息也清空，那么用户再次上传图片数据时，不仅需要重新加载图片，还需要重新填写图片相关信息，这无疑降低了用户的使用体验。

而利用FLASH控件直接异步上传图片数据时，FLASH加载会使得页面整体加载变慢，效率较低。

发明内容

有鉴于此，本申请提供一种图片数据上传方法和系统，以解决现有技术中利用HTML自带的上传控件完成图片数据上传的方法，用户的使用体验度较低，利用FLASH控件直接异步上传图片数据的方法，使得页面整体加载变慢，效率较低的问题。

基于本申请的一方面，本申请提供一种图片数据上传方法，应用于第一页面，所述第一页面上创建有一框架，所述框架的src属性中规定了第二页面的地址；所述方法包括：

当所述第一页面接收到需要上传图片的上传请求时，所述第一页面依据所述框架的src属性中规定的第二页面的地址，调取出所述第二页面；其中所述上传请求包括待上传图片；

所述第二页面接收所述待上传图片，并对所述待上传图片进行验证；

当所述第二页面验证所述待上传图片合法后，所述第二页面将所述待上传图片上传至服务器；

所述第一页面接收所述服务器返回的所述待上传图片的存储地址信息；

所述第一页面接收用户输入的图片相关信息；

当所述第一页面接收到确认上传请求时，所述第一页面将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器。

优选地，所述方法还包括：

所述第一页面依据接收到的所述服务器返回的所述待上传图片的存储地址信息，获取并显示所述待上传图片。

优选地，当所述第一页面接收到确认上传请求时，所述第一页面将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器之前还包括：

所述第一页面依据所述服务器返回的所述待上传图片的存储地址信息，获取所述待上传图片；

所述第一页面对所述待上传图片进行再次验证；

当所述待上传图片再次验证合法时，再执行将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器的步骤。

优选地，所述框架的属性为隐藏属性。

优选地，所述对所述待上传图片进行验证包括：对所述待上传图片的格式、类型、和/或安全性进行验证。

基于本申请的另一方面，本申请提供一种图片数据上传系统，包括第一页面和第二页面；其中，所述第一页面上创建有一框架，所述框架的src属性中规定了第二页面的地址；

所述第一页面在接收到需要上传图片的上传请求时，依据所述框架的src属性中规定的第二页面的地址，调取出所述第二页面；其中所述上传请求包括待上传图片；

所述第二页面接收所述待上传图片，并对所述待上传图片进行验证；

当所述第二页面验证所述待上传图片合法后，所述第二页面将所述待上传图片上传至服务器；

所述第一页面接收所述服务器返回的所述待上传图片的存储地址信息；

所述第一页面接收用户输入的图片相关信息；

当所述第一页面接收到确认上传请求时，将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器。

优选地，所述第一页面还用于，依据接收到的所述服务器返回的所述待上传图片的存储地址信息，获取并显示所述待上传图片。

优选地，所述第一页面还用于，依据所述服务器返回的所述待上传图片的存储地址信息，获取所述待上传图片；对所述待上传图片进行再次验证；

其中当所述待上传图片再次验证合法时，所述第一页面将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器。

优选地，所述框架的属性为隐藏属性。

优选地，所述对所述待上传图片进行验证包括：对所述待上传图片的格式、类型、和/或安全性进行验证。

本申请提供的图片数据上传方法和系统中，第一页面上创建有一框架，所述框架的src属性中规定了第二页面的地址。当第一页面接收到需要上传图片的上传请求时，第一页面依据所述框架的src属性中规定的第二页面的地址，调取出所述第二页面，由所述第二页面接收待上传图片，并对所述待上传图片进行验证。当所述第二页面验证所述待上传图片合法后，将所述待上传图片上传至服务器。第一页面接收所述服务器返回的所述待上传图片的存储地址信息，以及接收用户输入的图片相关信息。当第一页面接收到确认上传请求时，第一页面将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器。

本申请中图片上传、图片合法性验证由第二页面完成，图片相关信息的输入在第一页面中完成，因此本申请将对图片上传、验证的处理和对图片相关信息的输入分别利用两个不同的页面来实现，那么即使在第二页面中图片的合法性验证失败时，也不会影响到第一页面中输入的图片相关信息，避免了图片相关信息的重复输入。且本申请将第一页面上创建的框架代替FLASH，不会影响页面的加载效率，提高了页面的反应效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本申请提供的一种图片数据上传方法的流程图；

图2为本申请提供的一种图片数据上传系统的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1，其示出本申请提供的一种图片数据上传方法的流程图，包括：

步骤101，当第一页面接收到需要上传图片的上传请求时，第一页面依据框架的src属性中规定的第二页面的地址，调取出第二页面。其中所述上传请求包括待上传图片。

本申请中，第一页面上创建有一框架，该框架的src属性中规定了第二页面的地址。优选地，本申请中框架的属性为隐藏属性，那么在本申请实际应用时，该框架在第一页面中隐藏起来，对用户不可见，优化了用户的感官体验。

步骤102，第二页面接收所述待上传图片，并对所述待上传图片进行验证。

在实际应用过程中，当用户需要上传图片数据时，用户会在第一页面中触发上传图片的上传请求，所述上传请求包括待上传图片。现有技术中第一页面会直接接收该上传请求，并获取加载所述待上传图片。当用户在第一页面中完成图片相关信息的输入后，第一页面将所述待上传图片和接收到的图片相关信息一同进行上传。然而在触发上传后，如果所述待上传图片的合法性验证失败，则页面会要求重新上传所述待上传图片，并同时将用户之前输入的图片相关信息清空，那么用户再次上传图片数据时，需要用户重新输入图片相关信息，这无疑降低了用户的使用体验。本申请不同于现有技术，本申请中第一页面接收到需要上传图片的上传请求时，并不响应该上传请求，而是依据该第一页面上创建的框架的src属性中规定的第二页面的地址，调取出不同于第一页面的第二页面，由第二页面响应该上传请求。

第二页面从该上传请求中接收并获取所述待上传图片，并对所述待上传图片进行验证。具体的，第二页面可以依据预设规则，对所述待上传图片的格式、类型、和/或安全性进行合法性验证。其中预设规则可根据不同页面的上传要求、或上传目的地的上传要求等进行设置。

步骤103，当第二页面验证所述待上传图片合法后，第二页面将所述待上传图片上传至服务器。

本申请中，第二页面验证所述待上传图片合法后，便直接将所述待上传图片上传至服务器。

此外作为本申请的一个优选实施例，当第二页面验证所述待上传图片不合法时，可以在第一页面、和/或第二页面中弹出提示消息，以通知用户当前待上传图片不合法。更具体地，该提示消息中还可以包括当前待上传图片不合法的原因，如图片类型不符等。

步骤104，第一页面接收所述服务器返回的所述待上传图片的存储地址信息。

服务器接收到由第二页面上传的所述待上传图片后，将所述待上传图片存储，并为所述待上传图片分配一存储地址信息，该存储地址信息用于指示所述待上传图片在服务器中的具体存储位置。一般的，该存储地址信息可以为url地址。

服务器为所述待上传图片分配一url地址后，将该url地址返回给第一页面，此时第一页面接收所述url地址。

步骤105，第一页面接收用户输入的图片相关信息。

本申请中，用户直接在第一页面中输入图片相关信息，此时第一页面接收到用户输入的图片相关信息。

本申请中，图片相关信息的输入在第一页面中完成。

在此申请人需要说明的是，本申请对于步骤105与前述步骤102-104的执行顺序不做限定。由于本申请中步骤105是由第一页面实现图片相关信息的输入，步骤102-104是由第二页面实现图片的验证、上传，而本申请中第一页面的处理操作与第二页面的处理操作并无太大关联，因此，本申请步骤105可以先于步骤102-104执行，也可与步骤102-104同时执行。

步骤106，当所述第一页面接收到确认上传请求时，所述第一页面将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器。

当用户完成图片相关信息的输入，并上传图片成功后，在第一页面触发确认上传请求，以将图片和图片相关信息一同上传至服务器。此时，第一页面会接收到该确认上传请求，进而第一页面将图片相关信息和服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器。

因此，应用本申请提供的上述技术方案，本申请中图片上传、图片合法性验证由第二页面完成，图片相关信息的输入在第一页面中完成，本申请将对图片上传、验证的处理和对图片相关信息的输入分别利用两个不同的页面来实现，那么即使在第二页面中图片的合法性验证失败时，也不会影响到第一页面中输入的图片相关信息，避免了图片相关信息的重复输入。且本申请将第一页面上创建的框架代替FLASH，不会影响页面的加载效率，提高了页面的反应效率。

在上述实施例的基础上，在步骤104，第一页面接收所述服务器返回的所述待上传图片的存储地址信息之后，所述方法还包括：

步骤107，第一页面依据接收到的所述服务器返回的所述待上传图片的存储地址信息，获取并显示所述待上传图片。

在本申请实施例中，第一页面接收到服务器返回的所述待上传图片的url 地址后，第一页面可以依据该url地址获取所述待上传图片，并显示所述待上传图片，本申请实现了在上传图片数据时，显示图片的效果。

在上述实施例的基础上，当第一页面接收到确认上传请求时，步骤106，第一页面将图片相关信息和服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器之前，所述方法还包括：

步骤108，依据所述服务器返回的所述待上传图片的存储地址信息，获取所述待上传图片。

步骤109，对所述待上传图片进行再次验证。

当步骤109对所述待上传图片再次验证合法时，再执行步骤106。

为了进一步提高图片上传的合法性，本申请中第一页面在接收到确认上传请求时，第一页面可以依据服务器返回的所述待上传图片的存储地址信息，获取所述待上传图片，并对所述待上传图片进行二次验证。当第一页面二次验证所述待上传图片合法时，再将图片相关信息和服务器返回的所述待上传图片的存储地址信息一同上传至服务器，保证了上传的图片数据的准确性、合法性。

基于前文本申请提供的一种图片数据上传方法，本申请还提供一种图片数据上传系统，如图2所示，包括第一页面100和第二页面200；其中，所述第一页面100上创建有一框架110，所述框架110的src属性中规定了第二页面200的地址；

所述第一页面100在接收到需要上传图片的上传请求时，依据所述框架110的src属性中规定的第二页面200的地址，调取出所述第二页面200；其中所述上传请求包括待上传图片；

所述第二页面200接收所述待上传图片，并对所述待上传图片进行验证；

当所述第二页面200验证所述待上传图片合法后，所述第二页面200将所述待上传图片上传至服务器300；

所述第一页面100接收所述服务器300返回的所述待上传图片的存储地址信息；

所述第一页面100接收用户输入的图片相关信息；

当所述第一页面100接收到确认上传请求时，将所述图片相关信息和所述服务器300返回的所述待上传图片的存储地址信息一同上传至所述服务器300。

其中优选的，所述第一页面100还用于，依据接收到的所述服务器300返回的所述待上传图片的存储地址信息，获取并显示所述待上传图片。

进一步优选的，所述第一页面100还用于，依据所述服务器300返回的所述待上传图片的存储地址信息，获取所述待上传图片；对所述待上传图片进行再次验证；其中当所述待上传图片再次验证合法时，所述第一页面100将所述图片相关信息和所述服务器300返回的所述待上传图片的存储地址信息一同上传至所述服务器300。

本申请中，所述框架110的属性为隐藏属性。

所述对所述待上传图片进行验证包括：对所述待上传图片的格式、类型、和/或安全性进行验证。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

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

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

Claims (10)

1.一种图片数据上传方法，应用于第一页面，其特征在于，所述第一页面上创建有一框架，所述框架的src属性中规定了第二页面的地址；所述方法包括：

当所述第一页面接收到需要上传图片的上传请求时，所述第一页面依据所述框架的src属性中规定的第二页面的地址，调取出所述第二页面；其中所述上传请求包括待上传图片；

所述第二页面接收所述待上传图片，并对所述待上传图片进行验证；

当所述第二页面验证所述待上传图片合法后，所述第二页面将所述待上传图片上传至服务器；

所述第一页面接收所述服务器返回的所述待上传图片的存储地址信息；

所述第一页面接收用户输入的图片相关信息；

当所述第一页面接收到确认上传请求时，所述第一页面将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

所述第一页面依据接收到的所述服务器返回的所述待上传图片的存储地址信息，获取并显示所述待上传图片。

3.根据权利要求1或2所述的方法，其特征在于，当所述第一页面接收到确认上传请求时，所述第一页面将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器之前还包括：

所述第一页面依据所述服务器返回的所述待上传图片的存储地址信息，获取所述待上传图片；

所述第一页面对所述待上传图片进行再次验证；

当所述待上传图片再次验证合法时，再执行将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器的步骤。

4.根据权利要求1所述的方法，其特征在于，所述框架的属性为隐藏属性。

5.根据权利要求1所述的方法，其特征在于，所述对所述待上传图片进行验证包括：对所述待上传图片的格式、类型、和/或安全性进行验证。

6.一种图片数据上传系统，其特征在于，包括第一页面和第二页面；其中，所述第一页面上创建有一框架，所述框架的src属性中规定了第二页面的地址；

所述第一页面在接收到需要上传图片的上传请求时，依据所述框架的src属性中规定的第二页面的地址，调取出所述第二页面；其中所述上传请求包括待上传图片；

所述第二页面接收所述待上传图片，并对所述待上传图片进行验证；

当所述第二页面验证所述待上传图片合法后，所述第二页面将所述待上传图片上传至服务器；

所述第一页面接收所述服务器返回的所述待上传图片的存储地址信息；

所述第一页面接收用户输入的图片相关信息；

当所述第一页面接收到确认上传请求时，将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器。

7.根据权利要求6所述的系统，其特征在于，所述第一页面还用于，依据接收到的所述服务器返回的所述待上传图片的存储地址信息，获取并显示所述待上传图片。

8.根据权利要求6或7所述的系统，其特征在于，所述第一页面还用于，依据所述服务器返回的所述待上传图片的存储地址信息，获取所述待上传图片；对所述待上传图片进行再次验证；

其中当所述待上传图片再次验证合法时，所述第一页面将所述图片相关信息和所述服务器返回的所述待上传图片的存储地址信息一同上传至所述服务器。

9.根据权利要求6所述的系统，其特征在于，所述框架的属性为隐藏属性。

10.根据权利要求6所述的系统，其特征在于，所述对所述待上传图片进行验证包括：对所述待上传图片的格式、类型、和/或安全性进行验证。