Jquery File Upload with PHP & MySQL

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

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

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

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

CREATE TABLE  `img` (
`id` int(11) NOT NULL,
  `img_name` varchar(255) NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

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

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

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

<?php
class Database {
	
	public $_connect;
	public $_host = "localhost";
	public $_username = "root";
	public $_password = "";
	public $_database = "jquery_upload";
	
	public function __construct(){
		
		$this->_connect = new mysqli($this->_host,$this->_username,$this->_password,$this->_database);
			
			// error connect to database
			if(mysqli_connect_error()){
				trigger_error("Failed to conencto to MySQL: " . mysql_connect_error(),
				 E_USER_ERROR);
			}
	}

	//insert image name to database
	public function addImage($img_name){
		
		$db = $this->_connect;
		$img = $db->prepare("INSERT INTO img(id,img_name) VALUES( NULL,? )");
		$img->bind_param("s",$img_name);
		if(!$img->execute()){
			echo $db->error;
		}
	
	}
	
	//delete image name form database
	public function delImage($img_name){
		
		$db = $this->_connect;
		$img = $db->prepare("DELETE FROM img WHERE img_name = ?");
		$img->bind_param("s",$img_name);
		if(!$img->execute()){
			echo $db->error;
		}
		
	}
	
}

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

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

require "class.database.php";

class UploadHandler extends Database{
/* *************/
}

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

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

    protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
            $index = null, $content_range = null) {
        $file = new \stdClass();
        $file->name = $this->get_file_name($uploaded_file, $name, $size, $type, $error,
            $index, $content_range);
        $file->size = $this->fix_integer_overflow((int)$size);
        $file->type = $type;
        if ($this->validate($uploaded_file, $file, $error, $index)) {
            $this->handle_form_data($file, $index);
            $upload_dir = $this->get_upload_path();
            if (!is_dir($upload_dir)) {
                mkdir($upload_dir, $this->options['mkdir_mode'], true);
            }
            $file_path = $this->get_upload_path($file->name);
            $append_file = $content_range && is_file($file_path) &&
                $file->size > $this->get_file_size($file_path);
            if ($uploaded_file && is_uploaded_file($uploaded_file)) {
                // multipart/formdata uploads (POST method uploads)
                if ($append_file) {
                    file_put_contents(
                        $file_path,
                        fopen($uploaded_file, 'r'),
                        FILE_APPEND
                    );
                } else {
                    move_uploaded_file($uploaded_file, $file_path);
                }
            } else {
                // Non-multipart uploads (PUT method support)
                file_put_contents(
                    $file_path,
                    fopen('php://input', 'r'),
                    $append_file ? FILE_APPEND : 0
                );
            }
            $file_size = $this->get_file_size($file_path, $append_file);
            if ($file_size === $file->size) {
                $file->url = $this->get_download_url($file->name);
                if ($this->is_valid_image_file($file_path)) {
                    $this->handle_image_file($file_path, $file);
                }
            } else {
                $file->size = $file_size;
                if (!$content_range && $this->options['discard_aborted_uploads']) {
                    unlink($file_path);
                    $file->error = $this->get_error_message('abort');
                }
            }
            $this->set_additional_file_properties($file);
			
        }
		
		//insert image name to database
		$insert_name = new database();
		$insert_name->addImage($file->name);
		
        return $file;
    }

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

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

    public function post($print_response = true) {
        if ($this->get_query_param('_method') === 'DELETE') {
            return $this->delete($print_response);
        }
        $upload = $this->get_upload_data($this->options['param_name']);
        // Parse the Content-Disposition header, if available:
		
	//$content_disposition_header = $this->get_server_var('HTTP_CONTENT_DISPOSITION');
	
//Change File Name
	$content_disposition_header = date('Y-m-d')."-".rand(0,99999);
		
        $file_name = $content_disposition_header ?
        
			rawurldecode(preg_replace(
                '/(^[^"]+")|("$)/',
                '',
                $content_disposition_header
            )) : null;

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

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

    public function delete($print_response = true) {
        $file_names = $this->get_file_names_params();
        if (empty($file_names)) {
            $file_names = array($this->get_file_name_param());
        }
        $response = array();
        foreach($file_names as $file_name) {
            $file_path = $this->get_upload_path($file_name);
            $success = is_file($file_path) && $file_name[0] !== '.' && unlink($file_path);
            if ($success) {
                foreach($this->options['image_versions'] as $version => $options) {
                    if (!empty($version)) {
                        $file = $this->get_upload_path($file_name, $version);
                        if (is_file($file)) {
                            unlink($file);
                        }
                    }
                }
            }
			
            $response[$file_name] = $success;
			
			//delete image name form database
			$insert_name = new database();				
			$insert_name->delImage($file_name);
								
        }
        return $this->generate_response($response, $print_response);
    }

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

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

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