基于jQuery PHP Mysql实现在线拍照和在线浏览照片

本文用示例讲述了如何使用jQuery与服务器端编程语言(专业超文本预处理器的缩写)及关系型数据库结合，实现网版在线拍照、上传、显示浏览的功能，ajax交互技术贯穿本文始末，所以本文的读者要求具备相当熟悉jQuery及其插件使用和Java脚本相关知识，具备服务器端编程语言(专业超文本预处理器的缩写)和关系型数据库相关知识。

点击此处下载源码

超文本标记语言

首先，我们要建立一个主页面index.html来展示最新上传的照片，我们使用jQuery来获取最新的照片，所以这是一个超文本标记语言页面，不需要服务器端编程语言(专业超文本预处理器的缩写)标签，当然还要建立一个包括用来拍照和上传交互所需的超文本标记语言结构。

div id=' main ' style=' width :90% ' div id=' photos '/div div id=' camera ' div id=' cam '/div div id='网络摄像头/div div id=' buttons ' div class=' button _ pane ' id=' shot ' a id=' BTN _ shot ' href=' class=' BTN _ blue '拍照/a/div class=' button _ pane hidden ' id=上传' a id=' BTN _取消' href=' BTN _蓝色'取消/a a id=' BTN _上传' href=' BTN _格林'上传/a/部门/部门/部门我们在身体间加入了以上超文本标记语言代码，其中#照片用来加载展示最新上传的照片； #相机用于加载摄像模块，包括调用摄像闪光组件网络摄像头，以及拍照和上传等按钮。

此外，我们还需要在index.html加载必须的射流研究…文件，包括jQuery库，fancybox插件闪光摄像组件：网络摄像头。射流研究…以及本示例组合各种操作所需的script.js。

链接rel='样式表'类型=' text/CSS ' href='花式框/jquery。花式盒子-1。3 .4 .CSS '/脚本类型=' text/JavaScript ' src=' http :http://Ajax。谷歌API。com/Ajax/libs/jquery/1。7 .2/jquery。量滴js /脚本脚本脚本类型=' text/JavaScript ' src=' http 3360花式框/jquery

为了能给大家呈现一个相当美观的前端界面，我们使用了css3来实现一些阴影、圆角和透明度效果，请看：

#照片{宽度：80%;margin :40 px auto } #照片：悬停a { opa city 33600.5 } #照片：悬停{ opa city 33601 } #相机{ width :598 px高度：525px位置：固定；底部：-466 px；左侧：50%;边距-左侧：-300像素；border:1px实心# f0f 0；背景： URL(图像/cam _ BG。jpg)重复-y；-moz-border-radius : 4px 4px 0 0；-web套件-边框-半径：4 px 4px 0 0边界半径：4 px 4px 0 0-moz-box-shadow : 0 0 4px rgba(0，0，0，0.6)；-web kit-box-shadow :0 0 4px rgba(0，0，0，0.6)；box-shadow: 0 0 4px rgba(0，0，0，0.6)；} # cam {宽度：100%；高度：66 px显示：块；位置：绝对；top:0left:0背景：网址(images/cam.png)无重复中心中心；光标：指针} #网络摄像头{宽度：520像素高度：370 px余量：66px汽车22px线高：360 px背景# ccccolor: # 666文本对齐：居中}。button _ pane { text-align : center；} .蓝色.btn _ green { width:99px高度：38 px线高：32 pxmargin :0 4pxborder : none display :内嵌块；文本对齐：居中；font-size :14 pxcolor:#fff！重要；文字-阴影：1 px 1px 1px # 277 c9b背景： URL(图片/按钮。png)不重复} .BTN _绿色{背景：网址(图片/按钮。巴布亚新几内亚)否-右上方重复；文本-阴影：1 px 1px 1px # 498917} .隐藏{display:none}这样你在预览index.html时会发现在页面的正下方有一个摄像头按钮，默认是折叠的。

接下来我们要做的是，使用jQuery实现：通过单击页面正下方摄像头按钮，调用摄像头组件，并且完成拍照、取消和上传所需的动作。

jQuery

这一切的交互动作所需的射流研究…我们都写在script.js文件中。首先，我们需要加载摄像头组件网络摄像头。js，关于网络摄像头的调用，可以看下本站文章：Javascript PHP实现在线拍照功能。调用方法如下：

