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
upload.php所做的事情有：获取上传的照片，命名，判断是否合法的图片，生成缩略图，存盘，写入数据库，返回JSON信息给前端。
$folder = 'https://www.jb51.net/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,'https://www.jb51.net/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 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 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给前端。