Use jQuery+PHP+Mysql to realize online shooting and browsing of photos

This article uses examples to describe how to use jQuery combined with PHP and Mysql to realize the functions of online photography, uploading, display and browsing of the WEB version, and ajax interaction Technology is used throughout this article, so readers of this article are required to be quite familiar with jQuery and its plug-in usage and javscript-related knowledge, as well as PHP and Mysql-related knowledge.

The example in this article is based on two articles on helloweba.com. One is for online photography: Javascript+PHP implements the online photography function, and the other is Is for browsing photos: Fancybox’s rich pop-up layer effects. If you don’t know much about online photography and Fancybox, you can refer to the above two articles first.

HTML

First, we need to create a main page index.html to display the latest uploaded photos. We use jQuery to get the latest photos, so this is an HTML page and does not require PHP. tags, and of course create an HTML structure that includes the HTML needed for taking photos and uploading interactions.

<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>

We added the above html code between the body, where #photos is used to load and display the latest uploaded photos; #camera is used to load the camera module, including Call the camera flash component webcam, as well as take photos and upload buttons.

In addition, we also need to load the necessary js files in index.html, including jQuery library, fancybox plug-in, flash camera component: webcam.js, and script.js required for various operations in this example combination.

<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

In order to present you with a very beautiful front-end interface, we use css3 to achieve some shadow, rounded corners and transparency effects, please see:

#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}

In this way, when you preview index.html, you will find a camera button right below the page, which is collapsed by default.

The next thing we have to do is to use jQuery to implement: by clicking the camera button just below the page, call the camera component, and complete the actions required to take pictures, cancel and upload.

jQuery

We write all the js required for these interactive actions in the script.js file. First, we need to load the camera component webcam.js. Regarding the call of webcam, you can read this article: Javascript+PHP implements online photo taking function. The calling method is as follows:

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中载入摄像组件 
    );

At this time, you cannot see the loading camera effect because #camera is collapsed by default. Continue to add it in script.js The following code:

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; 
});

When you click the camera button just below the page, the default collapsed camera area will expand upward. At this time, if your machine is installed Camera, the camera component will be loaded for recording.

Next, click "Photo" to complete the photo taking function, click "Cancel" to cancel the photo just taken, and click "Upload" to upload the photo taken to the server.

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 = &#39;<a rel="group" href="uploads/&#39;+msg.filename+&#39;"><img src="uploads/small_&#39;+ 
        msg.filename+&#39;"></a>&#39;; 
        $("#photos").prepend(pic); //将获取的照片信息插入到index.html的#photo里 
        initFancyBox();  //调用fancybox插件 
    } 
}); 
 
webcam.set_hook(&#39;onError&#39;,function(e){ 
    cam.html(e); 
}); 
 
//调用fancybox 
function initFancyBox(){ 
    $("a[rel=group]").fancybox({ 
        &#39;transitionIn&#39;    : &#39;elastic&#39;, 
        &#39;transitionOut&#39;    : &#39;elastic&#39;, 
        &#39;cyclic&#39;        : 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 = &#39;<a rel="group" href="uploads/&#39;+array[&#39;pic&#39;]+&#39;"> 
               <img src="uploads/small_&#39;+array[&#39;pic&#39;]+&#39;"></a>&#39;; 
               $("#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;

The above is the detailed content of Use jQuery+PHP+Mysql to realize online shooting and browsing of photos. For more information, please follow other related articles on the PHP Chinese website!