CN105868195A - 图片上传方法及装置 - Google Patents

Abstract

本申请提供一种图片上传方法及装置，包括：调用对***剪贴板的事件监听功能；当检测到发生于网页中的预留区域内的粘贴操作时，获取所述***剪贴板内的最近缓存图片，并粘贴至所述预留区域；当图片上传功能被触发时，将所述最近缓存图片上传至服务器。通过本申请的技术方案，可以简化图片上传过程。

Description

图片上传方法及装置

技术领域

本申请涉及互联网技术领域，尤其涉及图片上传方法及装置。

背景技术

在网页浏览的过程中，尤其是社交网页或论坛等类型，往往需要注册并登录相应的用户账号，则用户对账号的资料完善过程中，若希望设置个性化的头像，就需要将头像图片上传至服务器中。当然，除了用户账号的头像上传场景，其他比如发布帖文、社交消息等很多场景也需要上传图片。

发明内容

有鉴于此，本申请提供一种图片上传方法及装置，可以解决相关技术中的不足。

为实现上述目的，本申请提供技术方案如下：

根据本申请的第一方面，提出了一种图片上传方法，包括：

调用对***剪贴板的事件监听功能；

当检测到发生于网页中的预留区域内的粘贴操作时，获取所述***剪贴板内的最近缓存图片，并粘贴至所述预留区域；

当图片上传功能被触发时，将所述最近缓存图片上传至服务器。

根据本申请的第二方面，提出了一种图片上传装置，包括：

调用单元，调用对***剪贴板的事件监听功能；

粘贴单元，当检测到发生于网页中的预留区域内的粘贴操作时，获取所述***剪贴板内的最近缓存图片，并粘贴至所述预留区域；

上传单元，当图片上传功能被触发时，将所述最近缓存图片上传至服务器。

由以上技术方案可见，本申请通过调用对***剪贴板的事件监听功能，可以将用户对图片的复制(或剪切、裁剪等)和粘贴作为对图片的选取操作，有助于简化图片的上传过程，提升操作效率。

附图说明

图1是相关技术中的图片上传方法的流程图；

图2A-2D是相关技术中的上传图片的界面示意图；

图3示出了根据本申请一示例性实施例的一种图片上传方法的流程图；

图4示出了根据本申请一示例性实施例的另一种图片上传方法的流程图；

图5-8示出了根据本申请一示例性实施例的上传图片的界面示意图；

图9示出了根据本申请一示例性实施例的一种电子设备的结构示意图；

图10示出了根据本申请一示例性实施例的一种图片上传装置的框图。

具体实施方式

图1是相关技术中的图片上传方法的流程图，如图1所示，该图片上传方法包括：

步骤102，将图片存储至终端本地。

在该步骤中，出于对安全性的考虑，相关技术中要求执行上传操作的图片必须为本地资源，因而用户若希望将任一网页上的图片作为上传图片，必须首先将该图片下载并存储在终端本地，即网络资源转换为本地资源后，才能够执行上传操作。当然，对于终端本地的原有图片资源，可以省去步骤102。

步骤104，选择待上传图片。

在该步骤中，网页上会提供如图2A所示的控件，则用户可以通过点击“选择文件”(或其他触发方式)，在网页上调出图2B所示的图片选择界面，并选择希望上传的图片(即待上传图片)。比如图2B所示，在当前路径下包括图片“1.JPG”、“2.JPG”和“3.JPG”等文件，则用户可以通过点击所需要的图片文件，以作为待上传图片，比如待上传图片可以为“1.JPG”。

步骤106，浏览器读取被选图片的标签。

在该步骤中，被选图片即步骤104中被选中的待上传图片，比如上述的图片“1.JPG”，而图片标签可以包括文件类型、数据、文件名等信息。

步骤108，将被选图片提交至服务器。

在该步骤中，用户可以通过点击图2C所示的“提交”按钮，触发浏览器对图片“1.JPG”的上传操作。具体地，浏览器针对图片“1.JPG”创建一个FileUpload(文件上传)对象，并在“提交”按钮被触发后，利用步骤106获取的图片标签对该FileUpload对象进行属性填充，然后由浏览器通过如post请求将该数据提交至服务器。

