$('#selector').attr('disabled','disabled'); // สำหรับ disable
$('#selector').removeAttr('disabled'); // สำหรับ enable

แต่ถ้าใช้บ่อย ๆ แล้ว จะให้มาเขียนแบบนี้อยู่ตลอด ก็คงจะไม่สะดวกนัก จะให้เขียนเป็น function มาครอบก็อาจจะดูไม่เก๋เท่ากับเขียนให้มันเป็น แบบ plugin ซะเลย

(function($)  {
$.fn.disable = function() {return this.attr('disabled', true).addClass('disabled');}
$.fn.enable = function() {return this.removeClass('disabled').attr('disabled', false);}
})(jQuery);

เท่านี้ก็เรียกใช้ .disable() กับ .enable() ได้ละ … เก๋ซะไม่มี 5555

โหลด plugin ตัวนี้ที่นี่เลยครับ

jQuery 1.4.4 Cheat Sheet ก็จะเป็นโพยที่รวมเอา function ทุุกอย่างของ jQuery 1.4.4 รวมถึงมี remark เล็ก ๆ ไว้ด้วยว่าอะไรเป็นอะไร ใช้ได้กับ jQuery เวอร์ชั่นไหน

ข้อดีของ Cheat Sheet คือ มันรวมทุกอย่างไว้ในหน้าเดียว ไม่ต้องเสียเวลาไปหาจากตรงไหนอีก ถ้าหน้านี้ไม่มี ก็คือไม่มีแล้วครับ เรียกได้ว่า สะดวกสุด ๆ ไปเลย บนหน้าเว็บยังมีเวอร์ชั่น pdf และ png ให้โหลดเก็บไว้ได้อีกด้วย แต่เนื่องจากมันเป็น Cheat Sheet มันเลยไม่มีรายละเอียดของ function นั้น ๆ ว่าเอาไว้ทำอะไร ตัวอย่างการใช้งาน ก็คือ เราจะใช้ เราต้องรู้อยู่แล้วว่ามันทำอะไรครับ

ใครสนใจไปชมไปโหลด เชิญได้เลยที่ http://jqapi.ru/

หลัก ๆ แล้วก็ไม่ได้มีอะไรมากไปกว่าการแก้ไขบัก (ส่วนใหญ่) และการปรับปรุงสิ่งที่มีอยู่แล้วให้ดีขึ้นครับ สิ่งที่เปลี่ยนแปลงไปหลัก ๆ ที่ developer ทั้งหลายควรจะรู้มีแค่ 2 เรื่องครับ คือ function ใหม่ ที่ชื่อว่า fadeToggle อยู่ในหัวข้อของ animation ซึ่งจะทำหน้าที่ให้ fade in หรือ out จาก selector ที่กำหนด และวิธีการดูว่า element ที่เราต้องการมันซ่อนอยู่หรือเปล่า เดิมเช็คโดยการดู .width() และ .height() ว่าเป็น 0 หรือเปล่า ก็เปลี่ยนเป็นการใช้ .is(‘:hidden’) แทนครับ เรียกได้ว่าสะดวกมากขึ้นกันเลยทีเดียว ส่วน .withd() และ .height() ของ element ที่ซ่อนอยู่ตอนนี้ก็จะไม่เป็น 0 แล้วนะครับ แต่จะกลายเป็นความกว้างและความสูงของ element นั้น ๆ แทนแล้วครับ ใครใช้แบบเดิมอยู่ก็อย่าลืมแก้ไขนะเออ

ใครสนใจอ่านรายละเอียดของเวอร์ชั่นนี้เต็ม ๆ ก็ตามไปอ่านต่อกันได้ที่ http://blog.jquery.com/2010/11/11/jquery-1-4-4-release-notes/ (*เป็นภาษาอังกฤษนะจ๊ะ)

Chonla’s Instant ใช้ jQuery เป็น engine หลักในการทำงานฝั่ง client และมี query interface เดียว ที่เป็น engine หลักทางฝั่ง server ที่เอาไว้สำหรับรับ keyword จาก client เพื่อไปค้นหาตาม resource ที่กำหนด วิธีนี้ ทำให้ code ที่รันทางฝั่ง client สั้นกระทัดรัด และโยนภาระที่เหลือไปทางฝั่ง server แทน

