version 4.1.0

สร้างฟอร์มสำหรับอัพโหลดแบบไฟล์เดียว

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


สร้างฟอร์มสำหรับอัพโหลดแบบไฟล์เดียว

แนะนำ

บทเรียนนี้ เราจะมาศึกษาวิธีการใช้งาน "ฟอร์มอัพโหลดไฟล์" ร่วมกับ "โมเดล" โดย จะขอยกตัวอย่างออกเป็น 2 แบบคือ ใช้งานร่วมกับ Model (จำลอง) และ ใช้งานร่วมกับ Model ที่เชื่อมต่อฐานข้อมูลจริง ๆ มาเริ่มกันเลย

บทนี้มีอะไรบ้าง

  1. ตอนที่ 1 สร้าง Model (ตัวอย่าง) ขึ้นมา เพื่อทดสอบการอัพโหลดไฟล์
  2. ตอนที่ 2 เรียนคำสั่งเรียกใช้งาน Form เพื่อ ทดสอบการอัพโหลดไฟล์
  3. ตอนที่ 3 ทดสอบ "ฟอร์ม" สำหรับใช้อัพโหลดไฟล์
  4. ตอนที่ 4 การใช้งานฟอร์ม "อัพโหลดไฟล์" ร่วมกับ Model

ตัวอย่างคำสั่ง

 class UploadFile extends CFormModel 
{

    public $fileField;
    
    public function rules() 
    {
        return array(
            array(
                'fileField', 'files', 'file',
                'types' => 'jpg,pdf,doc',  // ให้ (Field) files กำหนดประเภท file ชนิด jpg,pdf,doc
                'wrongType' => 'รองรับไฟล์ jpg, pdf, doc เท่านั้น', 'allowEmpty' => true, // ข้อความเตือน
                'maxSize' => 1024 * 1024 * 5, // 5 MB
                'tooLarge' => 'ขนาดไฟล์ไม่เกิน 5MB' // ขนาดไฟล์
            ),
        );
    }
    
    public function attributeLabels() 
    {
        return array(
            'fileField' => 'อัพโหลดไฟล์',
        );
    }
    
}


ตัวอย่างคำสั่ง

 class ExampleController extends Controller
{
	
    public function actionIndex()
    {
        $model = new UploadFile();
        $this->render('index', array(
            'model' => $model
        ));
    }
	
}

1. สร้างไฟล์ Controller ชื่อว่า "ExampleController.php" ไว้สำหรับการทดสอบ

ตัวอย่างคำสั่ง

 $model = new UploadFile();
$form = $this->beginWidget('CActiveForm', array(
    'id' => 'file-form',
    'enableAjaxValidation' => false,
    'htmlOptions' => array('enctype' => 'multipart/form-data'), // จุดสำคัญ ห้ามลืมใส่ กรณี "อัพโหลดไฟล์ทุกชนิด"
));

echo $form->label($model,'fileField');
echo $form->fileField($model,'fileField');
echo $form->error($model,'fileField');

echo '
'; echo CHtml::submitButton('อัพโหลดไฟล์'); $this->endWidget(); echo '
'; // ตรวจสอบการ Submit if(isset($_POST['UploadFile'])){ $path = Yii::app()->basePath.'/../images/'; // ตำแหน่งที่เก็บไฟล์ D:∖xampp\htdocs\webapp\images\ $file = CUploadedFile::getInstance($model,'fileField'); // ดึง Object CUploadFile ของ Field "fileField" if (is_object($file) && get_class($file)==='CUploadedFile'){ $file->saveAs($path . $file->name); // บันทึกไฟล์ลงในโฟล์เดอร์ D:∖xampp\htdocs\webapp\images\images // ตรวจสอบไฟล์ที่อัพโหลด if(is_file($path . $file->name)){ echo 'อัพโหลดไฟล์สำเร็จ '; $pathImg = Yii::app()->baseUrl.'/images/' . $file->name; echo CHtml::link('ดูไฟล์อัพโหลด', $pathImg, array('target' => '_blank')); }else{ echo 'อัพโหลดไฟล์ไม่สำเร็จ'; } }else{ echo 'ไม่พบไฟล์'; } }

2. สร้างไฟล์ Views ชื่อว่า "index.php" ในโฟล์เดอร์ "example" ไว้สำหรับการทดสอบ



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

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

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

1. เข้าไปยัง URL http://localhost/yii_demo/index.php?r=example ที่เราสร้าง Form ที่ใช้ทดสอบ

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

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

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

2. กดปุ่ม "เลือกไฟล์" และเลือกรูปภาพ (.PNG) ที่เราต้องการ

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

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

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

3. กดปุ่ม "อัพโหลดรูปภาพ" และแสดงสถานะการ "อัพโหลดไฟล์" ตามรูปด้านบนนี้

หากเราต้องการดูรูปภาพที่อัพโหลดได้แล้วนั้น สามารภคลิกที่ลิ้งค์ "ดูไฟล์อัพโหลด" ได้เลยครับ



เขียนคำสั่งลงในไฟล์ Controller

 // in controller
$model = new UploadFile;
 
if(isset($_POST['UploadFile'])){ 
    $model->attributes = $_POST['UploadFile'];
     
    /* อัพโหลดไฟล์ */
    $path = Yii::getPathOfAlias('webroot') . '/images/'; // ตำแหน่งที่เก็บไฟล์ D:∖xampp\htdocs\webapp\images\
    $file = CUploadedFile::getInstances($model, 'FieldName');
    if (is_object($file) && get_class($file) === 'CUploadedFile'){
        $file->saveAs($path . $file->name); // บันทึกไฟล์ลงในโฟล์เดอร์ D:∖xampp\htdocs\webapp\images\images
        $model->FieldName = $file->name; // บันทึกชื่อไฟล์ลงตารางฐานข้อมูล
    }
     
    // บันทึกข้อมูลทั้งหมด
    if($model->save()){
        // บันทึกสำเร็จ
    }else{
        // บันทึกไม่สำเร็จ
    }
     
}


แท็ก


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

author

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

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






Comment