jQuery+PHP+MySQL在线拍照上传浏览完整示例

在线拍照系统概述

本文通过具体示例，详细阐述了如何结合jQuery、PHP与MySQL技术，在Web端实现在线拍照、图片上传及浏览展示的功能。整个流程贯穿了Ajax交互技术，因此建议读者具备扎实的jQuery及其插件使用经验，并熟悉JavaScript、PHP和MySQL的相关知识。

在线拍照系统概述

点击此处下载源码

HTML结构

HTML页面结构搭建

首先，需要创建一个主页面index.html用于展示最新上传的照片列表。由于主要依赖jQuery动态获取数据，该页面无需包含PHP标签。同时，还需构建用于拍照交互和上传操作的HTML基础结构。


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

在body标签内添加上述HTML代码，其中div#photos用于加载并展示最新上传的照片；div#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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/ 
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>

CSS3前端样式设计

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前端交互逻辑

jQuery交互逻辑

所有交互所需的JavaScript代码均编写在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中载入摄像组件 
 );

此时，界面上尚未显示摄像头效果，因为div#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后端处理与存储

PHP后端处理

upload.php的主要功能包括：获取上传的照片文件、进行命名、判断是否为合法图片、生成缩略图、保存文件至服务器、将信息写入数据库，最后向前端返回JSON格式的数据。


$folder = 'uploads/'; //上传照片保存路径 
$filename = date('YmdHis').rand().'.jpg'; //命名照片名称 
$original = $folder.$filename; 
$input = file_get_contents('php://input'); 
if(md5($input) == '7d4df9cc423720b7f1f3d672b89362be'){ 
exit; //如果上传的是空白的照片，则终止程序 
} 
$result = file_put_contents($original, $input); 
if (!$result) { 
echo '{"error":1,"message":"文件目录不可写";}'; 
exit; 
} 
$info = getimagesize($original); 
if($info['mime'] != 'image/jpeg'){ //如果类型不是图片，则删除 
unlink($original); 
exit; 
} 
//生成缩略图 
$origImage = imagecreatefromjpeg($original); 
$newImage = imagecreatetruecolor(154,110); //缩略图尺寸154x110 
imagecopyresampled($newImage,$origImage,0,0,0,0,154,110,520,370); 
imagejpeg($newImage,'uploads/small_'.$filename); 
//写入数据库 
include_once('connect.php'); 
$time = mktime(); 
$sql = "insert into photobooth (pic,uploadtime)values('$filename','$time')"; 
$res = mysql_query($sql); 
if($res){ 
//输出JSON信息 
echo '{"status":1,"message":"Success!","filename":"'.$filename.'"}'; 
}else{ 
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


webcam.set_hook('onComplete', function(msg){ 
msg = $.parseJSON(msg); //解析json 
if(msg.error){ 
alert(msg.message); 
} 
else { 
var pic = '<a rel="group" href="uploads/'+msg.filename+'"><img src="uploads/small_'+ 
msg.filename+'"></a>'; 
$("#photos").prepend(pic); //将获取的照片信息插入到index.html的#photo里 
initFancyBox(); //调用fancybox插件 
} 
}); 
webcam.set_hook('onError',function(e){ 
cam.html(e); 
}); 
//调用fancybox 
function initFancyBox(){ 
$("a[rel=group]").fancybox({ 
'transitionIn' : 'elastic', 
'transitionOut' : 'elastic', 
'cyclic' : true 
}); 
}

需要说明的是，上传成功后，拍摄的照片会通过上述JS代码动态插入到元素#photos中，并同时调用fancybox插件。此时，单击刚刚上传的照片，即可呈现fancybox的弹出层效果。请注意，动态生成的元素必须通过initFancyBox()函数来初始化fancybox，而不能直接调用fancybox()，否则将无法显示弹出层效果。

接下来，script.js还需执行另一项任务：动态载入最新照片并在页面上展示。我们通过jQuery的.getJSON()方法来完成Ajax请求。

script.js-Part 5


function loadpic(){ 
 $.getJSON("getpic.php",function(json){ 
 if(json){ 
  $.each(json,function(index,array){ //循环json数据 
  var pic = '<a rel="group" href="uploads/'+array['pic']+'"> 
  <img src="uploads/small_'+array['pic']+'"></a>'; 
  $("#photos").prepend(pic); 
  }); 
 } 
 initFancyBox(); //调用fancybox插件 
 }); 
}

loadpic();

函数loadpic()向服务器发送getpic.php的GET请求，解析返回的JSON数据，将照片信息动态插入到元素#photos下，并调用fancybox插件。此外，别忘了在页面加载完成后调用loadpic()函数。

动态加载与浏览功能

PHP获取照片接口

最后，由后台getpic.php负责从数据库中获取已上传的图片，并将结果以JSON格式返回给前端。


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

最后，附上数据库photobooth表的结构定义：


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;

基于jQuery与PHP实现Web端在线拍照及浏览功能

在线拍照系统概述

HTML页面结构搭建

CSS3前端样式设计

jQuery前端交互逻辑

PHP后端处理与存储

动态加载与浏览功能

实用工具推荐