วันนี้ผมเรียนรู้เกี่ยวกับ plugin ตัวหนึ่งซึ่งอยากมาเขียนไว้เพื่อเป็นการแชร์ความรู้ ( อันน้อยนิด ) และอยากให้เพื่อนๆ และท่านผู้อ่านที่กำลัง มองหาเนื้อคู่ ( ประตูถัดไปอีกหลายห้อง ) ไม่ใช่แหละ ! มองหาตัว plugin เจ คิว รั่ว เฮ้ย ! รี่ ( jquery ) ตัวนี้เจ้านายผมแนะนำมาชื่อของมันคือ แท่น แทน แท๊นนนนนน Uploadify ตัวนี้นี่เอง ( เสียงคนพาก TV แชมป์เปี้ยน ) ว่าแล้วไปดูรายละเอียด เว็บไซร์ ของตัวนี้กันซักกะหน่อยนะจ๊ะ ค่อยๆคลิกกันเบาๆ ^^ => www.uploadify.com
plugin ตัวนี้นั้นมีความสามารถหลายๆอย่างที่หลายๆคนนั้นอยากได้นั่นคือการ select แบบ multiple files ซึ่งหลายคนถ้าไม่เคยลองจะไม่รู้ว่า ไอ้การใส่ tag input type=”file” เนี้ยมันเลือกได้แค่อันนี้นะจ๊ะ ไม่สามารถเลือกหลายๆอันได้ แล้วอย่าโชว์พาวไปกด Ctrl หรือ Shift ด้วย ไม่ช่วยอะไร ที่บอกเนี้ยเพราะเคยลองมาหมดแล้วครับ ( _ _ || ) แล้วจะทำไงให้เลือกไฟล์หลายๆไฟล์ได้พร้อมกันล่ะ ? เอ่อนั่นสิ ! น่าคิดนะ สำหรับโปรแกรมที่หัดเดินหรือว่าวิ่งจนชาชินแล้วแต่ไม่เคยลอง ติ๊ก .. ต๊อก … ติ๊ก … ต๊อก … แม่เฉลย ( เสียงเด็กในโฆษณาที่คุณน่าจะรู้ ) Flash ฉึก ฉึก ใช่ครับ หลายเว็บที่ท่านคงได้เคยใช้การกด shift หรือ ctrl ในการ upload แบบบ้าพลังหลายๆไฟล์ในคราวเดียวนั้นมาจากการใช้ฟังก์ชั่น ของ Flash เข้ามาช่วยเหลือ แต่บางคนบอกว่าไหน Flash อ่ะไม่เห็นมันมีภาพอนิเมชั่นหรืออะไรเลย จริงๆเราสามารถยืมฟังก์ชั่นในการ select multiple files หลายๆตัวของ flash มาใช้ได้โดยเขียนสคริปเพิ่มไปนิดหน่อยตรงจุดนี้หากันเอาเองเน้อ
กลับมาพูดต่อถึงตัว plugin ตัวนี้มันใช้ได้ง่ายมาก โดยการเรียกใช้ขั้นพื้นฐานนั้นคือ
[php]
// include file css, javascript
<script type="text/javascript">
$(document).ready(function() {
$(‘#fileupload’).uploadify({
‘uploader’ : ‘/uploadify/uploadify.swf’,
‘script’ : ‘/uploadify/uploadify.php’,
‘cancelImg’ : ‘/uploadify/cancel.png’,
‘folder’ : ‘/uploads’,
‘auto’ : true
});
});
</script>
<input type="file" name="fileupload" id="fileupload" />
[/php]
โอ้ว บระเจ๊า ! มันง่ายอะไรเช่นนี้ แค่นี้คุณก็ได้ปุ่ม upload file หล่อๆ แล้วหนึ่งปุ่ม แล้วคุณยังสามารถเพิ่มเติมลูกเล่นได้อีก เช่น เมื่อคุณนำเลือก file แล้วอยากให้ค่าอะไรส่งไปไหนก่อนก็สามารถเพิ่มเติมเข้าไปได้ครับเช่น ผมต้องการรู้ชื่อไฟล์ หรือขนาดหรือ every things jing ka bell ( มีทุกสิ่งให้เลือกสรร ) ผมจะลองนำบางฟังก์ชั่นมาใช้ได้ดูแล้วกันนะครับ ในตัวอย่างด้านล่างผมจะใช้ “event” ชื่อว่า “onSelect” ซึ่งเขาอธิบายไว้ว่า
onSelect
Triggers once for each file that is added to the queue.
คือการที่เมื่อเราทำการ เลือกไฟล์ที่ต้องการแล้วถ้าเข้าคิว เป็น อีเวน ( E-wan ) ใช่ที่ไหนเล่า เป็น Event อย่างหนึ่ง ในตัวอย่างนี้ผมจะทำการ alert ค่า ชื่อไฟล์ที่เราทำการเลือก โดยตัวอย่างนี้จะทำการเลือกได้เพียงครั้งละหนึ่งไฟล์ โอเค ! เริ่มกันเลยดีกว่า
[php]
// include javascript / css
$(document).ready(function() {
$(‘#fileupload’).uploadify({
‘uploader’ : ‘uploadify/uploadify.swf’,
‘script’ : ‘uploadify/uploadify.php’,
‘cancelImg’ : ‘uploadify/cancel.png’,
‘folder’ : ‘/uploads’,
‘auto’ : true,
‘onSelect’ : fuction(event,ID,fileObj) {
alert(‘file name=’ + fileObj.name);
}
});
});</pre>
// html
<input type="file" id="fileupload" name="fileupload" />
[/php]
จากตัวอย่างด้านบนนั้นคุณจะได้รับ alert box ที่เป็นชื่อไฟล์ครับ ที่เหลือก็ลองอ่านดูครับ ในเมนู Document ศัพท์ไม่ยากเท่าไร แต่ถ้าคุณติดปัญหาอะไรก็สามารถถามผมได้เลยครับ
เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th