步骤110，接收服务器返回数据，比如上传状态消息、图片预览页面数据等。

步骤112，生成预览页面。

在该步骤中，比如图2D示出了对图片“1.JPG”的预览页面，以便于用户查看到图片上传效果。

基于上述操作过程，用户虽然能够完成对图片的上传操作，但图片资源被限制为本地资源，若为网络资源则需要预先下载并存储至本地；同时，图片选择过程不便，用户只能够在图2B所示的界面内查看图片名称等信息，容易导致误操作，而用户若希望查看图片内容，则需要另外单独查看，过程十分繁琐。

因此，本申请为了解决相关技术中的不足，提出了用于简化图片上传过程的技术方案；为对本申请进行进一步说明，提供下列实施例：

图3示出了根据本申请一示例性实施例的一种图片上传方法的流程图，如图3所示，该方法应用于终端，可以包括以下步骤：

步骤302，调用对***剪贴板的事件监听功能。

在本实施例中，可以通过调用浏览器中预设的对***剪贴板的事件监听功能的API(Application Program Interface，应用程序编程接口)，获得对***剪贴板的事件监听功能。

步骤304，当检测到发生于网页中的预留区域内的粘贴操作时，获取所述***剪贴板内的最近缓存图片，并粘贴至所述预留区域。

在本实施例中，针对最近缓冲图片，浏览器会创建文件上传对象，并根据所述最近缓存图片的数据和属性信息，执行对所述文件上传对象的属性填充，从而通过将该文件上传对象上传至服务器，即实现了对最近缓冲图片的上传操作。由于是浏览器的内置功能接口，因而不存在安全限制问题，可以将***剪贴板内的信息动态填充至文件上传对象。

在本实施例中，用户可以通过多种方式将上传图片导入***剪贴板内，比如对本地图片的复制操作，或者对网络图片的剪切操作等。

在本实施例中，***剪贴板内的对象是按照时间顺序排列的，当最近缓存对象为图片格式时，则用户通过直接发出“粘贴”命令，即可实现对该最近缓存对象的粘贴操作，而该最近缓存对象即最近缓存图片。当最近缓存对象为非图片格式时，可以直接提示错误，要求用户重新获取待上传图片的资源；或者，也可以获取所述***剪贴板内的所有图片缓存对象，并展示于所述网页内，然后根据检测到的用户选择操作，将被选中的图片缓存对象作为所述最近缓存图片。

步骤306，当图片上传功能被触发时，将所述最近缓存图片上传至服务器。

在本实施例中，可以通过同步或者异步方式，将最近缓存图片上传至服务器。若采用异步上传方式，则当图片上传功能被触发时，可以根据所述最近缓存图片对所述网页进行重新渲染，得到对所述最近缓存图片的上传效果预览网页，并展示所述上传效果预览页面。

由上述实施例可知，本申请通过调用***剪贴板的事件监听功能，可以对文件上传对象进行动态的属性填充，而不存在安全限制，且被选图片不仅可以为本地资源，也可以为网络资源，有助于简化用户操作、提升操作效率。同时，通过采用基于粘贴形式的图片资源获取方式，可以将“查看”和“选取”操作相结合，使得用户对图片资源的选择操作过程实现了“所见即所得”，操作简便且直观。此外，通过对上传操作和效果预览的异步处理，使得用户无需等待，便可即时查看图片上传效果，有助于提升用户体验。

图4示出了根据本申请一示例性实施例的一种图片上传方法的流程图，如图4所示，该方法可以包括以下步骤：

步骤402，调用对***剪贴板的事件监听功能。

在本实施例中，当浏览器提供了对***剪贴板的事件监听功能的API时，可以通过调用该API来获得对***剪贴板的事件监听功能，则基于***剪贴板的图片选取、对象属性填充等动态操作符合浏览器的安全要求，不会由于安全限制而被浏览器禁止采用。

举例而言，当采用JavaScript语言时，该步骤的相应逻辑可以包括：

步骤404，将待上传图片提取至***剪贴板。

在本实施例中，可以通过多种方式将待上传图片提取至***剪贴板，比如对本地或网络资源中的图片进行“复制”或“剪切”操作，还可以对图片进行“裁剪”操作来截取任意部分的图片元素。

