Skip to main content

Jquery File Upload with PHP & MySQL

Jquery File Upload คือ Plugin ที่ช่วยจัดการระบบ การ Upload รูปภาพ รองรับการ upload และ ลบ รูปภาพแบบ ทีละไฟล์ หรือ แบบหลายไฟล์ ทดลองใช้งานตัวอย่างได้ที่ http://blueimp.github.io/jQuery-File-Upload/ จะเห็นว่าคุณสมบัติน่าใช้เลยทีเดียว

jqueryfileupload

การใช้งาน Jquery File Upload กับ ฐานข้อมูล MySQL

หลังจาก Download  Jquery File Upload มาใช้งานในเครื่องของเราแล้ว จะเห็นว่า ไฟล์ภาพที่เรา Upload นั้นถูกบันทึกไว้ในเครื่องเท่านั้น ไม่มีการบันทึกชื่อของภาพ ลง Database เราจำเป็นต้องปรับแต่ง อีกนิดหน่อยเพื่อให้สามารถบันทึกชื่อรูปภาพ ลงใน Database หากเราต้องการแสดงผลรูปภาพใน ส่วนอื่น ๆ ต่อไป

  1. สร้างฐานข้อมูลตัวอย่าง ชื่อฐานข้อมูล jquery_upload และ สร้าง ตาราง img เพื่อเก็บชื่อรูปภาพ

2. สร้างไฟล์ class.database.php  และนำไปไว้ที่  Jquery-File-Upload/server/php/class.database.php

2.1 สร้าง Method addImage สำหรับเพิ่มชื่อรูปภาพเข้าสู่ database

2.2 สร้าง Method delImage สำหรับการลบชื่อรูปภาพออกจาก database

3. แก้ไข  Class UploadHandler ใน Folder Jquery-File-Upload/server/php/UploadHandler.php

3.1 เพิ่มส่วนของการเรียกใช้งาน Class database ที่เราสร้างขึ้น

3.2 เรียกใช้งาน Method addImage() เพื่อเพิ่มชื่อรูปภาพเข้าสู่ database

ประมาณบรรทัดที่ 1102  function handle_file_upload เรียกใช้งาน Method addImage() ก่อนคำสั่ง return

3.3 การเปลี่ยนชื่อรูปภาพ เพื่อป้อง กรณีที่ชื่อซ้ำกัน

แก้ไข ตัวแปร $content_dispostion_header ใน Method post  ประมาณบรรทัดที่ 1306

3.4 เรียกใช้งาน Method delImage() เพื่อ ลบชื่อรูปภาพ ออกจากฐานข้อมูล

ประมาณบรรทัดที่ 1357 ใน Method delete เรียกใช้งาน Method delImage

ทดสอบการเพิ่มรูปภาพ ทดลองเพิ่มรูปภาพที่ละหลาย ๆ รูป

jqueryfileupload11

จะเห็นว่า ชื่อไฟล์ภาพถูกเปลี่ยนเป็นรูปแบบตามที่เรากำหนดเอาไว้ ตรวจสอบที่ฐานข้อมูล

db

เพียงเท่านี้เราก็จะสามารถนำชื่อไฟล์ภาพ ที่ได้ Upload ไว้ไปใช้ได้สะดวกมากยิ่งขึ้น

 

One thought to “Jquery File Upload with PHP & MySQL”

Comments are closed.