이 기사에서는 예제를 사용하여 PHP 및 Mysql과 결합된 jQuery를 사용하여 웹 버전의 온라인 사진, 업로드 및 디스플레이 탐색 기능을 구현하는 방법을 설명하므로 이 기사 전반에 걸쳐 사용됩니다. 이 기사를 읽는 독자는 jQuery 플러그인 사용법과 javscript 관련 지식은 물론 PHP 및 Mysql 관련 지식에 대해서도 잘 알고 있어야 합니다.
이 기사의 예는 helloweba.com의 두 기사를 기반으로 합니다. 하나는 온라인 사진용입니다. Javascript+PHP는 온라인 사진 기능을 구현하고, 다른 하나는 사진 검색용입니다: Fancybox Rich Pop 레이어 효과. 온라인 사진과 Fancybox에 대해 잘 모르신다면 위의 두 글을 먼저 참고하시면 됩니다.
먼저 최신 업로드된 사진을 표시하기 위해 메인 페이지 index.html을 만들어야 합니다. 최신 사진을 가져오기 위해 jQuery를 사용하므로 이는 PHP 태그가 없는 HTML 페이지이기도 합니다. 사진을 찍고 상호 작용을 업로드하는 데 필요한 HTML 구조를 포함하는 페이지를 만듭니다.
<p id="main" style="width:90%">
<p id="photos"></p>
<p id="camera">
<p id="cam"></p>
<p id="webcam"></p>
<p id="buttons">
<p class="button_pane" id="shoot">
<a id="btn_shoot" href="" class="btn_blue">拍照</a>
</p>
<p class="button_pane hidden" id="upload">
<a id="btn_cancel" href="" class="btn_blue">取消</a> <a id="btn_upload" href=""
class="btn_green">上传</a>
</p>
</p>
</p>
</p>위의 HTML 코드를 본문에 추가했습니다. 여기서 #photos는 최신 업로드된 사진을 로드하고 표시하는 데 사용됩니다. #camera는 카메라 플래시 구성 요소 웹캠 호출을 포함하여 카메라 모듈을 로드하는 데 사용됩니다. 사진을 찍고 업로드하는 버튼도 있습니다.
또한 이 예제 조합의 다양한 작업에 필요한 jQuery 라이브러리, fancybox 플러그인, 플래시 카메라 구성 요소인 웹캠.js 및 script.js를 포함하여 index.html에 필요한 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를 사용하여 그림자, 둥근 모서리 및 투명도 효과를 구현합니다. 다음을 참조하세요.
#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를 사용하여 구현하는 것입니다. 페이지 바로 아래에 있는 카메라 버튼을 클릭하고 카메라 구성 요소를 호출하고 사진 촬영, 취소 및 업로드에 필요한 작업을 완료합니다.
우리는 script.js 파일에 이러한 대화형 작업에 필요한 모든 js를 작성합니다. 먼저 카메라 구성요소인 웹캠.js를 로드해야 합니다. 웹캠 호출과 관련하여 다음 문서를 읽어보세요. 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-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是如何操作上传照片的。
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。
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()。
最后，由后台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+Mysql을 사용하여 온라인 촬영 및 사진 검색 실현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