步骤406，将待上传图片从***剪贴板粘贴至网页中。

在本实施例中，图5示出了一示例性实施例的图片上传界面示意图。如图5所示，在用户执行图片上传的网页中，可以提供“区域1”、“区域2”等预留区域，则用户通过选中希望执行粘贴操作的预留区域后，即可执行对***剪贴板内的图片的粘贴操作。

在本实施例中，浏览器需要为待上传图片创建对应的FileUpload对象，并在图片被粘贴至预留区域时，提取该图片的数据和属性信息(如文件名、大小等)，以用于对FileUpload对象进行属性填充。

其中，为了帮助用户顺利完成图片粘贴操作，可以在预留区域内展示操作提示信息，比如图5所示的“请选中本区域，并粘贴需要上传的图片”等文字等。当然，网页可以提供图5所示的2个或更多数量的预留区域，也可以仅提供单个预留区域，本申请并不对此进行限制。

在本实施例中，假定用户选中了区域1，并发出粘贴命令后，浏览器会对***剪贴板内的最近缓存对象进行类别查看，如果最近缓存对象为图片格式，则直接完成粘贴操作，得到如图6所示的粘贴效果。然而，如果最近缓存对象为非图片格式，则浏览器可以提示用户操作错误，需要重新获取图片；或者，如图7所示，可以将***剪贴板内的缓存对象展示于网页中，并由用户选择一图片对象，以粘贴至区域1。

举例而言，当采用JavaScript语言时，该步骤的相应逻辑可以包括：

div.addEventLinstener(‘paste’,listener)；

步骤408，生成并展示预览页面。

举例而言，当采用JavaScript语言时，该步骤的相应逻辑可以包括：

var file＝item.getAsFile(),reader＝new FileReader()；

