jQuery+PHP+Mysql在线拍照和在线浏览照片

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

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

HTML

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

  1. <div id="main" style="width:90%"> 
  2.    <div id="photos"></div> 
  3.     
  4.    <div id="camera"> 
  5.        <div id="cam"></div> 
  6.        <div id="webcam"></div> 
  7.        <div id="buttons"> 
  8.           <div class="button_pane" id="shoot"> 
  9.             <a id="btn_shoot" href="" class="btn_blue">拍照</a> 
  10.           </div> 
  11.           <div class="button_pane hidden" id="upload"> 
  12.             <a id="btn_cancel" href="" class="btn_blue">取消</a> <a id="btn_upload" href=""  
  13.             class="btn_green">上传</a> 
  14.           </div> 
  15.        </div> 
  16.    </div> 
  17. </div> 

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

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

  1. <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" /> 
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/ 
  3. jquery.min.js"></script> 
  4. <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
  5. <script type="text/javascript" src="js/webcam.js"></script> 
  6. <script type="text/javascript" src="js/script.js"></script> 

CSS

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

  1. #photos{width:80%margin:40px auto
  2. #photos:hover a{opacity:0.5
  3. #photos a:hover{opacity:1
  4.  
  5. #camera{width:598pxheight:525pxposition:fixed; bottom:-466px; left:50%margin-left:-300px
  6. border:1px solid #f0f0f0background:url(images/cam_bg.jpg) repeat-y; -moz-border-radius: 
  7. 4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; -moz-box-shadow: 
  8. 0 0 4px rgba(0,0,0,0.6); -webkit-box-shadow:0 0 4px rgba(0,0,0,0.6); box-shadow: 
  9. 0 0 4px rgba(0,0,0,0.6);} 
  10. #cam{width:100%height:66pxdisplay:blockposition:absolute; top:0; left:0background
  11. url(images/cam.png) no-repeat center centercursor:pointer
  12. #webcam{width:520pxheight:370pxmargin:66px auto 22pxline-height:360pxbackground:#ccc;  
  13. color:#666text-align:center
  14. .button_pane{text-align:center;} 
  15. .btn_blue,.btn_green{width:99pxheight:38pxline-height:32pxmargin:0 4pxborder:none;  
  16. display:inline-blocktext-align:centerfont-size:14pxcolor:#fff !important;  
  17. text-shadow:1px 1px 1px #277c9bbackground:url(images/buttons.png) no-repeat
  18. .btn_green{background:url(images/buttons.png) no-repeat right top
  19. text-shadow:1px 1px 1px #498917;} 
  20. .hidden{display:none

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

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

jQuery

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

script.js-Part 1

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

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

script.js-Part 2

  1. var camera = $("#camera"); 
  2. var shown = false
  3. $('#cam').click(function(){ 
  4.          
  5.     if(shown){ 
  6.         camera.animate({ 
  7.             bottom:-466 
  8.         }); 
  9.     }else { 
  10.         camera.animate({ 
  11.             bottom:-5 
  12.         }); 
  13.     } 
  14.          
  15.     shown = !shown; 
  16. }); 

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

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

script.js-Part 3

  1. //拍照 
  2. $("#btn_shoot").click(function(){ 
  3.     webcam.freeze();  //冻结webcam,摄像头停止工作 
  4.     $("#shoot").hide(); //隐藏拍照按钮 
  5.     $("#upload").show(); //显示取消和上传按钮 
  6.     return false
  7. }); 
  8.  
  9. //取消拍照 
  10. $('#btn_cancel').click(function(){ 
  11.     webcam.reset();  //重置webcam,摄像头重新工作 
  12.     $("#shoot").show(); //显示拍照按钮 
  13.     $("#upload").hide(); //隐藏取消和上传按钮 
  14.     return false
  15. }); 
  16.  
  17. //上传照片 
  18. $('#btn_upload').click(function(){ 
  19.     webcam.upload(); //上传 
  20.     webcam.reset();//重置webcam,摄像头重新工作 
  21.     $("#shoot").show();//显示拍照按钮 
  22.     $("#upload").hide(); //隐藏取消和上传按钮 
  23.     return false
  24. }); 

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

PHP

upload.php所做的事情有:获取上传的照片,命名,判断是否合法的图片,生成缩略图,存盘,写入数据库,返回JSON信息给前端。

  1. $folder = 'uploads/'//上传照片保存路径 
  2. $filename = date('YmdHis').rand().'.jpg';  //命名照片名称 
  3. $original = $folder.$filename
  4.  
  5. $input = file_get_contents('php://input'); 
  6. if(md5($input) == '7d4df9cc423720b7f1f3d672b89362be'){ 
  7.     exit;   //如果上传的是空白的照片,则终止程序 
  8. $result = file_put_contents($original$input); 
  9. if (!$result) { 
  10.     echo '{"error":1,"message":"文件目录不可写";}'
  11.     exit
  12.  
  13. $info = getimagesize($original); 
  14. if($info['mime'] != 'image/jpeg'){ //如果类型不是图片,则删除 
  15.     unlink($original); 
  16.     exit
  17.  
  18.  
  19. //生成缩略图 
  20. $origImage = imagecreatefromjpeg($original); 
  21. $newImage = imagecreatetruecolor(154,110);  //缩略图尺寸154x110 
  22. imagecopyresampled($newImage,$origImage,0,0,0,0,154,110,520,370);  
  23. imagejpeg($newImage,'uploads/small_'.$filename); 
  24.  
  25. //写入数据库 
  26. include_once('connect.php'); 
  27. $time = mktime(); 
  28. $sql = "insert into photobooth (pic,uploadtime)values('$filename','$time')"
  29. $res = mysql_query($sql); 
  30. if($res){ 
  31.     //输出JSON信息 
  32.     echo '{"status":1,"message":"Success!","filename":"'.$filename.'"}'
  33. }else
  34.     echo '{"error":1,"message":"Sorry,something goes wrong.";}'

upload.php完成照片上传后,最终会返回json格式的数据给前端摄像组件webcam调用,现在我们回到script.js。

jQuery

webcam通过set_hook方法捕捉到后台php返回信息,onComplete表示上传完成,onError则表示错做出错了。

script.js-Part 4

  1. webcam.set_hook('onComplete'function(msg){ 
  2.     msg = $.parseJSON(msg); //解析json 
  3.          
  4.     if(msg.error){ 
  5.         alert(msg.message); 
  6.     } 
  7.     else { 
  8.         var pic = '<a rel="group" href="uploads/'+msg.filename+'"><img src="uploads/small_'
  9.         msg.filename+'"></a>'
  10.         $("#photos").prepend(pic); //将获取的照片信息插入到index.html的#photo里 
  11.         initFancyBox();  //调用fancybox插件 
  12.     } 
  13. }); 
  14.  
  15. webcam.set_hook('onError',function(e){ 
  16.     cam.html(e); 
  17. }); 
  18.  
  19. //调用fancybox 
  20. function initFancyBox(){ 
  21.     $("a[rel=group]").fancybox({ 
  22.         'transitionIn'  : 'elastic'
  23.         'transitionOut' : 'elastic'
  24.         'cyclic'        : true 
  25.     }); 

说明一下,上传成功后,所拍的照片会通过以上js代码动态的插入到元素#photos里,并且同时调用fancybox插件。这时,点击刚刚上传的照片,会呈现fancybox弹出层效果。注意动态生成的元素必须通过以上代码中的initFancyBox()函数来调用fancybox,而不能直接通过fancybox()来调用,否则将不会有弹出层效果。

接下来,script.js还需要做一件事就是:动态载入最新的照片,展示在页面上,我们通过jquery的.getJSON()方法来完成ajax请求。

script.js-Part 5

  1. function loadpic(){ 
  2.     $.getJSON("getpic.php",function(json){ 
  3.         if(json){ 
  4.            $.each(json,function(index,array){ //循环json数据 
  5.                var pic = '<a rel="group" href="uploads/'+array['pic']+'"> 
  6.                <img src="uploads/small_'+array['pic']+'"></a>'; 
  7.                $("#photos").prepend(pic);  
  8.            });  
  9.         } 
  10.         initFancyBox(); //调用fancybox插件 
  11.     }); 
  12.  
  13. loadpic(); 

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

PHP

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

  1. include_once("connect.php"); //连接数据库 
  2. //查询数据表中最新的50条记录 
  3. $query = mysql_query("select pic from photobooth order by id desc limit 50"); 
  4. while($row=mysql_fetch_array($query)){ 
  5.     $arr[] = array
  6.        'pic' => $row['pic'
  7.     ); 
  8. //输出json数据 
  9. echo json_encode($arr); 

最后,附上数据photobooth结构

  1. CREATE TABLE `photobooth` ( 
  2.   `id` int(11) NOT NULL auto_increment, 
  3.   `pic` varchar(50) NOT NULL
  4.   `uploadtime` int(10) NOT NULL
  5.   PRIMARY KEY  (`id`) 
  6. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 

转载请注明:代码家园 » jQuery+PHP+Mysql在线拍照和在线浏览照片

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)