CN104462491A

CN104462491A - 上传图片的方法、系统及相应的服务器

Info

Publication number: CN104462491A
Application number: CN201410801869.6A
Authority: CN
Inventors: 黄玉凤
Original assignee: Shanghai Feixun Data Communication Technology Co Ltd
Current assignee: Shanghai Feixun Data Communication Technology Co Ltd
Priority date: 2014-12-22
Filing date: 2014-12-22
Publication date: 2015-03-25

Abstract

本发明公开了一种上传图片的方法，所述方法应用于上传图片的系统，所述上传图片的系统包含服务器及至少一个客户端，所述方法包含以下步骤：S1、客户端通过发送HTTP报文向服务器上传图片；S2、服务器按照预设的图片处理策略及限定条件对客户端上传的图片进行处理；S3、服务器将处理后的图片保存到指定目录。本发明还公开了一种上传图片的系统及相应的服务器。本发明能够兼容不同系统的移动终端，以及移动终端上的不同类型的浏览器，充分考虑到了功能的通用性，提高用户体验，方便的实现信息共享和用户之间的互动，提高应用软件和网站的用户数和访问量，提高同类产品的竟争力。

Description

上传图片的方法、系统及相应的服务器

技术领域

本发明涉及网络通讯技术领域，具体涉及一种上传图片的方法、系统及相应的服务器。

背景技术

随着智能移动终端的诞生，终端应用层出不穷，人们的生活也越来越离不开。摄像头作为移动终端上的一个常用的功能部件，基于它的许多APP应用软件应也随之诞生，许多APP应用开发商都将移动终端相册上传相片以及拍照上传相片功能嵌入到了自己的软件模块中，拥有一个好的易用的拍照和相片上传功能成为许多APP应用软件和WEB网站吸引用户的利器。

APP应用开发商和许多网站为了提高自己产品的市场竞争力，吸引更多的用户，会开发一些用户喜欢用的功能，通过摄像头拍照并上传图片到网络便是众多功能之一。由于WEB页面用到的CSS样式以及HTML5在HTML上新增的一些标签不是所有的浏览器都支持，且在不同系统（android和ios）的设备上的表现形式也不完全相同，若设计时未考虑到功能的通用性，在表现效果上将不尽人意。

目前WEB网站为了在浏览器中调用摄像头，使用的是html5中的<video>标签，并将从摄像头获得视频作为这个标签的输入来源，从而实现拍照功能的，针对不同的手机浏览器不是所有的都支持，且实现起来用到了canvas，编码相对复杂。经测试在android系统的opera浏览器下可以正常实现拍照功能。android下的google chrome浏览器还不行，自带的浏览器也测试没有通过，IOS系统的safari浏览器也是不支持的。

发明内容

本发明的目的在于提供一种上传图片的方法、系统及相应的服务器，使该功能能够兼容不同系统的移动终端，以及移动终端上的不同类型的浏览器，充分考虑到了功能的通用性，提高用户体验，方便的实现信息共享和用户之间的互动，提高应用软件和网站的用户数和访问量，提高同类产品的竟争力。

为了达到上述目的，本发明通过以下技术方案实现：一种上传图片的方法，其特点是，所述方法应用于上传图片的系统，所述上传图片的系统包含服务器及至少一个客户端，所述方法包含以下步骤：

S1、客户端通过发送HTTP报文向服务器上传图片；

S2、服务器按照预设的图片处理策略及限定条件对客户端上传的图片进行处理；

S3、服务器将处理后的图片保存到指定目录。

所述的步骤S1之前还包含一步骤S0：

用户在客户端的相册或调用客户端的摄像头拍照进行待上传图片的选择。

所述的步骤S2具体包含：

S2.1、服务器检查图片的格式是否为预设的图片格式；

S2.1.1、若否，则服务器向客户端发送错误提示；

S2.1.2、若是，则执行步骤S2.2；

S2.2、服务器检查图片的大小是否为预设的图片大小；

S2.2.1、若否，则服务器对图片进行压缩后执行步骤S3；

若是，则服务器直接执行步骤S3。

所述的步骤S2.1.2中还包含服务器对图片上传路径进行重新编码的步骤。

所述的步骤S3具体为服务器以客户端的ID为名称创建存放目录，并向客户端发送上传成功的提示。

一种用于客户端上传图片的服务器，其特点是，该服务器包含：

