本文用示例讲述了如何使用jQuery与PHP及Mysql结合,实现WEB版在线拍照、上传、显示浏览的功能,ajax交互技术贯穿本文始末,所以本文的读者要求具备相当熟悉jQuery及其插件使用和javscript相关知识,具备PHP和Mysql相关知识。

本文示例建立在本站helloweba.com两篇文章之上,一篇是用于在线拍照的:Javascript+PHP实现在线拍照功能,另一篇是用于浏览照片的:Fancybox丰富的弹出层效果。如果您对在线拍照和Fancybox不大了解,可以先参照以上两篇文章。

HTML

首先,我们要建立一个主页面index.html来展示最新上传的照片,我们使用jQuery来获取最新的照片,所以这是一个HTML页面,不需要PHP标签,当然还要建立一个包括用来拍照和上传交互所需的HTML结构。

<p id="main" style="width:90%"> <p id="photos"></p> <p id="camera"> <p id="cam"></p> <p id="webcam"></p> <p id="buttons"> <p class="button_pane" id="shoot"> <a id="btn_shoot" href="" class="btn_blue">拍照</a> </p> <p class="button_pane hidden" id="upload"> <a id="btn_cancel" href="" class="btn_blue">取消</a> <a id="btn_upload" href="" class="btn_green">上传</a> </p> </p> </p> </p>

我们在body间加入了以上html代码,其中#photos用来加载展示最新上传的照片;#camera用于加载摄像模块,包括调用摄像flash组件webcam,以及拍照和上传等按钮。

此外,我们还需要在index.html加载必须的js文件,包括jQuery库,fancybox插件,flash摄像组件:webcam.js以及本示例组合各种操作所需的script.js。

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" /> <script type="text/javascript" src=" jquery.min.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> <script type="text/javascript" src="js/webcam.js"></script> <script type="text/javascript" src="js/script.js"></script>CSS

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

#photos{width:80%; margin:40px auto} #photos:hover a{opacity:0.5} #photos a:hover{opacity:1} #camera{width:598px; height:525px; position:fixed; bottom:-466px; left:50%; margin-left:-300px; border:1px solid #f0f0f0; background:url(images/cam_bg.jpg) repeat-y; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; -moz-box-shadow: 0 0 4px rgba(0,0,0,0.6); -webkit-box-shadow:0 0 4px rgba(0,0,0,0.6); box-shadow: 0 0 4px rgba(0,0,0,0.6);} #cam{width:100%; height:66px; display:block; position:absolute; top:0; left:0; background: url(images/cam.png) no-repeat center center; cursor:pointer} #webcam{width:520px; height:370px; margin:66px auto 22px; line-height:360px; background:#ccc; color:#666; text-align:center} .button_pane{text-align:center;} .btn_blue,.btn_green{width:99px; height:38px; line-height:32px; margin:0 4px; border:none; display:inline-block; text-align:center; font-size:14px; color:#fff !important; text-shadow:1px 1px 1px #277c9b; background:url(images/buttons.png) no-repeat} .btn_green{background:url(images/buttons.png) no-repeat right top; text-shadow:1px 1px 1px #498917;} .hidden{display:none}

这样你在预览index.html时会发现在页面的正下方有一个摄像头按钮,默认是折叠的。

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

jQuery

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

script.js-Part 1

$(function(){ webcam.set_swf_url('js/webcam.swf'); //载入flash摄像组件的路径 webcam.set_api_url('upload.php'); // 上传照片的PHP后端处理文件 webcam.set_quality(80); // 设置图像质量 webcam.set_shutter_sound(true, 'js/shutter.mp3'); //设置拍照声音,拍照时会发出“咔嚓”声 var cam = $("#webcam"); cam.html( webcam.get_html(cam.width(), cam.height()) //在#webcam中载入摄像组件 );

这时,还看不到载入摄像头效果,因为#camera默认是折叠的,继续在script.js中加入以下代码:

script.js-Part 2

var camera = $("#camera"); var shown = false; $('#cam').click(function(){ if(shown){ camera.animate({ bottom:-466 }); }else { camera.animate({ bottom:-5 }); } shown = !shown; });

当单击页面正下方的摄像头按钮时,默认折叠的摄像区会向上展开,这时如果您的机器安装有摄像头,则会加载摄像组件进行摄像了。

接下来,通过单击“拍照”完成拍照功能,单击“取消”则取消刚刚所拍的照片,单击“上传”则将所拍的照片上传到服务器。

script.js-Part 3

//拍照 $("#btn_shoot").click(function(){ webcam.freeze(); //冻结webcam,摄像头停止工作 $("#shoot").hide(); //隐藏拍照按钮 $("#upload").show(); //显示取消和上传按钮 return false; }); //取消拍照 $('#btn_cancel').click(function(){ webcam.reset(); //重置webcam,摄像头重新工作 $("#shoot").show(); //显示拍照按钮 $("#upload").hide(); //隐藏取消和上传按钮 return false; }); //上传照片 $('#btn_upload').click(function(){ webcam.upload(); //上传 webcam.reset();//重置webcam,摄像头重新工作 $("#shoot").show();//显示拍照按钮 $("#upload").hide(); //隐藏取消和上传按钮 return false; });

点击“上传”按钮后,所拍的照片会提交给后台PHP处理,PHP将照片进行命名和存盘入库操作,请看PHP是如何操作上传照片的。

PHP