อัพโหลดรูปด้วย ckeditor และเก็บ path ลงฐานข้อมูล

อัพโหลดรูปด้วย 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 เข้าไปในฐานข้อมูลได้ ในขณะเดียวกันรูปก็จะถูกส่งออกไปแสดงผลในหน้าของการจัดการด้วยเช่นกัน