文件接收单元，用于接收客户端上传的图片；

处理单元，与所述文件接收单元连接，用于根据预设的图片处理策略及限定条件对客户端上传的图片进行处理；

指令下发单元，与所述处理单元连接，用于根据处理单元的处理单元向客户端发送错误提示及上传成功提示。

所述的处理单元包含：

格式判断模块，分别与所述文件接收单元及指令下发单元连接，用于对客户端上传的图片进行格式校验；

编码转换模块，与所述文件接收单元连接，用于对客户端上传的图片的上传路径进行重新编码，由UTF-8转换为GB2312；

文件大小判断模块，分别与所述文件接收单元及指令下发单元连接，用于对客户端上传的图片的大小进行判断；

文件压缩模块，分别与所述文件大小判断模块及指令下发单元连接，用于对超过预设的图片大小的图片进行压缩。

一种上传图片的系统，包含服务器及至少一个客户端，所述的客户端包含文件上传单元，用于上传图片至服务器，其特点是，所述服务器包含：

文件接收单元，用于接收客户端的文件上传单元上传的图片；

所述的处理单元包含：

所述的客户端还包含结果接收单元，用于接收服务器的指令下发单元发送的错误提示及上传成功提示。

本发明一种上传图片的方法、系统及相应的服务器与现有技术相比具有以下优点：对于不同系统的移动终端和不同的浏览器，该功能的实现是通用的，无需修改代码，实现了调用相册和摄像头的通用性；本发明使用JS脚本和PHP相关图片处理函数实现点击“上传图片”按钮调用相册和摄像头功能，较传统的实现方法代码简洁，界面友好且通用性较好；采用HTML静态页面的布局，配合CSS样式，使整个页面简洁、美观且方便用户使用。

附图说明

图1为本发明一种上传图片的系统结构框图；

图2为本发明一种上传图片的方法流程图。

具体实施方式

以下结合附图，通过详细说明一个较佳的具体实施例，对本发明做进一步阐述。

如图1所示，一种上传图片的系统，包含服务器2及至少一个客户端1，所述的客户端1包含文件上传单元11，用于上传图片至服务器2，所述服务器2包含：文件接收单元21，用于接收客户端1的文件上传单元11上传的图片；处理单元22，与所述文件接收单元21连接，用于根据预设的图片处理策略及限定条件对客户端1上传的图片进行处理；指令下发单元23，与所述处理单元22连接，用于根据处理单元22的处理结果向客户端1发送错误提示及上传成功提示。

所述的处理单元22包含：格式判断模块221，分别与所述文件接收单元21及指令下发单元23连接，用于对客户端1上传的图片进行格式校验；编码转换模块222，与所述文件接收单元21连接，用于对客户端1上传的图片的上传路径进行重新编码，由UTF-8转换为GB2312；文件大小判断模块223，分别与所述文件接收单元21及指令下发单元23连接，用于对客户端1上传的图片的大小进行判断；文件压缩模块224，分别与所述文件大小判断模块223及指令下发单元23连接，用于对超过预设的图片大小的图片进行压缩。所述的客户端1还包含结果接收单元12，用于接收服务器2的指令下发单元23发送的错误提示及上传成功提示。

如图2所示，为了更好的描述系统的应用，本发明还公开了一种上传图片的方法，所述方法应用于上传图片的系统，所述上传图片的系统包含服务器2及至少一个客户端1，所述方法包含以下步骤：

S0、用户在客户端1的相册或调用客户端1的摄像头拍照进行待上传图片的选择；

S1、客户端1通过发送HTTP报文向服务器2上传图片；

S2、服务器2按照预设的图片处理策略及限定条件对客户端1上传的图片进行处理；

S2.1、服务器2检查图片的格式是否为预设的图片格式，例如jpg/jpeg/png这三种常见格式；

S2.1.1、若否，则服务器2向客户端1发送错误提示；

S2.1.2、若是，则服务器2对图片上传路径进行重新编码，之后执行步骤S2.2；

S2.2、服务器2检查图片的大小是否为预设的图片大小；

S2.2.1、若否，则服务器2对图片进行压缩后执行步骤S3；

若是，则服务器2直接执行步骤S3；

S3、服务器2以客户端1的ID为名称创建存放目录，用以区分不同客户端1上传的图片，并向客户端1发送上传成功的提示。

