基于jQuery与PHP实现在线拍照、上传及浏览相册
介绍如何结合 jQuery、PHP 和 MySQL 实现 Web 端的在线拍照与照片浏览功能。涵盖前端摄像头调用、Ajax 数据交互以及后端图片存储与数据库写入的完整实现流程。
核心逻辑与架构
实现 Web 版在线拍照的核心在于将摄像头的实时流捕获为静态图像，并通过 AJAX 技术将其传输至 PHP 后端。后端负责接收二进制数据、验证图片格式、生成交缩略图并入库，最后向前端返回状态以更新界面。整个过程涉及以下关键技术栈：
- 前端：HTML5 结构、CSS3 样式布局、jQuery 库及其插件（fancybox 用于灯箱效果）。
- 摄像头交互：基于 Flash 或原生 JS 的 webcam 组件库。
- 后端：PHP 处理文件流读取、GD 图像处理库操作。
- 数据库：MySQL 记录照片元数据。
准备条件与环境配置
在开始编码前，请确保环境满足以下条件：
- 服务器环境：需要支持 PHP 且开启 GD 扩展（用于处理图片）和 MySQL 服务的 Web 服务器（如 Apache/Nginx + PHP）。由于示例使用了 Flash 技术的 webcam 库，需注意现代浏览器对 Flash 的支持已停止，此处主要作为原理演示，实际生产环境建议采用 HTML5 getUserMedia API。
- 目录权限：服务器上需有一个可写的目录（例如
uploads/），用于存储用户上传的图片，并确保其拥有写权限。 - 依赖资源：下载 jQuery 库、webcam.js/swf 组件以及 fancybox 插件。
第1步：构建前端页面结构 (HTML & CSS)
首先建立主页面 index.html。该页面不需要包含 PHP 标签，主要用于展示照片网格和隐藏式的拍照控制面板。
1.1 HTML 结构搭建
引入必要的 CSS 和 JS 文件，并构建包含照片显示区 #photos 和拍照控制区 #camera 的 DOM 结构。
<!-- 引入必要资源 -->
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" />
<script src="jquery.min.js"></script>
<script src="fancybox/jquery.fancybox.pack.js"></script>
<script src="js/webcam.js"></script>
<script src="js/script.js"></script>
<div id="main">
<!-- 照片展示区域 -->
<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 href="#" class="btn_blue">拍照</a>
</div>
<!-- 上传/取消按钮组（初始隐藏） -->
<div class="button_pane hidden" id="upload">
<a href="#" class="btn_blue">取消</a>
<a href="#" class="btn_green">上传</a>
</div>
</div>
</div>
</div>1.2 样式设计 (CSS)
使用 CSS3 实现阴影、圆角及动画效果。注意将 #camera 设置为固定定位并初始隐藏在屏幕底部，点击时向上滑出。
#photos{width:80%; margin:40px auto}
#camera{
width:598px; height:525px; position:fixed; bottom:-466px; left:50%;
margin-left:-300px; border:1px solid #f0f0f0;
background-repeat:repeat-y; -moz-border-radius:4px 4px 0 0;
box-shadow:0 0 4px rgba(0,0,0,0.6);
}
.hidden{display:none}第2步：实现前端交互逻辑 (jQuery)
编写 script.js 来处理摄像头的初始化、拍照动作及数据提交。
2.1 初始化摄像头组件
配置 webcam 组件的路径、上传接口地址、图片质量及快门音效。
$(function(){
webcam.set_swf_url('js/webcam.swf'); // 组件路径
webcam.set_api_url('upload.php'); // 后端处理地址
webcam.set_quality(80); // 图像质量 1-100
var cam = $("#webcam");
cam.html(webcam.get_html(cam.width(), cam.height())); // 渲染摄像头画面
});2.2 摄像头面板切换逻辑
监听 #cam 点击事件，通过 jQuery animate 实现面板的上滑展开与下滑隐藏。
var shown = false;
$('#cam').click(function(){
if(shown) {
camera.animate({bottom:-466}); // 隐藏
} else {
camera.animate({bottom:-5}); // 显示
}
shown = !shown;
});2.3 拍照与上传动作
定义三个按钮的点击行为：freeze 冻结画面并切换按钮状态，reset 重置摄像头，upload 触发异步上传。
// 拍照：冻结画面，显示上传/取消按钮
$("#btn_shoot").click(function(){
webcam.freeze();
$("#shoot").hide();
$("#upload").show();
});
// 取消：重置摄像头
$("#btn_cancel").click(function(){
webcam.reset();
$("#shoot").show();
$("#upload").hide();
});
// 上传：发送数据并重置摄像头
$("#btn_upload").click(function(){
webcam.upload();
webcam.reset();
$("#shoot").show();
$("#upload").hide();
});2.4 处理上传响应与展示
监听 onComplete 回调，解析后端返回的 JSON，将新图片插入页面头部并调用 Fancybox 灯箱插件。
webcam.set_hook('onComplete', function(msg){
msg = $.parseJSON(msg);
if(!msg.error){
var pic = '<a rel="group" href="uploads/'+msg.filename+'">
<img src="uploads/small_'+msg.filename+'"></a>';
$("#photos").prepend(pic);
initFancyBox(); // 必须重新绑定灯箱，因为元素是动态生成的
}
});第3步：开发后端处理脚本 (PHP)
后端主要包含两个脚本：upload.php 用于接收和处理图片，getpic.php 用于获取列表。
3.1 图片上传与存储 (upload.php)
从 php://input 读取原始二进制流，保存原图，并利用 GD 库生成缩略图，最后存入数据库。
$folder = 'uploads/';
$filename = date('YmdHis').rand().'.jpg';
$input = file_get_contents('php://input');
// 1. 简单空文件检查（可选md5校验）
$result = file_put_contents($folder.$filename, $input);
if (!$result) exit('{"error":1,"message":"Save failed";}');
// 2. 验证是否为合法 JPEG 图片
$info = getimagesize($folder.$filename);
if($info['mime'] != 'image/jpeg') {
unlink($folder.$filename);
exit('{"error":1,"message":"Not a valid image";}');
}
// 3. 生成缩略图
$origImage = imagecreatefromjpeg($folder.$filename);
$newImage = imagecreatetruecolor(154,110);
imagecopyresampled($newImage,$origImage,0,0,0,0,154,110,520,370);
imagejpeg($newImage,'uploads/small_'.$filename);
imagedestroy($origImage);
imagedestroy($newImage);
// 4. 存入数据库
include_once('connect.php');
$sql = "INSERT INTO photobooth (pic, uploadtime) VALUES ('$filename', '".time()."')";
mysql_query($sql);
echo '{"status":1,"message":"Success!","filename":"'.$filename.'"}';3.2 获取照片列表 (getpic.php)
查询数据库中最新的 N 条记录，并以 JSON 格式返回。
include_once("connect.php");
$query = mysql_query("SELECT pic FROM photobooth ORDER BY id DESC LIMIT 50");
$arr = array();
while($row=mysql_fetch_array($query)){
$arr[] = array('pic' => $row['pic']);
}
echo json_encode($arr);第4步：数据库结构设计
创建一个简单的 photobooth 表来存储照片文件名和上传时间戳。
CREATE TABLE `photobooth` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`pic` varchar(50) NOT NULL COMMENT '文件名',
`uploadtime` int(10) NOT NULL COMMENT '时间戳',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;完成判断与注意事项
当页面加载完成后，点击底部的摄像头图标即可展开拍摄界面。拍摄后点击“上传”，若成功，图片应立即出现在顶部并在 Fancybox 中可查看。同时，刷新页面应能加载历史上传的照片。
重要提醒：上述代码中的 mysql_query 函数在 PHP 7.0 及以上版本中已被废弃。在生产环境中，请务必替换为 mysqli 或 PDO 预处理语句以防止 SQL 注入。此外，Flash 技术已在绝大多数现代浏览器中被禁用，若要兼容 Chrome/Edge 等最新环境，需将前端采集部分重构为基于 HTML5 <video> 和 <canvas> 的方案。
简要总结
本方案通过经典的 jQuery Ajax + PHP File Upload 模式实现了完整的在线拍照流程。核心难点在于正确处理二进制流数据与前端 DOM 的动态渲染绑定。以上就是基于 jQuery 与 PHP 实现在线拍照、上传及浏览相册的详细内容，更多关于 Web 前端交互与后端文件处理的资料请关注本站其它相关文章！
免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。
