version 4.1.0

ตัวอย่างระบบจัดการอัพโหลดไฟล์หลายไฟล์

  อังคารที่ 27 มกราคม พ.ศ. 2558 เวลา 08:58:29 น.      5,786 ครั้ง


ตัวอย่างระบบจัดการอัพโหลดไฟล์หลายไฟล์

สร้างตาราง "tbl_upload_file"

สร้างตาราง

รูปภาพที่ 1 | สร้างตาราง "tbl_upload_file"

คำสั่งสร้างตาราง

 CREATE TABLE IF NOT EXISTS `tbl_upload_file` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `filename` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `create_at` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;

1. สร้างตารางลงในฐานข้อมูล ตั้งชื่อตารางเป็น "tbl_upload_file" โดยใช้คำสั่ง SQL ตามตัวอย่างด้านบนนี้

สร้างไฟล์ Model

สร้างไฟล์ Model

รูปภาพที่ 2 | สร้างไฟล์ Model

2. สร้างไฟล์ Model ชื่อว่า "UploadFile" ของตาราง "tbl_upload_file"

สร้างไฟล์ Model

สร้างไฟล์ Model

รูปภาพที่ 3 | สร้างไฟล์ Model

3. สร้างไฟล์ Model ชื่อว่า "UploadFile" สำเร็จแล้ว

สร้างไฟล์ Controller

สร้างไฟล์ Controller

รูปภาพที่ 4 | สร้างไฟล์ Controller

4. สร้างไฟล์ Controller ชื่อว่า "UploadFile" ดังภาพ

แก้ไข Method actionIndex()

 class UploadFileController extends Controller
{
    
    public function actionIndex()
    {
        
        $model = new UploadFile();
        
        if(!empty($_FILES)){
            
        
            /* อัพโหลดไฟล์ */
            // ชื่อ Field ที่ต้องการเก็บไฟล์
            $files = CUploadedFile::getInstances($model, 'filename');      
            $filenames = array();

            // กำหนดให้ใช้วันที่นำหน้าชื่อไฟล์ใหม่ Example. "2015-01-30-12-41-55"
            $name_filenew = date('Y-m-d-h-i-s', time());   

            if (isset($files) && count($files) > 0) {

                $id = 0;
                foreach ($files as $file) {

                    ++$id; // ลำดับไฟล์ที่ถูกอัพโหลดเข้ามา
                    // แบ่งแยกข้อมูลไฟล์ไฟล์ออกเป็น "ชื่อไฟล์" และ "นามสกุลไฟล์" Example. array('filename', 'pdf')
                    // ตั้งชื่อไฟล์ไฟล์ใหม่ เป็น "2015-01-30-12-41-55-1.pdf"
                    $name = explode(".", $file->name);    
                    $new_name = $name_filenew . "-" . $id . "." . $name[1];

                    /* Example. "2015-01-30-12-41-55-1.pdf"
                                "2015-01-30-12-41-55-2.pdf"
                                "2015-01-30-12-41-55-3.pdf"
                    */

                    // ระบุตำแหน่ง Path ที่ต้องการเก็บไฟล์ Example. [skeleton]\yii_workshop\uploadfiles
                    // Example. [skeleton]\yii_workshop\uploadfiles\2015-01-30-12-41-55-1.pdf
                    $path = Yii::getPathOfAlias('webroot') . '/uploadfiles/' . $new_name; 

                    // อัพโหลดไฟล์เข้าไปเก็บไว้ตาม Path ที่ระบุด้านบน
                    if($file->saveAs($path)){
                        $filenames[] = $new_name;     // เพิ่มชื่อไฟล์ใหม่ลงไปในตัวแปร $filenames
                    }

                }

            }                     

            // เพิ่มข้อมูลชื่อไฟล์ลงในฐานข้อมูล Files (Field)
            // Example. 2015-01-30-12-41-55-1.pdf,2015-01-30-12-41-55-2.pdf (รูปแบบข้อมูลที่จะถูกบันทึกลงฐานข้อมูล)
            // แบ่งข้อมูลไฟล์ (array) เป็น (string) ด้วยเครื่องหมาย ","
            $model->filename = implode(",", $filenames); 
            
            $model->create_at = date('Y-m-d h:i:s', time());
            
            if($model->save()){
                $this->redirect(array('view', 'id' => $model->id));
            }
        }else{
            $this->render('index', array('model' => $model));
        }
        
    }
    
}

5. เข้าไปแก้ไข Controller ชื่อว่า "UploadFileController.php" ในไดเรคทอรี่ [skeleton]\protected\controllers\UploadFileController.php

