CN105302802A - 图片上传方法、系统及浏览器 - Google Patents

Abstract

本发明提供一种图片上传方法、系统及浏览器，所述方法包括以下步骤：当接收到在打开的WEB页面中上传图片的指令时，通过浏览器程序内预置的文件上传通知接口启动浏览器的图片选择流程；在图片选择完成后，获取相应的图片数据；将所述图片数据传入所述WEB页面中。本发明的一种图片上传方法、系统及浏览器，解决了在特定情况下无法实现图片上传的缺陷，提高了图片上传的效率。

Description

图片上传方法、系统及浏览器

技术领域

本发明涉及互联网技术领域，特别是涉及一种图片上传方法、系统及浏览器。

背景技术

在使用浏览器时，经常需要进行各种文件，如图片的上传操作；使用浏览器进行图片上传操作时，传统的上传方法中，以WindowsPhone8(即WP8)系统为例，一般是通过对打开的WEB页面进行分析，将WEB页面中的input标签进行动态劫持，从而将在浏览器内所选择的图片通过本地API(ApplicationProgrammingInterface，应用程序编程接口)上传至WEB页面中，实现图片的上传。

传统方法会针对WEB页面中的input标签进行替换，但是当页面中不存在input标签或者页面使用了自定义的图片上传流程时，已有的图片上传方案将失效(如触屏版本的社交网站中上传图片的功能)，此时将导致无法上传图片的问题出现。

发明内容

基于此，有必要针对某些特定情况下无法上传图片的问题，提供一种图片上传方法、系统及浏览器。

为实现上述目的，本发明采用如下的技术方案：

一种图片上传方法，包括以下步骤：

当接收到在打开的WEB页面中上传图片的指令时，通过浏览器程序内预置的文件上传通知接口启动浏览器的图片选择流程；

在图片选择完成后，获取相应的图片数据；

将所述图片数据传入所述WEB页面中。

一种图片上传系统，包括：

图片选择启动模块，用于当接收到在打开的WEB页面中上传图片的指令时，通过浏览器程序内预置的文件上传通知接口启动浏览器的图片选择流程；

图片数据获取模块，用于在图片选择完成后，获取相应的图片数据；

图片上传模块，用于将所述图片数据传入所述WEB页面中。

一种浏览器，包括上述的图片上传系统。

由以上方案可以看出，本发明的一种图片上传方法、系统及浏览器，在浏览器程序内预置了文件上传通知接口，当需要进行图片上传时，通过该文件上传通知接口来主动通知浏览器启动图片选择流程，然后进行图片数据的获取后，将图片上传到WEB页面。本发明的方案不需要对WEB页面中的input标签进行替换处理，因此解决了在某些特定情况(例如WP8系统下需要在触屏版本的社交网站中上传图片)下无法实现图片上传的缺陷，提高了图片上传的效率。

附图说明

图1为本发明实施例一中的一种图片上传方法的流程示意图；

图2为本发明实施例二中的一种图片上传方法的流程示意图；

图3为本发明实施例中的一种图片上传系统的结构示意图；

图4为能实现本发明实施例的一个计算机系统的结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

除非上下文另有特定清楚的描述，本发明中的元件和组件，数量既可以单个的形式存在，也可以多个的形式存在，本发明并不对此进行限定。本发明中的步骤虽然用标号进行了排列，但并不用于限定步骤的先后次序，除非明确说明了步骤的次序或者某步骤的执行需要其他步骤作为基础，否则步骤的相对次序是可以调整的。

实施例一

参见图1所示，一种图片上传方法，包括以下步骤：

步骤S101，当接收到在打开的WEB页面中上传图片的指令时，通过浏览器程序内预置的文件上传通知接口来唤醒和启动浏览器的图片选择流程，然后进入步骤S102。

作为一个较好的实施例，上述通过文件上传通知接口来启动浏览器的图片选择流程的过程具体可以包括如下步骤：通过所述文件上传通知接口对所接收到的上传图片的指令进行解析，当解析到预定的特征字符串时，启动相应的图片选择流程。本发明实施例中，可以通过一个IE控件来启动图片选择流程，控件支持网页使用JS(JavaScript，客户端脚本语言)脚本对控件发送文本信息，预置的文件上传通知接口需要先接收到网页开发者通知过来的带有特征字符串的信息后，浏览器才能启动图片选择流程。

以目前的业务情况为例，在一些社交网站触屏版适配WP8平台时，由于系统浏览器本身不支持使用<inputtype＝"file">唤醒系统文件上传的流程，需要第三方浏览器进行适配。基于此，本发明实施例在浏览器程序内预置了一个系统内核通知接口(即文件上传通知接口)，用于在打开的网页页面中主动通知浏览器需要进行图片文件的上传操作。这样就可以避免传统方案中由于需要动态劫持WEB页面中的input标签并进行替换，当页面中不存在input标签或者页面使用了自定义的图片上传流程时(例如WP8系统下在触屏版本的社交网站中上传图片)所导致的无法实现图片上传的问题出现。

步骤S102，在浏览器的图片选择流程启动后，用户可以按照自身的需求选择待上传的图片；本步骤中，在检测到图片选择完成后，获取相应的图片数据，然后进入步骤S103。

步骤S103，将所述图片数据传入所述WEB页面中。

作为一个较好的实施例，步骤S103中将所述图片数据传入所述WEB页面中的过程具体可以包括如下步骤：

步骤S1031，判断所述图片数据的大小是否超过设定阈值；若否，则进入步骤S1032。

需要说明的是，上述的阈值可以根据浏览器的处理性能等来进行设置，例如本发明实施例中可以将其设置为1MB。

步骤S1032，若步骤S1031的判断结果为否，即所述图片数据的大小未超过设定阈值，则可以对所述图片数据进行编码处理，并将编码处理后的图片数据传入所述WEB页面中，然后就可以在WEB页面中发起正常的图片上传流程，从而完成图片的上传操作。

作为一个较好的实施例，对所述图片数据进行编码处理、并将编码处理后的图片数据传入所述WEB页面中的过程具体可以包括如下步骤：将所述图片数据编码成base64字符串，并将该base64字符串以JS对象的形式传入所述WEB页面中。Base64是用于传输8Bit字节代码的编码方式之一，可用于在HTTP(Hypertexttransferprotocol，超文本传输协议)环境下传递较长的标识信息。

另外，在实际应用中我们发现，由于浏览器内核本身存在缺陷，而且用户的图片数据的大小不可预料，当图片体积超过某个阈值时，程序内存将会快速升高导致浏览器内核出现伪内存泄漏。为解决这个问题，作为一个较好的实施例，本发明的一种图片上传方法还可以包括如下步骤：

步骤S1033，若步骤S1031的判断结果为是，即判断得出所述图片数据的大小超过了设定阈值(例如1MB)，则对所述图片数据进行压缩处理，得到预设尺寸大小的图片数据；

步骤S1034，对压缩处理后的图片数据进行编码处理，并将编码处理后的图片数据传入所述WEB页面中。

通过上述对图片数据的预压缩处理，可以减小图片的尺寸和体积大小，从而避免浏览器内核出现伪内存泄漏的情况出现。

本发明实施例中，并不是一定要在图片数据的大小超过了设定阈值时才可以对图片数据进行压缩，作为一个较好的实施例，本发明为了能够提高后续编码的效率，可以在判断得出所述图片数据的大小未超过设定阈值之后、对所述图片数据进行编码处理之前，统一对所述图片数据进行压缩处理，得到预设尺寸大小的图片数据。即在编码前首先将所有图片数据压缩为统一的尺寸和体积大小，这样可以方便后续的编码处理，提高编码效率，从而进一步的提高图片上传的效率。

实施例二

如图2所示，本实施例中示出一个包括用户端、浏览器、IE(InternetExplorer，网页浏览器)控件在内的多方交互流程时序过程。本实施例中的一种图片上传方法，包括以下步骤：

步骤S201，用户打开HTML5(HyperTextMarkuplanguage，超文本标记语言)WEB页面；

步骤S202，浏览器执行正常页面解析显示流程；

步骤S203，IE控件(即WebBrowser控件)显示WEB页面内容；本发明实施例中，该IE控件具有进行网页的导航、显示、JS脚本注入、接收网页JS脚本通知等功能；

步骤S204，用户点击上传图片；

步骤S205，IE控件主动通知浏览器需要进行图片上传；

步骤S206，浏览器启动图片选择器，唤醒图片选择流程；

步骤S207，用户选择需要上传的图片；

步骤S208，浏览器进行图片数据获取、图片压缩处理，并将图片数据转换成base64编码格式，然后通过JS通知到IE控件中。具体的，可以通过系统API–WriteableBitmap.Render()将图片数据进行压缩，然后通过系统API–Array.ToBase64()将图片数据转换成base64字符串格式，再经由WebBrowser.InvokeScript()将所述base64字符串传入WEB页面中供页面开发者自行调用；

步骤S209，IE控件通过页面JS获取相关图片信息，并发起正常图片上传流程，完成图片上传。

另外，与上述一种图片上传方法相对应，本发明还提供一种图片上传系统，如图3所示，包括：

图片选择启动模块101，用于当接收到在打开的WEB页面中上传图片的指令时，通过浏览器程序内预置的文件上传通知接口启动浏览器的图片选择流程；

图片数据获取模块102，用于在图片选择完成后，获取相应的图片数据；

图片上传模块103，用于将所述图片数据传入所述WEB页面中。

作为一个较好的实施例，所述图片上传模块可以包括：

判断模块，用于判断所述图片数据的大小是否超过设定阈值；

第一编码模块，用于在所述判断模块的判断结果为否的情况下，对所述图片数据进行编码处理，并将编码处理后的图片数据传入所述WEB页面中。

作为一个较好的实施例，所述图片上传模块还可以包括：

第一压缩模块，用于在所述判断模块的判断结果为是的情况下，对所述图片数据进行压缩处理，得到预设尺寸大小的图片数据；

第二编码模块，用于对压缩处理后的图片数据进行编码处理，并将编码处理后的图片数据传入所述WEB页面中。

作为一个较好的实施例，所述图片上传模块还可以包括：

第二压缩模块，用于在判断得出所述图片数据的大小未超过设定阈值之后、对所述图片数据进行编码处理之前，对所述图片数据进行压缩处理，得到预设尺寸大小的图片数据。

可以理解，本发明所使用的术语“第一”、“第二”等可在本文中用于描述各种元件，但这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。举例来说，在不脱离本发明的范围的情况下，可以将第一编码模块称为第二编码模块，且类似地，可将第二编码模块称为第一编码模块。第一编码模块和第二编码模块两者都是编码模块，但其不是同一编码模块。

作为一个较好的实施例，所述第一编码模块可以包括：

字符串编码子模块，用于将所述图片数据编码成base64字符串，并将该base64字符串以JS对象的形式传入所述WEB页面中。

上述一种图片上传系统的其它技术特征与本发明的一种图片上传方法相同，此处不予赘述。

最后，本发明还提供一种浏览器，该浏览器中包括上述的图片上传系统。

作为一个较好的实施例，所述浏览器还可以包括：解析与显示模块，用于对打开的WEB页面进行解析，并显示WEB页面内容。

图4为能实现本发明实施例的一个计算机系统1000的模块图。该计算机系统1000只是一个适用于本发明的计算机环境的示例，不能认为是提出了对本发明的使用范围的任何限制。计算机系统1000也不能解释为需要依赖于或具有图示的示例性的计算机系统1000中的一个或多个部件的组合。

图4中示出的计算机系统1000是一个适合用于本发明的计算机系统的例子。具有不同子系统配置的其它架构也可以使用。例如有大众所熟知的个人数字助理、智能电话、平板电脑、便携式媒体播放器、机顶盒、笔记本等类似设备可以适用于本发明的一些实施例。但不限于以上所列举的设备。

