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

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

HTML

首先,我们要建立一个主页面index.html来展示最新上传的照片,我们使用jQuery来获取最新的照片,所以这是一个HTML页面,不需要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代码,其中#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="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>

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

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;
转载:https://www.helloweba.net/javascript/179.html

jQuery+PHP+Mysql在线拍照和在线浏览照片的更多相关文章

  1. 使用jQuery+PHP+Mysql实现抽奖程序

    抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的.本文将采用实例讲解如何利用jQuery+PHP+Mysql实现类似电视中常见的一个简单的抽奖程序. 查看演示 本例中的抽奖程序要 ...

  2. .Net在线付款---Paypal在线付款开发过程

    原文:.Net在线付款---Paypal在线付款开发过程 最近在做一个Web订单项目,项目有一个需求就是集成Paypal与Paydollar在线付款,一开始看到这个需求也是傻了眼,因为以前从来没有做过 ...

  3. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  4. .Net在线付款---Paydollar在线付款开发过程

    原文:.Net在线付款---Paydollar在线付款开发过程 最近在做一个Web订单项目,项目有一个需求就是集成Paypal与Paydollar在线付款,一开始看到这个需求也是傻了眼,因为以前从来没 ...

  5. 在线学习和在线凸优化(online learning and online convex optimization)—基础介绍1

    开启一个在线学习和在线凸优化框架专题学习: 1.首先介绍在线学习的相关概念 在线学习是在一系列连续的回合(rounds)中进行的: 在回合,学习机(learner)被给一个question:(一个向量 ...

  6. XnViewer管理浏览照片、图片

    有时候拍完照片想要浏览照片.浏览照片的时候想做一些标记,这个时候就需要使用照片管理器: 之前一直使用谷歌的picasa(不更新了),adobe也有个管理器(比较大):这里主要推荐一个: https:/ ...

  7. <<< jquery简介、开头语法、在线开发手册

    简介 jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多).jQuery在2006年1月由美国人John Resig在纽约的b ...

  8. jQuery网页右侧固定层显示隐藏在线qq客服代码

    CSS代码: @charset "utf-8"; ;;} html,body{font-size:12px;font-family:"微软雅黑";outline ...

  9. MySQL使用pt-online-change-schema工具在线修改1.6亿级数据表结构

    摘  要:本文阐述了MySQL DDL 的问题现状.pt-online-schema-change的工作原理,并实际利用pt-online-schema-change工具在线修改生产环境下1.6亿级数 ...

随机推荐

  1. python实现文件夹的排序

    我的github地址. 代码: # -*- coding: utf-8 -*- __author__ = "YuDian" ''' v1.0: 2018/3/19 21:39 完成 ...

  2. VIM - 标准模式下简单操作

    1. 概述 标准模式下, 简单操作 移动 删除 复制粘贴 收益 熟练后, 编辑文本基本不需要鼠标操作了 思路 只讲最基本的, 避免初学时的混淆 把基本操作归类了, 方便理解 2. 准备 一篇篇幅较长的 ...

  3. 20155317 王新玮 2016-2017-2 《Java程序设计》第5周学习总结

    20155317 王新玮 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 异常处理 & Collection与Map 异常继承架构 错误的对象继承ja ...

  4. 20155318 《Java程序设计》实验一(Java开发环境的熟悉)实验报告

    20155318 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 一.实验内容及步骤 (一)命令行下Java程序开发 步骤一(新建文件夹): 打开windows下的cmd → ...

  5. 20145209 2016-2017-2 《Java程序设计》课程总结

    20145209 2016-2017-2 <Java程序设计>课程总结 每周作业链接汇总 预备作业01 http://www.cnblogs.com/liuyiyang/p/6194319 ...

  6. 15、Java并发编程:Callable、Future和FutureTask

    Java并发编程:Callable.Future和FutureTask 在前面的文章中我们讲述了创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一 ...

  7. Java的安装与配置

    安装JAVA 下载JAVA JDK安装包,JDK是Java Development Kit的缩写,即开发工具包,里面包含了平时用户用到的JRE,也就是Java Runtime Enviroment运行 ...

  8. C++11的左值引用与右值引用总结

    概念 在C++11中,区别表达式是左值或右值可以做这样的总结:当一个对象被用作右值的时候,用的是对象的值(内容):当对象被用作左值的时候,用的是对象的身份(在内存中的位置).左值有持久的状态,而右值要 ...

  9. Openstack 10 云环境安装

    概述 资源规划 Undercloud Installation Overcloud Installation Trouble Shooting 附录 本指南介绍了如何使用 Red Hat OpenSt ...

  10. Leetcode_2. Add_Two_Number

    2. Add_Two_Number 用两个非空链表分别表示两个非负整数,链表的节点表示数字的位,链表头表示数字的低位,链表尾表示数字高位.求两个链表所表示数字的和. 比如: Input: (2 -&g ...