具体应用：浏览器中调用摄像头是移动互联网中的一个很重要的应用，通过此应用可方便直观的将用户喜欢的图片上传到网络，与他人实现信息共享和互动。本实施例中客户端1为手机，通过手机相册上传图片和通过调用手机摄像头拍照并将图片上传两部分。手机拍照功能在移动终端上应用较多，本发明在设计时充分考虑到此功能在不同浏览器中的通用性，在页面上使用了各浏览器都支持的CSS样式，为了使页面在不同屏高和屏宽的移动终端上能正常显示，使用了jquery mobile（移动终端WEB UI框架），可实现WEB页面在不同移动终端上的自适应，同时也用到了一种WEB端的JS脚本库jquery，使JS脚本简洁高效。

本发明采用B/S架构，由Browse端和Server端组成，Browse端即由手机上的浏览器提供，Server端即由图片共享网站提供。Browse端通过发送HTTP报文向Server端发送POST请求，Server端将Browse端发过来的图片的相关信息进行处理，若图片大小超过指定的字节数，则调用PHP相关图片处理函数生成缩略图并上传至服务器上的指定目录，若图片未超过指定大小，则直接上传。

Browse端主要负责HTML静态页面的布局，JS库和JQUERY MOBILE框架的引入，JS脚本对选择图片按钮的控制，Server端主要运用PHP对所选图片或所拍相片进行压缩和上传。对于不同系统的手机和不同的浏览器，该功能的实现是通用的，无需修改代码，实现了调用手机相册和摄像头的通用性。

即本发明由HTML静态页面、CSS样式控件、jQuery（js脚本库）、jQuery MOBILE库和PHP生成缩略图及上传几部分共同完成手机摄像头拍照并上传功能。具体的功能介绍如下：

1、HTML静态页面的布局：

WEB页面是由<HTML>标签组成，配合CSS样式的符合WEB页面规范的一个文件，网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的终端上，然后再通过浏览器解释网页的内容，再展示给用户。HTML静态页面负责整个WEB页面各功能标签元素的组织和显示效果，“上传图片”按钮用的是一个照相机图片作为背景图片，功能不言而喻，配合CSS样式尽量使整个页面简洁、美观且方便用户使用。用于调用摄像头的部分如下：

</div>

2、JS库和jQuery MOBILE框架

JS库和jQuery MOBILE框架用以辅助HTML静态页面的布局部分以及JS脚本对选择图片按钮的控制部分。jQuery库是一种轻量级的js库，兼容CSS3和各种浏览器，可方便地为网站提供AJAX交互。jQuery MOBILE框架是jQuery 在手机上和平板设备上的版本，使移动Web支持跨浏览器，它能同时支持高端和低端设备，尽量提供最好的体验。

jQuery库和jQuery MOBILE是在HTML页面的头部引入的，引入方法如下：

jQuery MOBILE库与之配套的还有CSS样式，也是在HTML页面的头部引入的，引入方法如下：

注：以上src和href所引文件的路径视库文件具体所在路径而定。

3、JS脚本对选择图片按钮的控制

此模块主要完成摄像头的调用以及所使用的图片在“上传图片”按钮上的显示。所述摄像头的调用，使用<input type="file" name="upfile" id="upfile" onchange="selectedimage();">，结合JS脚本实现点击“上传图片”按钮调用手机相册和摄像头功能。用到了jQuery的AJAX异步处理功能。手机相册和摄像头的调用对于不同系统的手机和不同的浏览器，该功能的实现是通用的，无需修改代码，实现了调用手机相册和摄像头的通用性。在“上传图片”按钮上绑定了onchange事件，当用户选择并使用图片后会触发此事件，在此事件映射的函数中使用jQuery的AJAX将图片上传至PHP服务器的临时目录下，并将上传后的图片所在路径返回。在AJAX处理成功的回调函数中将返回的路径通过JS显示在“上传图片”按钮上。AJAX异步处理，用于在不刷新当前页面的情况下,可以使用javascript来进行http请求的，这样不用刷新当前页面，就可以进行数据交换了。

4、PHP对所选图片或所拍相片进行压缩和上传

