DropzoneJS เป็นตัวอัพโหลดที่มีความสามารถมากมายเลย และที่สำคัญคือใช้งานได้ฟรีด้วยแหละครับ แต่เนื่องจากความสามารถมันมากมาย เลยทำให้บางทีใน Document ของเค้านั้นไม่ได้บอกบางอย่างเอาไว้ด้วย เคนก็เลยรวบรวมไว้ซะเลย เผื่อหลาย ๆ คนที่ใช้แบบเคนจะได้ไม่ต้องไปงมกันเองเนอะ
กำหนดให้ยิงเข้าฟังก์ชั่นอัพโหลดทีละรูป/ไฟล์
ในส่วนนี้ถ้าเราไม่ตั้งค่ามันจะอัพโหลดพื้นฐานไม่แน่ใจว่า 2 หรือ 3 รูปครับ แต่ในกรณีที่เคนเขียนฟังก์ชั่น PHP ไว้ต้องการให้มันอัพโหลดทีละรูปเท่านั้นแม้จะมี 5 รายการ
ทำการกำหนด parallelUploads ให้เป็นจำนวนที่ต้องการ จะได้แบบนี้ครับ
$("div#dropzone").dropzone({ parallelUploads: 1, });
กำหนดให้อัพโหลดได้แค่ 1 รูป/ไฟล์
จะแตกต่างกับอันบนครับ คืออันบนจะสามารถอัพโหลดกี่รูป/ไฟล์ก็ได้ แต่เวลายิงเข้าฟังก์ชั่นบันทึกจะยิงทีละรูป แต่อันนี้จะเป็นการบังคับให้อัพโหลดแค่ 1 รูป/ไฟล์ เท่านั้นครับ
ทำการกำหนด maxFiles ให้เป็นจำนวนไฟล์มากสุดที่ต้องการ และเพิ่มฟังก์ชั่นดักไว้อีกนิดนึงด้วย เผื่อมันบั๊กอัพเกินที่กำหนดมาก็ยังมีฟังก์ชั่นไว้รองรับว่า จะเคลียร์ไฟล์ทั้งหมดยกเว้นไฟล์แรกไฟล์เดียว
$("div#dropzone").dropzone({ maxFiles:1, init: function() { this.on("maxfilesexceeded", function(file) { this.removeAllFiles(); this.addFile(file); }); } });
ส่งค่าพารามิเตอร์แบบที่เปลี่ยนแปลงตลอดเวลา
บางครั้งค่าที่เราต้องการส่งไปกับฟอร์มมันจะถูกเปลี่ยนแปลงตลอดเวลาครับ ไม่คงที่ ถ้าส่งไปด้วยเมธอด params มันจะเป็นค่าคงที่ตลอดเวลา เราเลยต้องทำการกำหนด event ตอนมัน sending ให้ทำการเพิ่มพารามิเตอร์ที่เราต้องการเข้าไป
$("div#dropzone").dropzone({ init: function() { this.on('sending', function(file, xhr, formData){ formData.append('customer_id', $('#cus_id').val() ); formData.append('id', $('#hd_id').val() ); }); } });
Get Attribute ในตัว div dropzone
ไม่รู้จะใช้คำภาษาไทยว่าอะไรดีกับหัวข้อนี้ แต่เอาเป็นว่าที่ต้องการก็คือ เคนจะมีตัวแปล data-type=”front_right_45″ และเคนต้องการเอาค่าตรงนี้ ดึงไปใช้ แล้วก็ไปงง ๆ ว่าต้องทำยังไงถึงจะดึงได้ เพราะเขียนธรรมดามันดึงไม่ได้ครับ ต้องใช้ $(this.element) แบบนี้ แทน $(this)
<!-- สมมติ HTML ของเราเป็นแบบนี้ --> <div id="dropzone" class="dropzone" data-type="front_right_45"></div> <!-- เคนต้องการดึงค่า front_right_45 ที่เก็บใน data-type เพื่อส่งพารามิเตอร์ type_nameไปบันทึกด้วย --> $("div#dropzone").dropzone({ init: function() { this.on('sending', function(file, xhr, formData){ formData.append('type_name', $(this.element).data('type') ); }); }); });
ถ้ามีเทคนิคอะไรเพิ่มเติม เคนจะนำมาเขียนให้เรื่อย ๆ นะครับ ตอนนี้เจอประมาณนี้