Graphic ComScienceบทที่ 18 |
การอัพโหลดไฟล์ ก็คือ การส่งไฟล์จากเครื่องคอมพิวเตอร์ Client ไปยังเครื่องคอมพิวเตอร์ Server สำหรับภาษา PHP นั้น สามารถเขียนโค้ดอัพโหลดได้เลย โดยเราไม่ต้องไปติดตั้งโมดูลใดๆ เพิ่มเติม เราสามารถสร้างเว็บเพจสำหรับการอัพโหลดไฟล์ได้อย่างง่ายดาย
การสร้างเว็บเพจเพื่ออัพโหลดไฟล์ แบ่งการทำงานได้เป็นขั้นตอนดังต่อไปนี้
· การสร้างฟอร์มสำหรับอัพโหลดไฟล์
· การเขียนสคริปต์ PHP สำหรับการอัพโหลดไฟล์
· การทดสอบระบบดาวน์โหลด
การสร้างฟอร์มสำหรับอัพโหลดไฟล์ |
การสร้างระบบอัพโหลดนั้น Dreamweaver MX จะช่วยได้ในการสร้างฟอร์มสำหรับอัพโหลด ส่วนโค้ดสำหรับจัดการไฟล์ จำเป็นจะต้องสวิทช์ไปที่โหมดโค้ด (Code View) เพื่อเขียนโค้ดเอง
ในขั้นตอนแรกจะเป็นการใช้ Dreamweaver MX แทรกฟอร์มลงในเว็บเพจ สำหรับให้ผู้ใช้สามารถคลิกปุ่ม Browse… เลือกไฟล์ที่ต้องการอัพโหลด นอกจากนั้นก็ยังมีการแทรกปุ่ม Upload สำหรับคลิกเพื่อเริ่มต้นการอัพโหลดไฟล์
ขั้นตอนการสร้างฟอร์มสำหรับอัพโหลดไฟล์:
1. เปิดโปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ fileupload.php
2. แทรกฟอร์มลงในเว็บเพจ โดยคลิกที่เมนู Insert > Form
รูปแสดง Design View หลังจากแทรกแท็ก <form>
3. กำหนดคุณสมบัติของฟอร์ม โดยการคลิกเม้าส์วางเคอร์เซอร์ให้อยู่ภายฟอร์ม ซึ่งแสดงขอบเขตด้วยเส้นประสีแดง หลังจากนั้นคลิกเลือกแท็ก <form> ที่ Tag Selector บริเวณขอบล่างซ้ายของหน้าจอ คลิกที่เมนู Window > Properties เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดคุณสมบัติของฟอร์มดังต่อไปนี้
ค่าของไดอะล็อก |
ค่าที่กำหนด |
Form Name |
fmUpload |
Action |
upload.php |
Method |
POST |
Enctype |
Multipart/form-data |
ตารางแสดงไดอะล็อกกำหนดคุณสมบัติของแท็ก <form>
รูปแสดงไดอะล็อกกำหนดคุณสมบัติของแท็ก <form>
หลังจากการแทรกฟอร์มและกำหนดค่าต่างๆ เสร็จแล้ว ให้คลิกที่ปุ่ม Show Code View 
แล้วลองสังเกตดูโค้ดที่ Dreamweaver MX สร้างขึ้นมา จะเห็นว่าในแท็ก <form> จะปรากฏค่า attribute enctype="multipart/form-data" ซึ่งจะต้องใช้เสมอในฟอร์มที่มีการเรียกใช้ Form Object ชนิด File Field
4. แทรก Form Objects ชนิด File Field ลงภายในฟอร์ม หลังจากนั้นให้กำหนดคุณสมบัติของ File Field โดยการคลิกที่เมนู Window > Properties เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดชื่อในช่อง FileField Name เป็น "File" ดังรายละเอียดด้านล่างนี้
ค่าของไดอะล็อก |
ค่าที่กำหนด |
FileFieldName |
File |
CharWidth |
50 |
ตารางแสดงไดอะล็อกกำหนดคุณสมบัติของ Form Object ชนิด File Field
รูปแสดงไดอะล็อกกำหนดคุณสมบัติของ Form Object ชนิด File Field
5. แทรก Form Objects ชนิด Button ลงภายในฟอร์ม หลังจากนั้นให้กำหนดคุณสมบัติของ Button โดยการคลิกที่เมนู Window > Properties เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดคุณสมบัติของ Button ดังต่อไปนี้
ค่าของไดอะล็อก |
ค่าที่กำหนด |
Label |
Upload |
Action |
Submit form |
ตารางแสดงไดอะล็อกกำหนดคุณสมบัติของ Form Object ชนิด Button
รูปแสดงไดอะล็อกกำหนดคุณสมบัติของ Form Object ชนิด Button
6. คลิกที่ปุ่ม Show Code View แล้วลองสังเกตดูโค้ดที่ Dreamweaver MX สร้างขึ้นมา จะเห็นว่ามีโค้ดการแทรก Form Object ชนิด File Field และ Button ลงในฟอร์ม ดังรูปด้านล่าง
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-874"> </head> <body>
<form action="upload.php" method="POST" enctype="multipart/form-data" name="fmUpload">
<input name="File" type="file" value="" size="50"> <input name="" type="submit" value="Upload">
</form>
</body> </html> |
รูปแสดงโค้ดของไฟล์ fileupload.php
7. บันทึกไฟล์ fileupload.php
การเขียนสคริปต์ PHP สำหรับการอัพโหลดไฟล์ |
ขั้นตอนต่อไปนี้ จะเป็นการเขียนโค้ด PHP สำหรับจัดการไฟล์ที่ถูกอัพโหลดขึ้นมาบนเซิร์ฟเวอร์ เข้าไว้ในไดเร็คทอรี่หรือโฟลเดอร์ที่กำหนดไว้
ขั้นตอนการเขียนสคริปต์ PHP สำหรับการอัพโหลดไฟล์:
1. สร้างโฟลเดอร์สำหรับจัดเก็บไฟล์ โดยการคลิกที่เมนู Site > Site Files จะปรากฏแถบ Files ที่ด้านขวาของหน้าจอ หลังจากนั้นชี้เม้าส์ที่ตำแหน่งบรรทัดแรกของแถบ Files คลิกเม้าส์ปุ่มขวา จะปรากฏเมนูให้คลิกเลือก New Folder และกำหนดชื่อโฟลเดอร์เป็น "uploadfiles"
|
|
2. เปิดโปรแกรม Dreamweaver MX คลิกเมนู File > New จะปรากฏไดอะล็อก New Document ขึ้นมา ให้คลิกแท็บ General เลือก Dynamic Page > PHP หลังจากนั้นคลิกปุ่ม Create บันทึกเป็นไฟล์ upload.php
3. คลิกที่ปุ่ม Show Code View 
หลังจากนั้นให้พิมพ์โค้ดต่อไปนี้ลงไปในเว็บเพจ
// Upload full path (Detect path automatically) if (!defined('UPLOADDIR')) define('UPLOADDIR', (dirname(__FILE__) ."/uploadfiles") );
อธิบาย: |
//checks if file uploaded if (is_uploaded_file($_FILES['File']['tmp_name'])) {
อธิบาย: เรียกใช้ฟังก์ชั่น is_uploaded_file() ของ PHP สำหรับตรวจสอบว่ามีการอัพโหลดไฟล์หรือไม่ โดยตรวจสอบจากไฟล์ที่ถูกเก็บไว้ชั่วคราว $_FILES['File']['tmp_name']) ฟังก์ชั่นนี้จะถูกใช้ในการตรวจสอบข้อผิดพลาดด้วย กล่าวคือ หากมีการอัพโหลดไฟล์ จะส่งสถานะกลับเป็น TRUE |
$File_tmpname = $_FILES["File"]["tmp_name"]; $File_name = $_FILES["File"]["name"]; $File_type = $_FILES["File"]["type"]; $File_extension = substr($File_type,(strrpos($File_type,"/")+1)); $File_size = $_FILES["File"]["size"];
อธิบาย: ข้อมูลเกี่ยวกับไฟล์ที่อัพโหลดจะถูกจัดเก็บไว้ในตัวแปรก่อน ก่อนที่จะนำตัวแปรไปใช้งานในขั้นตอนต่อไป
|
if ( move_uploaded_file($File_tmpname, (UPLOADDIR . "/" . $File_name)) ) { } else { echo "<br>File uploading failure."; }
อธิบาย: หากมีการอัพโหลดไฟล์ จะย้ายไฟล์จากไฟล์ชั่วคราว (Temporary) ไปที่โฟลเดอร์ที่จัดเก็บไฟล์ โดยเรียกใช้ฟังก์ชั่น move_upload_file() - เมื่อย้ายไฟล์ด้วยฟังก์ชั่น move_upload_file() ไม่สำเร็จ จะแสดงข้อความ "File uploading failure." |
} else { //else checks if file uploaded echo "<br>No file selected for uploading."; } //end checks if file uploaded
อธิบาย: หากไม่มีการอัพโหลดไฟล์จะแสดงข้อความ "No file for uploading." |
4. บันทึกไฟล์ upload.php
การทดสอบระบบอัพโหลดไฟล์ |
· ทดสอบโดยการเปิดเว็บเบราเซอร์ไปที่ URL http://localhost/phpweb/fileupload.php และเลือกไฟล์เพื่ออัพโหลด หลังจากนั้นคลิกปุ่ม Upload เพื่อเริ่มต้นการอัพโหลดไฟล์
· สังเกตผลลัพธ์จากหน้าจอเว็บเบราเซอร์ และตรวจสอบว่ามีไฟล์ที่อัพโหลดในโฟลเดอร์ "uploadfiles" หรือไม่