此模块主要完成图片的压缩和上传，在进行操作前检查图片文件格式，这里主要支持jpg/jpeg/png，这三种常见的图片格式，本实施例中采用正则表达式检查图片文件格式实现格式判断模块221的功能，正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串，通常被用来检索、替换或判断那些符合某个模式的文本。为防止上传的文件名中包含中文导致上传后显示为乱码，在上传前会调用iconv函数将待上传的文件路径编码从UTF-8转换为GB2312，实现编码转换模块222的功能。若图片格式满足要求则调用move_uploaded_file上传，为防止不同手机拍照后图片的命名相同导致上传不成功，不同用户上传的图片会以用户的ID为名存于不同的文件夹下。上传图片太大会导致浏览图片时加载速度过慢，这里需要进行压缩处理。在上传后通过调用filesize函数获取图片大小，若图片大小超过指定值（这里是500kb），则用自定义函数createThumbnail进行压缩处里并将压缩前的图片删除，实现文件大小判断模块223及文件压缩模块224的功能。

尽管本发明的内容已经通过上述优选实施例作了详细介绍，但应当认识到上述的描述不应被认为是对本发明的限制。在本领域技术人员阅读了上述内容后，对于本发明的多种修改和替代都将是显而易见的。因此，本发明的保护范围应由所附的权利要求来限定。

Claims

1.一种上传图片的方法，其特征在于，所述方法应用于上传图片的系统，所述上传图片的系统包含服务器（2）及至少一个客户端（1），所述方法包含以下步骤：

S1、客户端（1）通过发送HTTP报文向服务器（2）上传图片；

S2、服务器（2）按照预设的图片处理策略及限定条件对客户端（1）上传的图片进行处理；

S3、服务器（2）将处理后的图片保存到指定目录。

2.如权利要求1所述的上传图片的方法，其特征在于，所述的步骤S1之前还包含一步骤S0：

用户在客户端（1）的相册或调用客户端（1）的摄像头拍照进行待上传图片的选择。

3.如权利要求1或2所述的上传图片的方法，其特征在于，所述的步骤S2具体包含：

S2.1、服务器（2）检查图片的格式是否为预设的图片格式；

S2.1.1、若否，则服务器（2）向客户端（1）发送错误提示；

S2.1.2、若是，则执行步骤S2.2；

S2.2、服务器（2）检查图片的大小是否为预设的图片大小；

S2.2.1、若否，则服务器（2）对图片进行压缩后执行步骤S3；

若是，则服务器（2）直接执行步骤S3。

4.如权利要求3所述的上传图片的方法，其特征在于，所述的步骤S2.1.2中还包含服务器（2）对图片上传路径进行重新编码的步骤。

5.如权利要求1所述的上传图片的方法，其特征在于，所述的步骤S3具体为服务器（2）以客户端（1）的ID为名称创建存放目录，并向客户端（1）发送上传成功的提示。

6.一种用于客户端上传图片的服务器，其特征在于，该服务器包含：

文件接收单元（21），用于接收客户端（1）上传的图片；

处理单元（22），与所述文件接收单元（21）连接，用于根据预设的图片处理策略及限定条件对客户端（1）上传的图片进行处理；

指令下发单元（23），与所述处理单元（22）连接，用于根据处理单元（22）的处理结果向客户端（1）发送错误提示及上传成功提示。

7.如权利要求6所述的服务器，其特征在于，所述的处理单元（22）包含：

格式判断模块（221），分别与所述文件接收单元（21）及指令下发单元（23）连接，用于对客户端（1）上传的图片进行格式校验；

编码转换模块（222），与所述文件接收单元（21）连接，用于对客户端（1）上传的图片的上传路径进行重新编码，由UTF-8转换为GB2312；

文件大小判断模块（223），分别与所述文件接收单元（21）及指令下发单元（23）连接，用于对客户端（1）上传的图片的大小进行判断；

文件压缩模块（224），分别与所述文件大小判断模块（223）及指令下发单元（23）连接，用于对超过预设的图片大小的图片进行压缩。

8.一种上传图片的系统，包含服务器（2）及至少一个客户端（1），所述的客户端（1）包含文件上传单元（11），用于上传图片至服务器（2），其特征在于，所述服务器（2）包含：

文件接收单元（21），用于接收客户端（1）的文件上传单元（11）上传的图片；

9.如权利要求8所述的上传图片的系统，其特征在于，所述的处理单元（22）包含：

10.如权利要求8所述的上传图片的系统，其特征在于，所述的客户端（1）还包含结果接收单元（12），用于接收服务器（2）的指令下发单元（23）发送的错误提示及上传成功提示。