อัพโหลดรูปด้วย ckeditor และเก็บ path ลงฐานข้อมูล
อัพโหลดรูปด้วย ckeditor และเก็บ path ลงฐานข้อมูล
CKEditor คือโปรแกรมออกแบบเนื้อหาและคำสั่งแสดงผลบนหน้าเว็บในลักษณะ WYSIWYG HTML editor ที่ได้รับความนิยมในการนำมาพัฒนาเว็บไซต์โดยเฉพาะส่วนของระบบจัดการหลังบ้านหรือ Backend ด้วยเหตุผลที่ว่า มีความครบถ้วนสมบูรณ์ในการปรับแต่งเนื้อหาที่หลากหลาย มีระบบ add-ons ปรับเพิ่มความสามารถของโปรแกรมได้ หรือเลือกที่จะติดตั้งใช้งานเฉพาะส่วนที่จำเป็น
สำหรับเว็บไซต์ การอัพโหลดไฟล์รูปภาพเข้าไปในเนื้อหา สำหรับตัวโปรแกรมสามารถทำได้ผ่าน add-ons image โดยมีวิธีติดตั้งง่าย ๆ ดังนี้
ติดตั้ง add-ons ที่จำเป็น
- 1. ไปที่หน้าเว็บไซต์หลักของ ckeditor.com เลือกไปที่เมนู download และเลือก Online Builder
- 2. เพิ่ม plugins เฉพาะที่เราจำเป็นจะใช้งาน สำหรับ plugins ที่จำเป็นสำหรับการอัพโหลดรูปภาพจะใช้แค่ 2 ส่วนคือ
image และ popup ให้ทำการติดตั้งเข้าไปด้วย
- 3. เสร็จแล้วให้ติ๊กที่ช่อง Agree และกดดาวน์โหลดไฟล์ติดตั้ง ckeditor
- 4. หลังจากดาวน์โหลดเสร็จแล้วให้เปิดไฟล์ config.js ขึ้นมาแก้ไขโดยให้เพิ่ม คำสั่งและชี้ path ของไฟล์ php ที่เราต้องการจะส่ง image data เข้าไป
CKEDITOR.editorConfig = function( config ) { config.extraPlugins = 'image'; config.filebrowserUploadUrl = 'http://localhost/ckupload.php'; }
- 5. เปิดไฟล์ ckupload.php ขึ้นมาและเขียนคำสั่งภาษา PHP สำหรับบันทึกรูปภาพลงบนโฮสและรีเทิร์น path ของรูปกลับไปให้ส่วน editor ด้วย javascript โดยสามารถเขียนคำสั่งได้ดังนี้
$image = 'upload/'.time()."_".$_FILES['upload']['name']; // กำหนดชื่อไฟล์ if (($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name']))){ // ตรวจสอบว่ามีข้อมูลถูกส่งมาหรือป่าว $error = "No file uploaded."; }else{ if(!move_uploaded_file($_FILES['upload']['tmp_name'], $image)){ $error = "Granted Read/Write/Modify permissions."; // ตรวจสอบว่าโฟลเด้อที่จะบันทึกรูปสามารถเขียนได้หรือป่าว } } $callBack = $_GET['CKEditorFuncNum'] ; // ใช้งาน javascript callback function echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($callBack, '$image', '$error');</script>";
- 6. สร้าง folder สำหรับเก็บรูปที่อัพโหลดตั้งชื่อว่า upload และ chmod 777 วางไว้ในชั้นเดียวกับไฟล์ ckupload.php
จากขั้นตอนในข้อที่ 5 ที่ไฟล์ ckupload.php จะทำให้เราสามารถบันทึกข้อมูลในส่วนที่เป็น path ของรูปคือตัวแปร $image เข้าไปในฐานข้อมูลได้ ในขณะเดียวกันรูปก็จะถูกส่งออกไปแสดงผลในหน้าของการจัดการด้วยเช่นกัน