如图4所示，计算机系统1000包括处理器1010、存储器1020和系统总线1022。包括存储器1020和处理器1010在内的各种系统组件连接到系统总线1022上。处理器1010是一个用来通过计算机系统中基本的算术和逻辑运算来执行计算机程序指令的硬件。存储器1020是一个用于临时或永久性存储计算程序或数据(例如，程序状态信息)的物理设备。系统总线1020可以为以下几种类型的总线结构中的任意一种，包括存储器总线或存储控制器、外设总线和局部总线。处理器1010和存储器1020可以通过系统总线1022进行数据通信。其中存储器1020包括只读存储器(ROM)或闪存(图中都未示出)，以及随机存取存储器(RAM)，RAM通常是指加载了操作系统和应用程序的主存储器。

计算机系统1000还包括显示接口1030(例如，图形处理单元)、显示设备1040(例如，液晶显示器)、音频接口1050(例如，声卡)以及音频设备1060(例如，扬声器)。显示设备1040和音频设备1060是用于体验多媒体内容的媒体设备。

计算机系统1000一般包括一个存储设备1070。存储设备1070可以从多种计算机可读介质中选择，计算机可读介质是指可以通过计算机系统1000访问的任何可利用的介质，包括移动的和固定的两种介质。例如，计算机可读介质包括但不限于，闪速存储器(微型SD卡)，CD-ROM，数字通用光盘(DVD)或其它光盘存储、磁带盒、磁带、磁盘存储或其它磁存储设备，或者可用于存储所需信息并可由计算机系统1000访问的任何其它介质。

计算机系统1000还包括输入装置1080和输入接口1090(例如，IO控制器)。用户可以通过输入装置1080，如键盘、鼠标、显示装置1040上的触摸面板设备，输入指令和信息到计算机系统1000中。输入装置1080通常是通过输入接口1090连接到系统总线1022上的，但也可以通过其它接口或总线结构相连接，如通用串行总线(USB)。

计算机系统1000可在网络环境中与一个或者多个网络设备进行逻辑连接。网络设备可以是个人电脑、服务器、路由器、智能电话、平板电脑或者其它公共网络节点。计算机系统1000通过局域网(LAN)接口1100或者移动通信单元1110与网络设备相连接。局域网(LAN)是指在有限区域内，例如家庭、学校、计算机实验室、或者使用网络媒体的办公楼，互联组成的计算机网络。WiFi和双绞线布线以太网是最常用的构建局域网的两种技术。WiFi是一种能使计算机系统1000间交换数据或通过无线电波连接到无线网络的技术。移动通信单元1110能在一个广阔的地理区域内移动的同时通过无线电通信线路接听和拨打电话。除了通话以外，移动通信单元1110也支持在提供移动数据服务的2G，3G或4G蜂窝通信系统中进行互联网访问。

应当指出的是，其它包括比计算机系统1000更多或更少的子系统的计算机系统也能适用于发明。例如，计算机系统1000可以包括能在短距离内交换数据的蓝牙单元，用于照相的图像传感器，以及用于测量加速度的加速计。

如上面详细描述的，适用于本发明的计算机系统1000能执行图片上传方法的指定操作。计算机系统1000通过处理器1010运行在计算机可读介质中的软件指令的形式来执行这些操作。这些软件指令可以从存储设备1070或者通过局域网接口1100从另一设备读入到存储器1020中。存储在存储器1020中的软件指令使得处理器1010执行上述的图片上传方法。此外，通过硬件电路或者硬件电路结合软件指令也能同样实现本发明。因此，实现本发明并不限于任何特定硬件电路和软件的组合。

通过上方案可以看出，本发明的一种图片上传方法、系统及浏览器，在浏览器程序内预置了文件上传通知接口，当需要进行图片上传时，通过该文件上传通知接口来主动通知浏览器启动图片选择流程，然后进行图片数据的获取后，将图片上传到WEB页面。本发明的方案不需要对WEB页面中的input标签进行替换处理，因此解决了在某些特定情况(例如WP8系统下需要在触屏版本的社交网站中上传图片)下无法实现图片上传的缺陷，提高了图片上传的效率。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (14)

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