สร้าง Form Upload ในไฟล์ View

 // in view (form)
<?php 
    $form = $this->beginWidget('CActiveForm', array(
        'id' => 'upload-file-form', // ชื่อ ฟอร์มอัพโหลด
        'htmlOptions' => array(
            'enctype' => 'multipart/form-data' // เพิ่มเติม
        ),
    ));
?>
    <div>
        <h2>ระบบอัพโหลดไฟล์</h2>
        <p><?php echo $form->labelEx($model, 'filename'); ?></p>
        <?php $this->widget('CMultiFileUpload', array(
            'model' => $model,
            'attribute' => 'filename', // ชื่อ Field ที่ต้องการเก็บไฟล์
            'max' => 5, // จำนวนสูงสุดที่สามารถอัพโหลดเข้าไปได้
            'accept' => 'doc|docx|ppt|pttx|xls|xlsx|pdf', // นามสกุลไฟล์
            'remove' => '[ลบไฟล์]', // ข้อความแสดง เมื่อต้องการลบไฟล์
            'duplicate' => 'พบไฟล์ซ้ำ!', // ข้อความแจ้งเตือน กรณีอัพโหลดไฟล์ซ้ำ
            // ข้อความแจ้งเตือน กรณีอัพโหลดไฟล์ไม่ถูกต้อง
            'denied' => 'นามสกุลไฟล์ไม่ถูกต้อง (doc|docx|ppt|pttx|xls|xlsx|pdf)',
            'options' => array(
                'onFileSelect' => 'function(){;
                    // #upload-file-form อย่าลืมเปลี่ยนชื่อฟอร์ม
                    var files = $("#upload-file-form input[type=file]").length;             
                    // #upload-file-form อย่าลืมเปลี่ยนชื่อฟอร์ม
                    var size = $("#upload-file-form input[type=file]")[(files-1)].files[0].size;    
                    if(size >= 1024*1024*5){  // 5 คือ จำนวนหน่วย MB
                        // ข้อความแจ้งเตือน กรณีขนาดไฟล์เกินกำหนด
                        alert("สามารถอัพโหลดไฟล์ได้ไม่เกิน \"5MB\" เท่านั้น");     
                        return false;
                    }  
                }'
            ),
        )); ?>
        <p><?php echo $form->error($model, 'filename'); ?></p>
        <p><?php echo CHtml::submitButton('Submit'); ?></p>
    </div>
<?php $this->endWidget(); ?>

6. เข้าไปแก้ไขไฟล์ View ชื่อว่า "index.php" ในไดเรคทอรี่ [skeleton]\protected\views\uploadFile\index.php

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 5 | รูปภาพตัวอย่าง

7. สร้างโฟล์เดอร์ "uploadfiles" ลงในไดเรคทอรี่ [skeleton]\uploadfiles\

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 6 | รูปภาพตัวอย่าง

8. เข้าไปยัง URL ดังนี้ http://localhost/yii_workshop/index.php?r=uploadFile

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 7 | รูปภาพตัวอย่าง

9. ทดสอบการอัพโหลดไฟล์ได้ตามความต้องการได้เลย แนะนำให้ 2 - 5 ไฟล์

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 8 | รูปภาพตัวอย่าง

10. อัพโหลดไฟล์เข้าไปไว้ยังโฟล์เดอร์ "uploadfiles" สำเร็จแล้ว

สร้าง Method actionView()

 class UploadFileController extends Controller
{

    public function actionIndex()
    {
        .....
    }

    public function actionView($id)
    {
        $model = UploadFile::model()->findByPk($id);
        $this->render('view', array(
            'model' => $model
        ));
    }
    
}

11. ต่อไปสร้าง Method actionView($id) ลงในไฟล์ "UploadFileController.php" เพื่อแสดงไฟล์ที่เราได้อัพโหลดไว้

สร้างไฟล์ "view.php"

 
$files = explode(',', $model->filename);   // เปลียน string เป็น array
$path = Yii::app()->baseUrl . '/uploadfiles'; // path files
echo '<h2>ดาวโหลดไฟล์ได้ที่นี่</h2>';
echo '<ul>';
foreach ($files as $file) {
    echo '<li><a href="' . $path . '/' . $file . '" style="text-decoration:none;">' . $file . '</a></li>';
}
echo '</ul>';

12. ต่อไปสร้างไฟล์ view ชื่อว่า "view.php" ในไดเรคทอรี่ [skeleton]\protected\views\uploadFile\view.php

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 9 | รูปภาพตัวอย่าง




นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment