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 หากเราต้องการแสดงผลรูปภาพใน ส่วนอื่น ๆ ต่อไป

สร้างฐานข้อมูลตัวอย่าง ชื่อฐานข้อมูล 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 ;

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;
		}
		
	}
	
}

<?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{
/* *************/
}

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;
    }

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;

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);
    }

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 ไว้ไปใช้ได้สะดวกมากยิ่งขึ้น

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

Popular Posts