reader.onload＝function(e){//注册onload处理事件

var img＝new Image()；

img.src＝e.target.result；

步骤410，将图片提交至服务器。

在本实施例中，当用户触发了图片上传功能后，即可执行步骤408和步骤410。其中，网页可以在用户将图片粘贴至预留区域后，自动判定为图片上传功能被触发；或者，也可以在网页中的“提交”按钮(或其他按钮)被点击时，判定为图片上传功能被触发。

需要说明的是：虽然采用了“步骤408”和“步骤410”的描述方式，但这两个步骤之间并没有必然的关联和先后顺序。比如图8所示，当采用异步的图片上传形式时，浏览器可以在图片上传功能被触发后，立即在本地生成该图片上传后的效果预览页面；同时，也可以通过图8所示的“进度条”的形式，展示出图片上传进度。

当然，本申请并不限制图片上传的形式，即除了采用上述的异步上传形式外，也可以采用同步上传形式，即浏览器在将图片上传服务器后，在接收到服务器返回数据后，才展示相应的图片效果预览页面以及“上传成功”提示信息。

图9示出了根据本申请的一示例性实施例的电子设备的示意结构图。请参考图9，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成图片上传装置。当然，除了软件实现方式之外，本申请并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

请参考图10，在软件实施方式中，该图片上传装置可以包括调用单元、粘贴单元和上传单元。其中：

调用单元，调用对***剪贴板的事件监听功能；

粘贴单元，当检测到发生于网页中的预留区域内的粘贴操作时，获取所述***剪贴板内的最近缓存图片，并粘贴至所述预留区域；

上传单元，当图片上传功能被触发时，将所述最近缓存图片上传至服务器。

可选的，所述调用单元具体用于：

通过所述网页的浏览器中预设的API接口，调用所述事件监听功能。

可选的，所述粘贴单元具体用于：创建文件上传对象，并根据所述最近缓存图片的数据和属性信息，执行对所述文件上传对象的属性填充；

所述上传单元具体用于：将所述文件上传对象上传至所述服务器。

可选的，所述粘贴单元具体用于：

获取所述***剪贴板内的最近缓存对象；

当所述最近缓存对象为图片格式时，将所述最近缓存对象作为所述最近缓存图片。

可选的，还包括：

对象展示单元，当所述最近缓存对象为非图片格式时，获取所述***剪贴板内的所有图片缓存对象，并展示于所述网页内；

选择单元，根据检测到的用户选择操作，将被选中的图片缓存对象作为所述最近缓存图片。

可选的，还包括：

渲染单元，当所述图片上传功能被触发时，根据所述最近缓存图片对所述网页进行重新渲染，得到对所述最近缓存图片的上传效果预览网页；

页面展示单元，展示所述上传效果预览页面。

可选的，所述上传单元用于：

通过异步方式将所述最近缓存图片上传至所述服务器。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (14)

1.一种图片上传方法，其特征在于，包括：

调用对***剪贴板的事件监听功能；

当检测到发生于网页中的预留区域内的粘贴操作时，获取所述***剪贴板内的最近缓存图片，并粘贴至所述预留区域；

当图片上传功能被触发时，将所述最近缓存图片上传至服务器。

2.根据权利要求1所述的方法，其特征在于，所述调用对***剪贴板的事件监听功能，包括：

通过所述网页的浏览器中预设的API接口，调用所述事件监听功能。

3.根据权利要求1所述的方法，其特征在于，

所述当检测到发生于网页中的预留区域内的粘贴操作时，获取所述***剪贴板内的最近缓存图片，并粘贴至所述预留区域，包括：创建文件上传对象，并根据所述最近缓存图片的数据和属性信息，执行对所述文件上传对象的属性填充；

所述将所述最近缓存图片上传至服务器，包括：将所述文件上传对象上传至所述服务器。

4.根据权利要求1所述的方法，其特征在于，所述当检测到发生于网页中的预留区域内的粘贴操作时，获取所述***剪贴板内的最近缓存图片，包括：

获取所述***剪贴板内的最近缓存对象；

当所述最近缓存对象为图片格式时，将所述最近缓存对象作为所述最近缓存图片。

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

当所述最近缓存对象为非图片格式时，获取所述***剪贴板内的所有图片缓存对象，并展示于所述网页内；

根据检测到的用户选择操作，将被选中的图片缓存对象作为所述最近缓存图片。

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

当所述图片上传功能被触发时，根据所述最近缓存图片对所述网页进行重新渲染，得到对所述最近缓存图片的上传效果预览网页；

展示所述上传效果预览页面。

7.根据权利要求1所述的方法，其特征在于，所述将所述最近缓存图片上传至服务器，包括：

通过异步方式将所述最近缓存图片上传至所述服务器。

8.一种图片上传装置，其特征在于，包括：

调用单元，调用对***剪贴板的事件监听功能；

粘贴单元，当检测到发生于网页中的预留区域内的粘贴操作时，获取所述***剪贴板内的最近缓存图片，并粘贴至所述预留区域；

上传单元，当图片上传功能被触发时，将所述最近缓存图片上传至服务器。

9.根据权利要求8所述的装置，其特征在于，所述调用单元具体用于：

通过所述网页的浏览器中预设的API接口，调用所述事件监听功能。

10.根据权利要求8所述的装置，其特征在于，

所述粘贴单元具体用于：创建文件上传对象，并根据所述最近缓存图片的数据和属性信息，执行对所述文件上传对象的属性填充；

所述上传单元具体用于：将所述文件上传对象上传至所述服务器。

11.根据权利要求8所述的装置，其特征在于，所述粘贴单元具体用于：

获取所述***剪贴板内的最近缓存对象；

当所述最近缓存对象为图片格式时，将所述最近缓存对象作为所述最近缓存图片。

12.根据权利要求11所述的装置，其特征在于，还包括：

对象展示单元，当所述最近缓存对象为非图片格式时，获取所述***剪贴板内的所有图片缓存对象，并展示于所述网页内；

选择单元，根据检测到的用户选择操作，将被选中的图片缓存对象作为所述最近缓存图片。

13.根据权利要求8所述的装置，其特征在于，还包括：

渲染单元，当所述图片上传功能被触发时，根据所述最近缓存图片对所述网页进行重新渲染，得到对所述最近缓存图片的上传效果预览网页；

页面展示单元，展示所述上传效果预览页面。

14.根据权利要求8所述的装置，其特征在于，所述上传单元用于：

通过异步方式将所述最近缓存图片上传至所述服务器。