jQuery uploadify Lightbox & class upload

By -

ถ้าเราจะสร้างระบบ gallery ขึ้นมาซักระบบ แน่นอน ว่าหลายๆท่านคงจะคุ้นเคยกับ สิ่งต่างๆต่อไปนี้เป็นอย่างดี แต่สำหรับท่านที่ยังไม่ทราบก็ไม่เป็นไร
สามารถเข้าไปศึกษาได้ ตาม ลิงค์ต่อไปนี้

1. jQuery upload file plugin
เครื่องมือที่เป็นทั้ง  AJAX และ PHP เพื่อจัดการอัปโหลดไฟล์ หรืออัปโหลดภาพ ขึ้นเซิฟเวอร์
download || Demo || Document
2. jQuery Lightbox plugin
ปลั๊กอิน ที่ โชว์รูปภาพ แบบ อลังการงานสร้าง
download || Demo || Document
3. PHP class upload
class upload ที่มีประสิทธิภาพสูง รับรองเจ็บกว่าเขียนเองเยอะ
download || Demo || Document

เอาหล่ะ เดียวเรื่องจะยาวไปซะก่อน  ก่อนอื่น จัดการโหลดมันมาให้หมดทั้งสามตัว แล้วเก็บมันไว้ในที่เดียวกันซะ
เสร็จแล้ว สร้างฐานข้อมูลขึ้นมา 1 ตัว

DROP TABLE IF EXISTS `uploadify`;
CREATE TABLE `uploadify` (
  `img_id` int(5) NOT NULL auto_increment,
  `img_part` varchar(255) NOT NULL,
  `img_thumb` varchar(255) NOT NULL,
  PRIMARY KEY  (`img_id`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

เสร็จแล้วก็ สร้างหน้า index.php ขึ้นมา
เขียนโค้ด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial Development uploadify Lightbox &amp; class upload</title>
<link href="css/uploadify.css" type="text/css" rel="stylesheet" />
<link href="css/pagenavi.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />    
<script type="text/javascript">
$(document).ready(function() {	
  load(); // เรียกใช้งานฟังชั่น เมื่อมีการโหลด page เสร็จสิ้น
  function load(){
	  // ภายในฟังชั่น
    $.get(
			'show.php',// หน้าที่ต้องการส่งค่าไป
			{},// ค่าพารามิเตอร์ที่ต้องการส่งไป ในที่นี้จะถูกส่งไปแบบ GET 
			function(data){
				$("#gallery").html(data);	// ค่าที่รับกลับมา ให้แสดงผลที่ ID="gallery"
				$('#gallery a').lightBox();	// lightbox ทำงาน 	
			});
 
}
  	$("#file_upload").uploadify({
		'uploader'       : 'uploadify.swf', // เรียกใช้ flash
		'script'         : 'uploadify.php', // file ที่ส่งค่าไป ในที่นี้ใช้ไฟล์ที่ มาพร้อมกับ demo ถ้าต้องการส่งไปไฟล์อื่นก็เปลี่ยนได้ที่นี่
		'cancelImg'      : 'cancel.png',    // รูปภาพปุ่มยกเลิก
		'folder'         : 'uploads',       // folder ที่ต้องการ อัพโหลดขึ้นไป
		'queueID'        : 'fileQueue',     
		'multi'          : true,            // อัพโหลดได้หลายภาพ 
		'queueSizeLimit' : 5,               // อัพโหลดได้สูงสุดกี่ภาพ
		'fileDesc'		 : 'jpg, gif',      
		'fileExt'		 : '*.jpg;*.gif',
		'sizeLimit'      : '512000',//max size bytes - 500kb
		'checkScript'    : 'check.php', //if we take this out, it will never replace files, otherwise asks if we want to replace
		'onAllComplete'  : function() {
 
 
                            load(); // อัพโหลดเสร็จสิ้นให้เรียกใช้ฟังชั่นload();
							}
	});
 
 
 
});
</script>
	<style type="text/css">
	/* jQuery lightBox plugin - Gallery style */
	#gallery {
		background-color: #444;
		padding: 10px;
		width: 520px;
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display: inline; }
	#gallery ul img {
		border: 5px solid #3e3e3e;
		border-width: 5px 5px 20px;
	}
	#gallery ul a:hover img {
		border: 5px solid #fff;
		border-width: 5px 5px 20px;
		color: #fff;
	}
	#gallery ul a:hover { color: #fff; }
	</style>
 
</head>
 
<body>
    <h1>Tutorial Development uploadify Lightbox & class upload</h1>
    <div id="gallery">
 
     </div>
 
    <div style="float:left;">
          <div id="fileQueue"></div><p>
          <input id="file_upload" name="file_upload" type="file" /></p>
          <p> <a href="javascript:$('#file_upload').uploadifyUpload();">อัพโหลด</a> || <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">ยกเลิกทั้งหมด</a></p>
      </div>
     <p>&nbsp;</p>
     <br />
 
