Jquery+php+mysql-based implementation of online photography and online browsing photos _javascript skills

This article demonstrates how to use jquery with PHP and MySQL, the implementation of the web version of online photos, upload, display browsing functions, Ajax interaction technology throughout the whole of this article, so the reader of this article requires a fairly familiar with jquery and its plug-in use and javscript related knowledge, Knowledge of PHP and MySQL related.

Click here Download Source    

Html

First, we're going to create a home page index.html to showcase the latest uploaded photos, we use jquery to get the latest photos, so this is an HTML page that doesn't require PHP tags, and of course creates an HTML structure that includes the need to take photos and upload interactions.

<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" > Photo </a> 
  </div > 
  <div class= "Button_pane hidden" id= "upload" > 
  <a id= "Btn_cancel" href= "" class= "Btn_blue" > Cancel </a> <a id= "btn_upload" href= " 
  class=" Btn_green "> Upload </a> 
  </div> 
 </div > 
 </div> 

We have added the above HTML code to the body, where #photos is used to load the latest uploaded photos; #camera用于加载摄像模块, including calling the camera flash component webcam, and taking photos and uploading buttons.

In addition, we also need to load the necessary JS files in the index.html, including the jquery library, FancyBox plug-ins, Flash camera components: Webcam.js and This example combines the script.js required for various operations.

<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 give you a pretty good front end interface, we use the CSS3 to achieve some shadow, fillet and transparency effects, see:

#photos {width:80% margin:40px auto} #photos: Hover a{opacity:0.5} #photos a:hover{opacity:1} #camera {width:598px; Heig ht: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 you will find a camera button just below the page, which is folded by default, when previewing index.html.

What we're going to do next is use jquery: by clicking the camera button on the bottom of the page, call the camera component and complete the action required to take pictures, cancel and upload.

Jquery

All of this interactive action required for JS we are written in the Script.js file. First, we need to load the camera component webcam.js, about the webcam call, you can look at this site article: javascript+php to achieve online photo function. The method is invoked as follows:

Script.js-part 1
$ (function () { 
 webcam.set_swf_url (' js/webcam.swf ');//load the path of the Flash camera assembly 
 Webcam.set_api_ URL (' upload.php '); Upload photos of PHP back-end Processing file 
 webcam.set_quality (m);  Set the image quality 
 Webcam.set_shutter_sound (true, ' Js/shutter.mp3 ');//Set the camera sound, the photo will emit "click" of the sound 
 var cam = $ ("#webcam"); 
 Cam.html ( 
 webcam.get_html (Cam.width (), Cam.height ())//Load camera components in #webcam 
 

At this point, you also do not see the load camera effect, because #camera is collapsed by default, continue to add the following code in 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; 

When you click the camera button directly below the page, the default folded camera area expands upwards, and if your machine has a camera installed, it will load the camera component for camera.

Next, click "Take a Photo" to complete the photo function, click "Cancel" to cancel the photo you just took, click "Upload" to upload the photos to the server.

Script.js-part 3
//Photo 
$ ("#btn_shoot"). Click (function () { 
 webcam.freeze ();//freeze webcam, Camera stops working 
 $ ("# Shoot "). Hide (); Hide the photo button 
 $ ("#upload"). Show ();//display Cancel and upload button return 
 false; 
Cancel Photo 
$ (' #btn_cancel '). Click (function () { 
 webcam.reset ();///reset webcam, Camera re-work 
 $ ("#shoot"). Show (); /Show Photo button 
 $ ("#upload"). Hide ();//Hide Cancel and upload button return 
 false; 
Upload photos 
$ (' #btn_upload '). Click (function () { 
 webcam.upload ();//Upload 
 webcam.reset ();//Reset Webcam, The camera works again 
 $ ("#shoot"). Show ()//Display the photo button 
 $ ("#upload"). Hide ();//Hide Cancel and upload button return 
 false; 

Click the "Upload" button, the photos will be submitted to the background of PHP processing, PHP will be the name of the photos and storage operations, please see how PHP operation upload photos.

Php

The things that upload.php do are: Get uploaded photos, name them, judge whether they are legitimate pictures, generate thumbnails, save, write to the database, and return JSON information to the front end.

$folder = ' uploads/'; Upload Photo save path $filename = Date (' Ymdhis '). Rand (). JPG '; 
Named photo name $original = $folder. $filename; 
$input = file_get_contents (' php://input '); if (MD5 ($input) = = ' 7d4df9cc423720b7f1f3d672b89362be ') {exit;//If the upload is a blank photo, terminate the program} $result = File_put_contents ($origin 
AL, $input); 
if (! $result) {echo ' {' Error ': 1, ' message ': ' File directory not writable ';} '; 
Exit 
} $info = getimagesize ($original); 
if ($info [' MIME ']!= ' image/jpeg ') {//If the type is not a picture, delete the unlink ($original); 
Exit 
//Generate thumbnail $origImage = Imagecreatefromjpeg ($original); $newImage = Imagecreatetruecolor (154,110); 
Thumbnail size 154x110 imagecopyresampled ($newImage, $origImage, 0,0,0,0,154,110,520,370); 
Imagejpeg ($newImage, ' Uploads/small_ '. $filename); 
Write to the database include_once (' connect.php '); 
$time = Mktime (); 
$sql = "INSERT INTO Photobooth (pic,uploadtime) VALUES (' $filename ', ' $time ')"; 
$res = mysql_query ($sql); 
if ($res) {//Output JSON information echo ' {' status ': 1, ' message ': ' success! ', ' filename ': '. $filename. ' "} '; }else{echo ' {' Error ': 1, ' MessaGE ":" sorry,something goes Wrong. ";} ';  }

After upload.php completes the photo upload, it will eventually return the JSON-formatted data to the front camera component webcam call, and now we're back to script.js.

Jquery

Webcam through the Set_hook method to capture backstage php return information, OnComplete said upload completed, onerror is wrong to make mistakes.

Script.js-part 4

Webcam.set_hook (' OnComplete ', function (msg) { 
msg = $.parsejson (msg);//Parse JSON 
if (msg.error) { 
alert ( msg.message); 
} 
else { 
var pic = ' <a rel= ' group ' href= ' uploads/' +msg.filename+ ' ></a> '; 
$ ("#photos"). Prepend (pic); Insert the captured photo information into the index.html #photo 
initfancybox ();//Call FancyBox plugin 
} 
}); 
Webcam.set_hook (' OnError ', function (e) { 
cam.html (e); 
}); 
Call FancyBox 
function Initfancybox () { 
$ ("A[rel=group]"). FancyBox ({ 
' transitionin ': ' Elastic '), 
' transitionout ': ' Elastic ', ' 
cyclic ': true 
}; 

Explain, upload success, the photos will be through the above JS code dynamically inserted into the element #photos, and also call the FancyBox plug-in. At this point, click on the photos just uploaded, will present the FancyBox pop-up layer effect. Note that dynamically generated elements must be called by the Initfancybox () function in the above code, not directly by FancyBox (), otherwise there will be no pop-up effects.

Next, Script.js needs to do one more thing: dynamically loading the latest photos, showing them on the page, we complete the AJAX request through the jquery. Getjson () method.

Script.js-part 5

function Loadpic () { 
 $.getjson ("getpic.php", function (JSON) { 
 if (JSON) { 
  $.each json,function (Index, Array) {//Loop JSON data 
  var pic = ' <a rel= ' group ' href= ' uploads/' +array[' pic ']+ ' ' > 
  </a>"; 
  $ ("#photos"). Prepend (pic) 
 ;} Initfancybox (); Invoke FancyBox plugin 
 }); 

Loadpic ();

The function loadpic () sends a GET request to the server getpic.php, parses the returned JSON data, inserts the photo information into the element #photos dynamically, and invokes the FancyBox plug-in, and then, don't forget to call Loadpic () after the page is loaded.

Php

Finally, the background getpic.php to get the uploaded images from the database and return JSON to the front end.

Include_once ("connect.php"); The 
most recent 50 records in the connection database//query datasheet 
$query = mysql_query ("Select pic from photobooth ORDER BY id desc limit"); 
while ($row =mysql_fetch_array ($query)) { 
 $arr [] = Array ( 
 ' pic ' => $row [' pic '] 
 ); 
} 
Output JSON data 
echo json_encode ($arr); 

Finally, the data photobooth structure is attached:

CREATE TABLE ' photobooth ' ( 
 ' id ' int () NOT NULL auto_increment, 
 ' pic ' varchar ' is not NULL, 
 ' Uploadtime ' int ' not NULL, 
 PRIMARY KEY (' id ') 
) Engine=myisam DEFAULT Charset=utf8;