Service หลัก ๆ ที่ผมลองเอาไปใส่ใน Chonla’s Instant ตอนที่ทำครั้งแรก คือ Longdo Dictionary (http://dict.longdo.com/) ซึ่งเป็น Online dictionary ที่ได้รับความนิยมในประเทศไทย ตามมาด้วย Youtube (http://www.youtube.com/) โดยที่ Youtube ที่ผมใส่นั้น จะทำหน้าที่ search และเอาผลลัพธ์แค่ title, link และ thumbnail มาแสดงเท่านั้น ไม่มีส่วน clip player หลังจากที่ทดสอบและแก้ไขจนพอใจ ก็เอา Service ที่ 3 มาลง นั่นก็คือ พจนานุกรม ฉบับราชบัณฑิตยสถาน ปี พ.ศ. 2542 (http://rirs3.royin.go.th/)

การทำงานฝั่ง Client หลัก ๆ ผมก็ใช้วิธี พิมพ์ปุ๊บ ก็เริ่มไปค้นหาด้วย Ajax และระหว่างที่ค้นหาอยู่ ก็ block ไม่ให้เกิดการค้นหาซ้อนจนกว่าจะค้นหาเสร็จ เมื่อค้นหาเสร็จแล้ว ถ้ามีการค้นหาซ้อนค้างอยู่ ให้ค้นต่อ แล้วเอาผลลัพธ์ที่ได้มาแสดง ส่วนทางฝั่ง Server ก็ใช้ php ไปดึงข้อมูลจาก Server ที่ให้บริการทั้ง 3 services มาเรียบเรียง แล้วส่งกลับไปให้ Ajax เพื่อแสดงผล

เขียนมาซะยาวเลย … ผมว่า ลองไปเล่นกันเลยดีกว่าครับ กับ Chonla’s Instant (http://instant.chonla.com/)

BBCode เราเรียกได้ว่าเป็น lightweighted markup language ใช้สำหรับจัดรูปแบบข้อความตามเว็บบอร์ดต่าง ๆ ครับ มีลักษณะของแท็กอยู่ในเครื่องหมายก้ามปู เช่น [b]ตัวหนา[/b] ครับ เจ้าตัว BBCode นี่เว็บบราวเซอร์มันไม่รู้จักครับ ต้องทำการแปลไปเป็น markup language ที่ใช้ทั่ว ๆ ไปก่อนครับ นั่นก็คือ HTML หรือ XHTML ครับ เช่น จาก [b]ตัวหนา[/b] จะถูกแปลงไปเป็น <b>ตัวหนา</b> แล้วค่อยนำไปแสดงผลครับ

จุดประสงค์หลัก ๆ ของ BBCode คือ เพื่อให้ผู้ใช้สามารถจัดรูปแบบข้อความได้ง่ายขึ้น รวมไปถึงเพื่อความปลอดภัยของการแสดงผลข้อความที่โพสโดยผู้ใช้ด้วยครับ เช่น การควบคุมการใช้งาน javascript การควบคุมให้ใช้ tag ภายในข้อกำหนด เป็นต้น

เจ้าตัว BBCode เนี่ย มันไม่มีข้อกำหนดเป็นมาตรฐาน เพียงแค่มีการใช้งานโดยทั่วไปตามเว็บบอร์ดเวอร์ชั่นใหม่ ๆ ทั่วไปครับ รายละเอียดรูปแบบคำสั่ง สามารถตามไปดูในหัวข้ออ้างอิงท้ายบทความได้เลยครับ

ทีนี้มาดูกันว่าปลั๊กอินตัวนี้จะทำงานยังไงครับ

ง่าย ๆ ครับ แค่เรียก $(<selector>).bbcode(); เท่านั้นครับ เช่น

$("div").bbcode();

ไอเดียของปลั๊กอินตัวนี้ผมได้มาจากตอนเขียนแก้บักการแสดงผล BBCode ให้เก็บเว็บไซต์หนึ่งครับ ปกติแล้วการ render จาก BBCode ไปเป็น HTML นั้น มักจะทำที่ Server และส่ง HTML ที่ได้มาให้บราวเซอร์แสดงผล แต่ผมต้องการที่จะลดโหลดฝั่ง Server ลง โดยจะย้ายการทำงานจากฝั่ง Server มาทำที่บราวเซอร์แทน

หลักการทำงานก็ไม่มีอะไรมากครับ ผมใช้วิธีการกำหนดค่า Pattern ในรูปแบบ Regular Expression และใช้ Regular Expression Engine ของ JavaScript ในการแสดงผลให้ถูกต้องเท่านั้นครับ

ลองไปดูที่ LIVE DEMO กันเลยครับ

อ้างอิง

• http://en.wikipedia.org/wiki/BBCode

ไอเดียหลัก ๆ ของการทำ chaining ก็คือ การทำให้มันสามารถเรียกต่อกันได้เป็นทอด ๆ นั่นเอง ยกตัวอย่างใน jQuery ซึ่งมีคุณสมบัติที่เรียกว่า chainability อยู่ ทำให้เราสามารถเรียกคำสั่งได้แบบนี้

$("#submenu").addClass("whitemenu").show("slow");

จะเห็นได้ว่า เราสามารถเรียก .show ต่อเนื่องได้เลย นี่เองที่ทำให้เกิดการเรียกอย่างต่อเนื่อง หรือ การทำ Method chaining นั่นเอง

ใน PHP เราสามารถทำให้ object มีคุณสมบัติเดียวกันนี้ได้เช่นกัน เพียงแต่น่าเสียดายที่คุณสมบัตินี้ มีอยู่ใน PHP ตั้งแต่เวอร์ชั่น 5 ขึ้นไปเท่านั้น สำหรับคนที่ยังใช้ PHP4 อยู่ ผมต้องขอแสดงความเสียใจด้วยครับ ฮ่า ๆ และคาดว่าเหตุนี้เองที่ทำให้ kohana สามารถใช้งานได้กับ PHP5 ขึ้นไปเท่านั้น

หลักการง่าย ๆ ที่ทำให้เราสามารถทำ Method chaining ได้ก็คือ การเขียน class และทำการคืนค่าของ object มันเองกลับออกมาหลังจากที่จบ method ทำนองเดียวกับใน jQuery ตอนที่เขียน plugin

ตอนจบ เราก็จะทำการ return jQuery object กลับออกมาให้เช่นเดียวกัน

ลองมาดูตัวอย่างใน PHP กันดีกว่าครับ

// php5 only
class Database
{
	private $link;

	private $table;
	private $field;
	private $condition;
	private $order;
	private $result;

	// connection functions
	function __construct($config)
	{
		$this->flush();
		$this->link = null;
		$this->connect($config["hostname"],
				$config["username"],
				$config["password"],
				$config["database"]);
	}

	function __destruct()
	{
		$this->disconnect();
	}

	function connect($host = "",
				$user = "",
				$password = "",
				$db = "")
	{
		if ($this->link !== null)
			$this->disconnect();

		$this->link = mysql_connect($host, $user, $password);

		if ($this->link === FALSE)
		{
			echo $this->err();
		}
		else
		{
			if ($db !== "")
			{
				return $this->db($db);
			}
		}
		return $this;
	}

	function disconnect()
	{	// break chain
		if ($this->link !== null)
			mysql_close($this->link);
		$this->link = null;
	}

	function db($db)
	{
		if (mysql_select_db($db, $this->link) === FALSE)
			echo $this->err();
		return $this;
	}

	function errno()
	{
		return mysql_errno($this->link);
	}

	function ok()
	{
		return ($this->errno() == 0);
	}

	function err()
	{	// break chain
		return mysql_error($this->link);
	}

	function execute($sql)
	{
		$this->result = mysql_query($sql, $this->link);
		return $this;
	}

	function records()
	{
		$result = array();
		if ($this->result !== FALSE)
		{
			while (($row = mysql_fetch_assoc($this->result)) !== FALSE)
			{
				$result[] = $row;
			}
		}
		return $result;
	}

	function flush()
	{
		$this->table = "";
		$this->field = "";
		$this->condition = "";
		$this->order = "";
		$this->result = null;
		return $this;
	}

	function safe($value)
	{
		if (!get_magic_quotes_gpc())
		{
			$value = addslashes($value);
		}
		return "'$value'";
	}

	function table($table)
	{
		$this->table = $table;
		return $this;
	}

	function field($field)
	{
		$this->field = $field;
		return $this;
	}

	function condition($condition)
	{
		if (is_array($condition))
		{
			$cond = array();
			foreach ($condition as $f => $v)
			{
				$cond[] = "($f = " . $this->safe($v) . ")";
			}
			$condition = implode(" AND ", $cond);
		}
		$this->condition = $condition;
		return $this;
	}

	function top($num = 1)
	{
		$field = $this->field;
		if ($field == "") $field = "*";
		$sql = "SELECT {$field} FROM {$this->table}";
		if ($this->condition !== "")
			$sql .= " WHERE {$this->condition}";
		if ($this->order !== "")
			$sql .= " ORDER BY {$this->order}";
		$sql .= " LIMIT 0, {$num}";
		return $this->execute($sql)->records();
	}

	function all()
	{
		$field = $this->field;
		if ($field == "") $field = "*";
		$sql = "SELECT {$field} FROM {$this->table}";
		if ($this->condition !== "")
			$sql .= " WHERE {$this->condition}";
		if ($this->order !== "")
			$sql .= " ORDER BY {$this->order}";
		return $this->execute($sql)->records();
	}

	function order($order)
	{
		$this->order = $order;
		return $this;
	}
}

code ด้านบนนี้ เป็น code ที่ผมทดสอบ โดยทำเป็นไอเดียเริ่มต้นง่าย ๆ สำหรับการทำ query builder จะเห็นได้ว่า หลาย ๆ method จะมีการ return ตัว object มันเอง ($this) ไอเดียหลักในการกำหนดว่า method ไหนที่ผม return หรือไม่ return $this ก็คือ มีความจำเป็นในการเรียก method ต่อจากนี้หรือไม่นั่นเอง

การใช้งานก็ไม่ได้ยุ่งยากอะไร

$dbconf = array(
	"hostname" => "localhost",
	"username" => "root",
	"password" => "123456",
	"database" => "test"
);
$db = new Database($dbconf);
$rows = $db->table("products")
		->field("product_id, product_name")
		->condition(array(
				"product_group"=>"tyre",
				"product_model"=>"Eagle"))
		->top();
print_r($rows);

จากตัวอย่างด้านบน เป็นการ select หา product จาก table products โดยกำหนด criteria ในการค้นหาเป็น product_group = ‘tyre’ และ product_model = ‘Eagle’ โดยจะเลือกเอาเฉพาะ record แรกสุดเท่านั้น

เห็นมั๊ยครับ หลักการง่าย ๆ แค่ return $this เองครับ ที่สำคัญ อย่าลืมนะครับ PHP5 ขึ้นไปนะครับ

ขอให้สนุกกับการเขียนโปรแกรมครับ

หลังจากนั้น ก็มาถึงสิ่งที่ผมอยากให้ plugin ตัวนี้มี นั่นก็คือ การกำหนดความกว้าง หรือความสูงสูงสุด นั่นคือ ถ้าผมกำหนดให้ความกว้างที่มากที่สุดมีค่าเป็น 200 pixels และภาพต้นฉบับมีความกว้างเป็น 1024 pixels ภาพที่ย่อแล้ว จะเหลือความกว้างเป็น 200 pixels นั่นเอง

รูปแบบการใช้งาน

$.imgrescale(options);

โดยที่ options ในตอนนี้มีแค่ตัวเดียวครับ คือ maxsize ดังนั้นถ้าต้องการกำหนดค่า maxsize ก็จะเรียกแบบนี้ครับ

$.imgrescale({maxsize:200});

ลองดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

สำหรับ source code ที่เป็น minified ก็ดาวน์โหลดได้จากที่นี่เลยครับ

ใช้ดีอย่าลืม feedback แล้วบอกต่อนะครับ

อ้างอิง

• Aspect Ratio: http://en.wikipedia.org/wiki/Aspect_ratio_(image)

ส่วนผสมของผม หลีกหนีไม่พ้น jQuery ครับ ร่วมกับการเขียน plugin โดยมีคอนเซปท์ว่า จับอะไรก็ได้ บนเว็บ เอามาทำเป็น  floating layer ได้หมด แล้วก็เลื่อนตาม scrollbar ได้ด้วย คิดไปคิดมาต่อยอดได้อีกว่า จะให้มันอยู่ตรงไหนของหน้าจอก็ได้ snap ซ้าย snap ขวา หรือจะอยู่มันตรงกลาง บนล่าง ได้หมด โอ้ว ชักน่าตื่นเต้นแล้วสิ

ในที่สุด ผมก็ลองทดสอบตัว prototype ของผมกับเว็บของผู้ว่าจ้างทันทีครับ (http://www.brendabence.com/media-room/) เออ พอใช้ได้แฮะ หลังจากนั้นก็เอามานั่งพัฒนาต่อยอดตามที่ตั้งใจไว้จนออกมาให้ได้ใช้งานกัน เสร็จแล้วก็ตั้งชื่อให้มันว่า scrollads plugin สำหรับ jQuery ครับ

รูปแบบการใช้งาน

$.scrollads(options);

โดยที่ options เนี่ย จะใส่หรือไม่ใส่ก็ได้ครับ ถ้าใส่ก็จะเขียนอยู่ในรูปแบบ JSON โดยที่มี key ตามนี้เลยครับ

closer เป็น selector ที่ระบุปุ่มที่ใช้ปิดตัว layer นี้
hsnap เป็นตัวบอกว่า layer จะอยู่ตำแหน่งไหนในแนวนอน มีค่าเป็น

• left ชิดซ้าย
• center อยู่ตรงกลาง
• right ชิดขวา
• custom อยู่ตำแหน่งที่ระบุไว้ใน left
• none อยู่ตำแหน่งตาม html

vsnap เป็นตัวบอกว่า layer จะอยู่ตำแหน่งไหนในแนวตั้ง มีค่าเป็น

• top ชิดด้านบน
• middle อยู่ตรงกลาง
• bottom ชิดด้านล่าง
• custom อยู่ตำแหน่งที่ระบุไว้ใน top
• none อยู่ตำแหน่งตาม html

เช่น

$("#floatme").scrollads();
$("#floatme").scrollads({closer:".close"});
$("#floatme").scrollads({closer:".close",hsnap:"center"});

ลองไปดู LIVE DEMO กันดีกว่าครับ

สำหรับ source code ตัวที่เป็น minified สามารถดาวน์โหลดได้จากที่นี่ครับ

ใช้ดีอย่าลืมมา feedback แล้วบอกต่อนะครับ

อัพเดท วันที่ 6 สิงหาคม 2552
+ ผมได้เพิ่ม option smooth ลงไปครับ เพื่อให้ scroll ได้ smooth ขึ้นครับ ถ้าไม่ใส่มันก็จะเลื่อนปึ๊ด ๆ แบบเดิม แต่ถ้าใส่ แล้วกำหนดเป็น “true” มันก็จะหยอด effect ลงไปหน่อย ทำให้เลื่อนแล้วดูเนียน ๆ ครับ ลองดูได้ครับ ขอบคุณครับ

ขั้นแรก ผมจะกำหนด data ที่จะใช้งานก่อนครับ

var data = {
    id: 4,
    name: "User List",
    table: [
        {id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
        {id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
        {id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
        {id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
        {id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
    ],
    toString: function() {
        return this.name.bold() + ' (count: ' + this.table.length + ')';
    }
};

เสร็จแล้วก็มากำหนด Template

{#template MAIN}
<div id="header">{$T.name}</div>
<table>
{#foreach $T.table as r}
    {#include row root=$T.r}
{#/for}
</table>
{#/template MAIN}

{#template row}
<tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
    <td>{$T.name.bold()}</td>
    <td>{$T.age}</td>
    <td>{$T.mail.link('mailto:'+$T.mail)}</td>
</tr>
{#/template row}

ที่เหลือก็แค่เรียกใช้งาน plugin ตัวนี้เท่านั้นเองครับ ง่าย ๆ

$("#result").setTemplate($("textarea").text()).processTemplate(data);

ลองไปดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

แหล่งอ้างอิงและ API

• http://jtemplates.tpython.com/
• http://www.jquerytips.com/2008/12/07/jtemplate-template-engine-in-javascript/

1. APC ย่อมาจาก Alternative PHP Cache ครับ ซึ่งจะมี library ที่ผมต้องการ นั่นคือ apc_fetch() ครับ Server ที่เราใช้จะต้องสนับสนุน APC ครับ ซึ่งเป็น PECL เข้าไปดาวน์โหลดได้จาก http://pecl.php.net/package/apc ครับ
2. Ajax ในที่นี้ ผมใช้ Ajax ควบคู่กับ JSON ครับ
3. Upload form ก็จะเป็น Form Upload ธรรมดานี่แหละครับ กำหนด enctypemultipart/form-data ให้เรียบร้อย และ method เป็น POST ให้เรียบร้อยเช่นกันครับ

สำหรับไฟล์ที่จำเป็นในการทำ Upload Progress ด้วยวิธีนี้ ก็จะมี 3 ส่วนเช่นกัน ง่าย ๆ ตามนี้เลยครับ

1. Upload Form จะเป็นหน้า Page ที่ User เห็นครับ เอาไว้สำหรับให้ User Browse File และกด Submit ครับ
2. Upload จะเป็นหน้า Page ที่เอาไว้สำหรับ Upload เลยครับ ในหน้านี้ ให้ทำการอัพโหลดเหมือนปกติครับ คือมีการ move_uploaded_file() อะไรเหมือนปกติืืทุกอย่างครับ
3. Progress จะเป็นส่วนที่เอาไว้สำหรับให้หน้า Form Upload มา poll ค่า status ของการ Upload ครับ ส่วนนี้แหละครับ ที่จะเป็นตัว return กลับไปว่า อัพโหลดอะไรได้ยังไงเท่าไหร่แล้วครับ

Upload Form

ทีนี้ เมื่อเรามีทุกอย่างพร้อม เราก็จะทำการกำหนด key สำหรับ Upload session เพื่อให้การ Poll ถามข้อมูลนั้นทำได้ถูกต้องครับ การกำหนดเราทำได้โดยการใส่ input hidden ที่ชื่อ APC_UPLOAD_PROGRESS ให้มีค่าเป็น key ที่เราต้องการครับ ผมสมมติให้มีค่าเป็น “abcd” ดังนั้น form ที่เราได้ควรจะมีหน้าตาประมาณแบบนี้ครับ (ชื่อ APC_UPLOAD_PROGRESS เราสามารถเปลี่ยนได้ใน php.ini ครับ)

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input type="hidden" name="APC_UPLOAD_PROGRESS" value="abcd">
    <input name="upfile" type="file"></span>
    <input type="submit" value="Upload">
</form>

Upload

ในส่วนนี้ผมไม่พูดถึงนะครับ ทำการอัพโหลดไฟล์ตามปกติเลยครับ ในกรณีที่ไฟล์ใหญ่มาก อย่าลืม set ให้ไม่ต้องมี timeout ด้วย function set_time_limit(0) ด้วยนะครับ

Progress

สำหรับ Progress ไฟล์นั้น จะมีหน้าตาประมาณนี้ครับ

<?php
header("content-type:application/json");
$stat = apc_fetch('upload_abcd');
if ($stat)
{
    if (!isset($stat["total"])) $stat["total"] = 0;
    if (!isset($stat["current"])) $stat["current"] = 0;
    if (!isset($stat["rate"])) $stat["rate"] = 0;
    if (!isset($stat["cancel_upload"])) $stat["cancel_upload"] = 0;
    if (!isset($stat["done"])) $stat["done"] = 0;
    f (!isset($stat["filename"])) $stat["filename"] = "";
    printf("[%0d,%0d,%0d,%0d,%0d,\"%s\"]",
    $stat["total"] ,
    $stat["current"] ,
    $stat["rate"] ,
    $stat["cancel_upload"] ,
    $stat["done"],
    addslashes($stat["filename"]));
}
else
{
    echo "null";
}
?>

สิ่งที่เราต้องทำคือ ทำการ poll ข้อมูลการอัพโหลดของ key “abcd” จาก server เราก็ทำได้โดยเรียก function apc_fetch และกำหนด parameter เป็น string ขึ้นต้นด้วย “upload_” และตามด้วย key ของเรา คือ “abcd”

ค่าที่ return มาจาก apc_fetch จะได้เป็น associative array โดยมี key ที่เราจะเอามาใช้งานคือ

• total เป็นขนาดไฟล์
• current เป็นขนาดไฟล์ที่อัพโหลดได้แล้ว
• rate คือความเร็วในการอัพโหลดครับ
• filename เป็นชื่อไฟล์ในเครื่องเราครับ (เช่น C:\Download\file.txt)

คราวนี้ เราก็แค่ใช้ ajax มา poll ค่าเหล่านี้ออกไปแสดงเท่านั้นเองครับ ทีนี้ต้องพึ่งฝีมือ dhtml กับ graphic ของคุณเองแล้วล่ะครับ ว่าจะทำ progress bar ออกมาได้สวยแค่ไหน

บทความนี้ ผมไม่มี LIVE DEMO แต่มีตัวอย่างให้ลองดาวน์โหลดไปทดสอบกันได้ครับ ดาวน์โหลด กับเว็บที่ผมทำให้เอาไปใช้งานจริงครับ แวะลองไปทดสอบและใช้บริการกันได้ที่ http://www.zidoupload.com ครับ