</body>
</html>

ต่อไปเป็นหน้า ที่ทำการ รับค่าจากหน้า index.php แล้วทำการบันทึกลงฐานข้อมูล (ถ้าโหลด uploadify มาปกติ จะมีไฟล์นี้ให้อยู่แล้ว  ให้เปิดไฟล์ แล้วแก้โค้ด ถ้าไม่มีก็สร้างไฟล์ที่ชื่อ uploadify.php หรือ ชื่อไฟล์ที่เราต้องการ )อย่าลืมสร้าง folder ที่ต้องการอัพโหลดขึ้นไปด้วยนะครับ จากตัวอย่าง part คือ uploads ส่วน thumbs part คือ uploads/thumbs
เดอะโค้ด

<?php
include('class/class.upload.php');
$hostname_connection = "localhost";
$database_connection = "tdev";
$username_connection = "root";
$password_connection = "1234";
$connection = mysql_pconnect($hostname_connection, $username_connection, $password_connection)
or trigger_error(mysql_error(),E_USER_ERROR); 
mysql_query( "SET NAMES UTF8" ) ;
 
if (!empty($_FILES)) {
	$tempFile = $_FILES['Filedata']['tmp_name'];
	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
	$targetFile =  utf8_decode(str_replace('//','/',$targetPath) . $_FILES['Filedata']['name']);
 
	$file_id = md5($_FILES["Filedata"]["tmp_name"] + rand()*100000 + time());
 
	$handle = new Upload($_FILES['Filedata']);
		if ($handle->uploaded) {
			$handle->file_src_name_body      = time().$file_id; // hard name
			//$handle->file_overwrite = true;
			//$handle->file_auto_rename = false;
			$handle->image_resize            = true;
			$handle->image_ratio_y           = true;
			$handle->image_x                 = 600; //size of picture
			$handle->file_max_size = '1512000'; // max size
			$handle->Process($targetPath.'/');
			$img_part =  $handle->file_dst_name ; // name part picture
			// $handle-> Clean();
 
 
			//thumbnail creation:
			$handle->file_src_name_body      = time().$file_id; // hard name
			//$handle->file_overwrite = true;
			//$handle->file_auto_rename = false;
			$handle->image_resize            = true;
			//$handle->image_ratio_y           = true;
			$handle->image_ratio_x           = true;
			$handle->image_y                 = 100; //size of picture
			$handle->file_max_size = '1512000'; // max size
			$handle->Process($targetPath.'/'.'thumbs/');
			$img_thumb =  $handle->file_dst_name ; // name thumb picture
 
			$insertSQL = sprintf("INSERT INTO uploadify (img_part,img_thumb) VALUES ( '%s','%s' )", $img_part,$img_thumb );
            echo $insertSQL ;
            mysql_select_db($database_connection, $connection);
            $query = mysql_query($insertSQL, $connection) or die(mysql_error());
			$handle-> Clean();
 
			if($query){
 
			  echo "1";
 
			}
		} else {
		}
}	
?>

หลังจากบันทึกเสร็จเรียบร้อยแล้ว จากหน้า index.php เราใช้ฟังชั่น load(); ไปโหลดภาพทั้งหมดที่บันทึกไว้มาจาก ไฟล์ show.php
เขียนโค้ด

<?php
	$hostname_connection = "localhost";
	$database_connection = "tdev";
	$username_connection = "root";
	$password_connection = "1234";
	$connection = mysql_pconnect($hostname_connection, $username_connection, $password_connection)
	or trigger_error(mysql_error(),E_USER_ERROR); 
	mysql_query( "SET NAMES UTF8" ) ;
	mysql_select_db($database_connection, $connection);
	$query=mysql_query("SELECT * FROM uploadify");          
    ?>
	<ul>
		 <?php           
               while($rs=mysql_fetch_array($query))
			   {
		  ?>
             <li>
             <a href='uploads/<?=$rs['img_part']?>' ><img  src='uploads/thumbs/<?=$rs['img_thumb']?>'/></a>	
             </li>
        <?php }?> 
	</ul>

เพียงเท่านี้  เราก็จะได้ระบบอัพโหลดภาพ ที่ทั้งมีประสิทธิ์ภาพ สวยงาม รวดเร็ว  แถมยังโชว์ภาพแบบอลังการงานสร้าง โดยใช้เวลาเพียงชั่วเคี้ยวหมากแหลก  งานก็เสร็จเร็ว แถม boss ก็ไม่สั่งลงอาญา สั่งกุดหัวริบเรือนอีกต่างหาก…..5555+++
download

mitsumasa