หน้าเว็บ

วันพฤหัสบดีที่ 10 มิถุนายน พ.ศ. 2553

การสร้างเว็บอัพโหลดไฟล์




      การอัพโหลดไฟล์ ก็คือ การส่งไฟล์จากเครื่องคอมพิวเตอร์ 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



3. กำหนดคุณสมบัติของฟอร์ม โดยการคลิกเม้าส์วางเคอร์เซอร์ให้อยู่ภายฟอร์ม ซึ่งแสดงขอบเขตด้วยเส้นประสีแดง หลังจากนั้นคลิกเลือกแท็ก
ที่ Tag Selector บริเวณขอบล่างซ้ายของหน้าจอ คลิกที่เมนู Window > Properties เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดคุณสมบัติของฟอร์มดังต่อไปนี้


หลังจากการแทรกฟอร์มและกำหนดค่าต่างๆ เสร็จแล้ว ให้คลิกที่ปุ่ม Show Code View ลองสังเกตดูโค้ดที่ Dreamweaver MX สร้างขึ้นมา จะเห็นว่าในแท็ก
จะปรากฏค่า attribute enctype="multipart/form-data" ซึ่งจะต้องใช้เสมอในฟอร์มที่มีการเรียกใช้ Form Object ชนิด File Field


4. แทรก Form Objects ชนิด File Field ลงภายในฟอร์ม หลังจากนั้นให้กำหนดคุณสมบัติของ File Field โดยการคลิกที่เมนู Window > Properties เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดชื่อในช่อง FileField Name เป็น "File" ดังรายละเอียดด้านล่างนี้





5. แทรก Form Objects ชนิด Button ลงภายในฟอร์ม หลังจากนั้นให้กำหนดคุณสมบัติของ Button โดยการคลิกที่เมนู Window > Properties เมื่อปรากฏไดอะล็อก Properties ขึ้นมา ให้กำหนดคุณสมบัติของ Button ดังต่อไปนี้






6. คลิกที่ปุ่ม Show Code View แล้วลองสังเกตดูโค้ดที่ Dreamweaver MX สร้างขึ้นมา จะเห็นว่ามีโค้ดการแทรก Form Object ชนิด File Field และ Button ลงในฟอร์ม ดังรูปด้านล่าง

7. บันทึกไฟล์ fileupload.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 หลังจากนั้นให้พิมพ์โค้ดต่อไปนี้ลงไปในเว็บเพจ








4. บันทึกไฟล์ upload.php

• ทดสอบโดยการเปิดเว็บเบราเซอร์ไปที่ URL http://localhost/phpweb/fileupload.php และเลือกไฟล์เพื่ออัพโหลด หลังจากนั้นคลิกปุ่ม Upload เพื่อเริ่มต้นการอัพโหลดไฟล์

• สังเกตผลลัพธ์จากหน้าจอเว็บเบราเซอร์ และตรวจสอบว่ามีไฟล์ที่อัพโหลดในโฟลเดอร์ "uploadfiles" หรือไม่

1 ความคิดเห็น:

  1. Uploadไม่ได้อะครับพอเปิด fileupload.php มันก็ให้ดาวน์โหลดอ่ะ

    ตอบลบ