当接收到在打开的WEB页面中上传图片的指令时，通过浏览器程序内预置的文件上传通知接口启动浏览器的图片选择流程；

在图片选择完成后，获取相应的图片数据；

将所述图片数据传入所述WEB页面中。

2.根据权利要求1所述的图片上传方法，其特征在于，通过所述文件上传通知接口启动浏览器的图片选择流程的过程包括：

通过所述文件上传通知接口对所接收到的上传图片的指令进行解析，当解析到预定的特征字符串时，启动相应的图片选择流程。

3.根据权利要求1所述的图片上传方法，其特征在于，将所述图片数据传入所述WEB页面中的过程包括：

判断所述图片数据的大小是否超过设定阈值；

若否，则对所述图片数据进行编码处理，并将编码处理后的图片数据传入所述WEB页面中。

4.根据权利要求3所述的图片上传方法，其特征在于，还包括步骤：

若判断得出所述图片数据的大小超过设定阈值，则对所述图片数据进行压缩处理，得到预设尺寸大小的图片数据；

对压缩处理后的图片数据进行编码处理，并将编码处理后的图片数据传入所述WEB页面中。

5.根据权利要求3所述的图片上传方法，其特征在于，在判断得出所述图片数据的大小未超过设定阈值之后、对所述图片数据进行编码处理之前，还包括步骤：

对所述图片数据进行压缩处理，得到预设尺寸大小的图片数据。

6.根据权利要求4或5所述的图片上传方法，其特征在于，对所述图片数据进行编码处理、并将编码处理后的图片数据传入所述WEB页面中的过程包括：

将所述图片数据编码成base64字符串，并将该base64字符串以JS对象的形式传入所述WEB页面中。

7.一种图片上传系统，其特征在于，包括：

图片选择启动模块，用于当接收到在打开的WEB页面中上传图片的指令时，通过浏览器程序内预置的文件上传通知接口启动浏览器的图片选择流程；

图片数据获取模块，用于在图片选择完成后，获取相应的图片数据；

图片上传模块，用于将所述图片数据传入所述WEB页面中。

8.根据权利要求7所述的图片上传系统，其特征在于，所述图片上传模块包括：

解析模块，用于通过所述文件上传通知接口对所接收到的上传图片的指令进行解析，当解析到预定的特征字符串时，启动相应的图片选择流程。

9.根据权利要求7所述的图片上传系统，其特征在于，所述图片上传模块包括：

判断模块，用于判断所述图片数据的大小是否超过设定阈值；

第一编码模块，用于在所述判断模块的判断结果为否的情况下，对所述图片数据进行编码处理，并将编码处理后的图片数据传入所述WEB页面中。

10.根据权利要求9所述的图片上传系统，其特征在于，所述图片上传模块还包括：

第一压缩模块，用于在所述判断模块的判断结果为是的情况下，对所述图片数据进行压缩处理，得到预设尺寸大小的图片数据；

第二编码模块，用于对压缩处理后的图片数据进行编码处理，并将编码处理后的图片数据传入所述WEB页面中。

11.根据权利要求9所述的图片上传系统，其特征在于，所述图片上传模块还包括：

第二压缩模块，用于在判断得出所述图片数据的大小未超过设定阈值之后、对所述图片数据进行编码处理之前，对所述图片数据进行压缩处理，得到预设尺寸大小的图片数据。

12.根据权利要求10或11所述的图片上传系统，其特征在于，所述第一编码模块包括：

字符串编码子模块，用于将所述图片数据编码成base64字符串，并将该base64字符串以JS对象的形式传入所述WEB页面中。

13.一种浏览器，其特征在于，包括如权利要求7到12任意一项所述的图片上传系统。

14.根据权利要求13所述的浏览器，其特征在于，所述浏览器还包括：

解析与显示模块，用于对打开的WEB页面进行解析，并显示WEB页面内容。