script . js-Part 1 $(function(){ camera . set _ swf _ URL(' js/camera . swf ')；//加载flash摄像机组件camera . set _ API _ URL(' upload . PHP ')的路径；//上传照片的PHP后端处理文件网络摄像头. set _ quality(80)；//设置画质网络摄像头. set _ shutter _ sound (true，‘js/shutter . MP3’)；//设置拍照声音，拍照时会发出“咔嚓”声。var cam=$(' #网络摄像头')；Cam.html(网络摄像头. get _ html (cam.width()、cam . height())//在#网络摄像头中加载摄像头组件)；此时看不到相机加载效果，因为#相机默认是折叠的。继续在script.js中添加以下代码：

script . js-Part 2var camera=$(' # camera ')；显示的=false$('#cam ')。单击(function(){ if(如图所示){ camera . animate({ bottom :-466 })；} else { camera . animate({ bottom :-5 })；}显示=！显示；});当您点按页面底部的相机按钮时，默认折叠的相机区域将向上扩展。此时，如果您的机器配备了摄像机，摄像机组件将被加载以进行摄像机拍摄。

接下来，点击“拍照”完成拍照功能，点击“取消”取消刚刚拍摄的照片，点击“上传”将拍摄的照片上传到服务器。

Script.js-Part 3//给$(“# BTN _ shot”)拍张照。单击(函数(){网络摄像头. freeze()；//冻结网络摄像头，摄像头停止工作$(“# shot”)。hide()；//隐藏照片按钮$(“#上传”)。show()；//显示取消和上传按钮返回false});//取消照片$ ('# BTN _取消')。点击(功能(){网络摄像头。reset()；//重置网络摄像头，摄像头再次工作$(' # shot ')。show()；//显示照片按钮$(“#上传”)。hide()；//隐藏取消和上传按钮返回false});//上传照片$ ('# BTN _上传')。单击(功能(){网络摄像头。上传()；//上传网络摄像头. reset()；//重置网络摄像头，摄像头再次工作$(' # shot ')。show()；//显示照片按钮$(“#上传”)。hide()；//隐藏取消和上传按钮返回false});点击“上传”按钮后，拍摄的照片会被提交到后台PHP进行处理，PHP会对照片进行命名和保存。请看PHP如何操作上传照片。

服务器端编程语言（Professional Hypertext Preprocessor的缩写）

upload.php做的是：获取上传的照片，命名，判断是否合法，生成缩略图，保存，写入数据库，将JSON信息返回前端。

$ folder=' uploads/'；//上传照片保存路径$ filename=date ('ymdhis ')。兰德()。jpg '；//命名照片$original=$folder。$文件名；$ input=file _ get _ contents(' PHP ://input ')；if(MD5($ input)=' 7d 4d F9 cc 423720 B7 f1 F3 d 672 b 89362 be '){ exit；//如果上传的照片为空，终止程序} $ result=file _ put _ contents($ original，$ input)；if(！$ result){无法写入echo“{ error }”:1、“message”:“文件目录”；}';退出；} $ info=getimagesize($ original)；if($info['mime']！='image/jpeg'){ //如果类型不是图片，删除unlink($ original)；退出；}//生成缩略图$ origin image=imagecreatefrom JPEG($ origin)；$ Newimage=imagecreatetrue color(154，110)；//缩略图大小为154 x110 imagecopy sampled($ new image，$ origimage，0，0，154，110，520，370)；imagejpeg($newImage，' uploads/small_ '。$ filename)；//写入数据库include _ once(' connect . PHP ')；$ time=MK time()；$sql='插入photobooth (pic，uploadtime)值(' $filename '，' $ time ')'；$ RES=MySQL _ query($ SQL)；If($res){ //输出JSON信息回显' status ' :1 '，消息' : '成功！' filename': ' '。$filename。'}';}else{ echo '{错误' :1，消息' : '抱歉，出了点问题。}';}

uploading上传完照片后，最终会将json格式的数据返回给前端摄像头组件网络摄像头进行调用。现在我们回到script.js

jQuery

网络摄像头通过set_hook方法在后台捕获php返回的信息。完成意味着上传完成，一个错误意味着出错。

第4部分

网络摄像头。set_hook('onComplete '，函数(消息){消息=$ .parseJSON(msg)；//解析JSON if(msg。错误){警报(消息。消息)；} else { var pic=' a rel=' group ' href=' uploads/' msg。文件名“img src=”http :上传/small _”消息。文件名' '/a '；$(' #照片')。prepend(pic)；//将获取的照片信息插入到index.html的#照片里initFancyBox()；//调用fancybox插件} });网络摄像头。set_hook('onError '，函数{ cam。html(e)；});//调用fancybox函数initFancyBox(){ $('a[rel=group]').花式方块({ ' transitionIn ' : ' elastic '，' transitionOut' : 'elastic '，' cyclic ' : true })；} 说明一下，上传成功后，所拍的照片会通过以上射流研究…代码动态的插入到元素#照片里，并且同时调用fancybox插件。这时，点击刚刚上传的照片，会呈现fancybox弹出层效果。注意动态生成的元素必须通过以上代码中的initFancyBox()函数来调用fancybox，而不能直接通过fancybox()来调用，否则将不会有弹出层效果。

接下来，script.js还需要做一件事就是：动态载入最新的照片，展示在页面上，我们通过jquery的. getJSON()方法来完成创建交互式、快速动态网页应用的网页开发技术请求。

第5部分

函数loadpic(){ $ .getJSON('getpic.php '，函数(json){ if(json){ $).每个(json，函数（索引，数组){ //循环json数据var pic=' a rel=' group ' href=' uploads/' array[' pic ']' ' img src=' http : uploads/small _ ' array[' pic ']' '/a '；$(' #照片')。prepend(pic)；});} initFancyBox()；//调用fancybox插件});} load pic()；

函数loadpic()向服务器getpic.php发送得到请求，并将返回的json数据进行解析，将照片信息动态插入到元素#照片下，并调用fancybox插件，然后，别忘了在页面载入后调用loadpic()。

服务器端编程语言(专业超文本预处理器的缩写)

最后，由后台getpic.php来获取数据库中的上传图片并且返回json给前端。

include _ once(' connect。PHP’)；//连接数据库//查询数据表中最新的50条记录$query=mysql_query('按编号从摄影亭订单中选择pic desc限额50 ');while($ row=MySQL _ fetch _ array($ query)){ $ arr[]=array(' pic '=$ row[' pic '])；} //输出json数据echo JSON _ encode($ arr)；最后，附上数据摄影亭结构：

CREATE TABLE ` photobooth `(` id ' int(11)NOT NULL auto _ increment，` pic ' varchar(50)NOT NULL，` uploadtime ' int(10)NOT NULL，PRIMARY KEY(` id `))ENGINE=MyISAM DEFAULT CHARSET=utf8；