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

uploadify-logo
www.uploadify.com

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

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

Loading

Comments

  1. Pingback: Tweets that mention jQuery upload plugin very cool !! oxygenyoyo.com | oxygenyoyo -- Topsy.com
  2. Pingback: jQuery plugin :: uploadify | www.ywcmag.com | YWC - Magazine
  3. ภาษาไทยครับ ไฟล์ภาษาไทย ส่งไปอักขระไม่ตรงครับ 

    ใจอยากให้ตรงครับ แต่ถ้าไม่ได้เปลี่ยนชื่อไฟล์สุ่มเอายังไงได้มั่งครับ

    1. ภาษาไทยไม่ได้ลองอ่ะ แต่มีเหตุจำเป็นต้องใช้ภาษาไทยกับตัวไฟล์เลยหรอครับ ถ้าเก็บเป็นชื่ออื่นแล้วเก็บใน db เป็นภาษาไทยอย่างนี้พอไหวไหมครับ ?

  4. ขอความช่วยเหลือคับ คือ ผมต้องการจะบล๊อคชนิดของไฟล์ที่ไม่ต้องการให้อัพอ่าคับ ซึ่งใน Uploadify ก็มีฟังก์ชั่นนี้อยู่ คือ ‘fileTypeExts’ :: ‘*.gif; *.jpg; *.png’; ประมาณนี้คับ แต่ในDBผมมีการเก็บนามสกุลไฟล์ไว่อยู่แล้วเพื่อให้เพิ่ม/ลบ/แก้ไขผ่านหน้าเว็บได้ ก็เลยอยากจะจับในdbมาวางใส่แทน พอจะมีวิธีไหนป่าวคับ ผมลองเข้าไปแก้ในไฟล์phpแล้ว ไฟล์ไม่เข้าจริงแต่ มันalertไม่ได้ แล้วในหน้าจอมันดันบอกว่าCompleteซะงั้น-.- ช่วยแนะนำทีคับ

    1. ผมยังไม่ค่อยเข้าใจเรื่องที่อธิบายเท่าไรอ่ะครับ คือผมได้ลอง download ตัวใหม่มาแล้ว แล้วลอง fileTypeExts แค่ .gif อย่างเดียว ระบบก็จะไม่ให้เลือกไฟล์ที่ไม่ใช่ไฟล์นามสกุลอย่างอื่นเลยนอกจาก .gif อ่ะครับ เพราะฉะนั้นว่าไม่อย่างไรก็จะเลือกไฟล์ตัวนั้นๆไม่ได้แน่ๆ มันถึงได้ขึ้นแต่ complete เพราะว่าระบบทำการเช็คตอนที่เราเลือกไฟล์แล้ว ส่วนเรื่องที่คุณอธิบายผมยังงงว่ามีเก็บไว้ทำไม อย่างไร ถ้าอย่างไรรบกวนอธิบายเพิ่มเติมให้ด้วยนะครับขอบคุณครับผม

      1. อ่อ คือผมหมายถึงว่าผมเก็บนามสกุลไฟล์ไว้ในฐานข้อมูล พูดง่ายๆคือ ผมเก็บพวกนามสกุลไฟล์ไว้ในdbคับ ก้อเลยต้องดึงจากdbมาใส่ตรง fileTypeExts แทนที่จะใส่โค้ดตรงๆอ่าคับ ตอนนี้ทำได้แล้วคับ ยังไงก้อขอบคุณมากคับ แล้วโอกาสหน้าจะขอคำแนะนำอีกนะคับ :)

  5. ไม่รู้ว่าคุณ Anonymous ยังอยู่รึป่าว ผ่านมาปีนึงละ :D

  6. มันอัพโหลดเสร็จแล้วผมอยากให้กดตรงปุ่ม cancel แล้วให้ลบไฟล์ออกได้ไหมครับ เพราะว่า Function Oncancel มันจะทำงานให้ Alert(”) หรือทำงานตอนที่ยังไม่อัพโหลดเข้าไป พออัพโหลดเข้าไปแล้ว พอกดบันทัดนั้นก็แค่หายไปเลยไม่รู้จะไปเรียกให้มันลบไฟล์ที่ตรงไหนครับ

  7. ถ้าเอาแบบอย่างง่ายก็ให้คุณทำการส่ง Ajax ไปหน้า PHP ซักหน้าหนึ่งให้ตัวโค้ด php ทำการลบไฟล์นั้นแล้วส่งค่ากลับมาว่าลบแล้วอ่ะครับ พอจะเห็นภาพไหมครับ ?

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Message us

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

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ปฎิเสธทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

  • คุกกี้ที่จำเป็น

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

บันทึก