jquery uploadify plugin !! อาวุธใหม่ของการ upload ไฟล์ !!

• Facebook
• Twitter
• Line

วันนี้ผมเรียนรู้เกี่ยวกับ 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 ศัพท์ไม่ยากเท่าไร แต่ถ้าคุณติดปัญหาอะไรก็สามารถถามผมได้เลยครับ

ถ้าคุณชอบบทความในเว็บนี้ และอยากสนับสนุนเรา เพียงแค่คุณสมัครรับข่าวสารด้านล่างจะได้รับสิทธิ์พิเศษก่อนใคร เราสัญญาว่าจะส่งบทความที่เป็นประโยชน์ต่อคุณอย่างแน่นอนครับ

ชื่อของคุณ

อีเมล*

• Facebook
• Twitter
• Line

ajax upload jQuery jquery plugin upload plugin upload uploadify