File Upload

อภิชญา ทัศมาลี 640710149

การอัปโหลดไฟล์ใน PHP

PHP ช่วยให้สามารถอัปโหลดไฟล์ได้ทั้งไฟล์เดียวและหลายไฟล์ได้ด้วยโค้ดเพียงไม่กี่บรรทัด รองรับการอัปโหลดไฟล์ประเภทไบนารีและไฟล์ข้อความ การอัปโหลดไฟล์จากฝั่งผู้ใช้ไปยังเซิร์ฟเวอร์นั้นสามารถทำได้ง่าย

ขั้นตอนการอัปโหลดไฟล์ใน PHP

1. เปิดหน้าเว็บที่มีฟอร์ม HTML จะประกอบด้วยฟิลด์สำหรับเลือกไฟล์

2. ให้ทำการเลือกไฟล์

3. เส้นทางของไฟล์ที่เราเลือกจะปรากฏในฟิลด์ข้อความ

4. ไฟล์ที่เราเลือกจะถูกส่งไปยังไดเรกทอรีชั่วคราวบนเซิร์ฟเวอร์

5. สคริปต์ PHP ที่ถูกระบุในแอคชันของฟอร์มจะตรวจสอบว่าไฟล์ได้ถูกส่งมาแล้วหรือไม่ และคัดลอกไฟล์ไปยังไดเรกทอรีที่ต้องการ

6. สคริปต์ PHP จะแจ้งผลลัพธ์ว่าการอัปโหลดสำเร็จหรือไม่

การตั้งค่าไฟล์ “php.ini”

ตรวจสอบว่า PHP ถูกตั้งค่าให้รองรับการอัปโหลดไฟล์ ในไฟล์ “php.ini” ให้ค้นหาการตั้งค่า file_uploads และตั้งค่าให้เป็น On:

file_uploads = On

สร้างฟอร์ม HTML

สร้างฟอร์ม HTML ที่อนุญาตให้ผู้ใช้เลือกไฟล์รูปภาพเพื่ออัปโหลด:

Code:

<form action="upload.php" method="post"enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit">
</form>

</body>
</html>

Output

อธิบายโค้ด

• action ระบุ URL หรือไฟล์ PHP ที่จะรับข้อมูลจากฟอร์ม

• <form> เป็นฟอร์มที่ให้ผู้ใช้สามารถอัปโหลดไฟล์ได้ ข้อมูลจะถูกส่งไปยังไฟล์ upload.php

• method="post" เราจะใช้วิธี POST ส่งข้อมูลจากฟอร์มไปยังเซิร์ฟเวอร์

• enctype="multipart/form-data" คือตัวบอกให้เบราว์เซอร์ว่าในฟอร์มนี้เราจะส่งข้อมูลแบบหลายส่วน

• <input type="file" name="fileToUpload" id="fileToUpload"> ตรงนี้คือฟิลด์ที่ให้ผู้ใช้เลือกไฟล์ที่จะอัปโหลด แล้วไฟล์นั้นจะถูกอัปโหลดในชื่อ fileToUpload บนเซิร์ฟเวอร์

• <input type="submit" value="Upload Image" name="submit"> ปุ่มที่ให้ผู้ใช้กดเพื่อทำการอัปโหลดไฟล์ แล้ว ฟอร์มจะถูกส่งไปยังเซิร์ฟเวอร์พร้อมกับไฟล์ที่เลือก

ข้อกำหนดสำหรับฟอร์ม HTML:

• method="post" ส่งข้อมูลผ่าน POST

• enctype="multipart/form-data" บอกว่าจะส่งข้อมูลประเภทใด

• type="file" ใน <input> สร้างช่องให้ผู้ใช้เลือกไฟล์

สร้างสคริปต์อัปโหลดไฟล์

ไฟล์ upload.php

Code:

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  } else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}
?>

อธิบายโค้ด

• target_dir = "uploads/" กำหนดไดเร็กทอรีที่ไฟล์ถูกบันทึก

• target_file กำหนดเส้นทางของไฟล์ที่ถูกอัปโหลด

• uploadOk ใช้เพื่อตรวจสอบว่าการอัปโหลดไฟล์ได้รับอนุญาตหรือไม่

• imageFileType เก็บประเภทนามสกุลไฟล์

Note: ต้องสร้างไดเร็กทอรีชื่อ uploads ในไดเร็กทอรีเดียวกันกับไฟล์ เพื่อให้ไฟล์ที่อัปโหลดถูกบันทึกไว้

ตรวจสอบว่าไฟล์มีอยู่แล้วหรือไม่

เช็คว่ามีไฟล์อยู่ในโฟลเดอร์ uploads หรือไม่ หากมีไฟล์อยู่แล้วจะแสดงข้อความข้อผิดพลาดและตั้งค่า $uploadOk เป็น 0:

// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

ตรวจสอบข้อผิดพลาดของการอัปโหลดไฟล์

ใช้ switch เพื่อจัดการข้อผิดพลาดที่เกิดขึ้นในกระบวนการอัปโหลด

switch ($_FILES['upfile']['error']) {
    case UPLOAD_ERR_OK:
        break;
    case UPLOAD_ERR_NO_FILE:
        throw new RuntimeException('No file sent.');
    case UPLOAD_ERR_INI_SIZE:
    case UPLOAD_ERR_FORM_SIZE:
        throw new RuntimeException('Exceeded filesize limit.');
    default:
        throw new RuntimeException('Unknown errors.');
}

อธิบาย

• UPLOAD_ERR_OK ไม่มีข้อผิดพลาด

• UPLOAD_ERR_NO_FILE ไม่มีไฟล์ถูกส่งมา

• UPLOAD_ERR_INI_SIZE และ UPLOAD_ERR_FORM_SIZE ขนาดไฟล์เกินจากที่กำหนด

• ข้อผิดพลาดจะถูกจัดการใน default

ตรวจสอบ MIME Type ของไฟล์

ใช้ finfo ในการตรวจสอบประเภทของไฟล์จาก MIME Type

$finfo = new finfo(FILEINFO_MIME_TYPE);
if (false === $ext = array_search(
    $finfo->file($_FILES['upfile']['tmp_name']),
    array(
        'jpg' => 'image/jpeg',
        'png' => 'image/png',
        'gif' => 'image/gif',
    ),
    true
)) {
    throw new RuntimeException('Invalid file format.');
}

จำกัดขนาดไฟล์

หากไฟล์มีขนาดใหญ่กว่า 1 MB จะไม่อนุญาตให้อัปโหลด:

// Check file size
if ($_FILES["fileToUpload"]["size"] > 1048576) { // 1MB = 1 * 1024 * 1024
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}

จำกัดประเภทไฟล์

โค้ดนี้จะอนุญาตเฉพาะไฟล์ JPG, JPEG, PNG, และ GIF เท่านั้น:

// Allow only specific file formats
if (!in_array($imageFileType, ["jpg", "jpeg", "png", "gif"])) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}

สร้างสคริปต์อัปโหลดไฟล์ที่สมบูรณ์

การแสดงขั้นตอนการอัปโหลดไฟล์ใน PHP ตั้งแต่การตั้งค่า PHP, การสร้างฟอร์ม HTML, ไปจนถึงการอัปโหลดไฟล์

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  } else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}
// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
  } else {
    echo "Sorry, there was an error uploading your file.";
  }
}
?>

ผลลัพธ์

• ถ้าไฟล์ถูกอัปโหลดสำเร็จ เราจะเห็นข้อความว่าไฟล์ถูกอัปโหลด

• ถ้าเกิดข้อผิดพลาด เช่น ไฟล์ขนาดใหญ่เกินไปหรือไม่ใช่ไฟล์รูปภาพที่รองรับ จะมีข้อความแสดงตามที่โค้ดกำหนดตามโค้ดด้านบน

สรุป

เป็นการแสดงขั้นตอนการอัปโหลดไฟล์ใน PHP ตั้งแต่การตั้งค่า PHP, การสร้างฟอร์ม HTML, ไปจนถึงการสร้างสคริปต์อัปโหลดไฟล์

ตัวแปร $_FILES

ตัวแปร $_FILES ใน PHP จะเก็บข้อมูลทั้งหมดที่เกี่ยวข้องกับไฟล์ที่อัปโหลด โดยเราสามารถเข้าถึงรายละเอียดเกี่ยวกับชื่อไฟล์ ประเภทไฟล์ ขนาดไฟล์ ชื่อไฟล์ชั่วคราว และข้อผิดพลาดต่าง ๆ

ตัวอย่างเช่น: ถ้าชื่อไฟล์เป็น filename เราจะสามารถเข้าถึงข้อมูลนี้ตามนี้

• $_FILES['filename']['name']: คืนค่าชื่อไฟล์

• $_FILES['filename']['type']: คืนค่าประเภท MIME ของไฟล์

• $_FILES['filename']['size']: คืนค่าขนาดของไฟล์ (เป็นไบต์)

• $_FILES['filename']['tmp_name']: คืนค่าชื่อไฟล์ชั่วคราวที่ถูกจัดเก็บไว้ในเซิร์ฟเวอร์

• $_FILES['filename']['error']: คืนค่ารหัสข้อผิดพลาด

ฟังก์ชัน move_uploaded_file()

ฟังก์ชัน move_uploaded_file() ใช้ย้ายไฟล์ที่ถูกอัปโหลดไปยังตำแหน่งใหม่ แล้วตรวจสอบว่าไฟล์นั้นถูกอัปโหลดผ่าน POST หรือไม่

Syntax

bool move_uploaded_file ( string $filename , string $destination )

เปรียบเทียบกับ PHP, JAVA, C, และ Python

การอัปโหลดไฟล์เป็นหนึ่งในฟังก์ชันที่จำเป็นในหลายโปรเจกต์ของเว็บไซต์หรือแอปพลิเคชัน มีหลายภาษา เช่น PHP, JAVA, C, และ Python สามารถทำงานนี้ได้ แต่ลักษณะการทำงานจะแตกต่างกันไปตามวิธีการจัดการกับระบบไฟล์และ HTTP request ในแต่ละภาษา

PHP

การอัปโหลดไฟล์ทำได้ง่ายมากด้วยการใช้ฟอร์ม HTML และคำสั่ง PHP ในการจัดการไฟล์ PHP ใช้ตัวแปร $_FILES เพื่อเข้าถึงไฟล์ที่อัปโหลดผ่าน HTTP POST request

Code:

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));

if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "ไฟล์ " . htmlspecialchars(basename($_FILES["fileToUpload"]["name"])) . " ถูกอัปโหลดแล้ว.";
} else {
    echo "ขออภัย, เกิดข้อผิดพลาดในการอัปโหลดไฟล์.";
}
?>

อธิบาย

• $_FILES[“fileToUpload”]: ใช้เก็บข้อมูลไฟล์ที่ถูกอัปโหลดผ่านฟอร์ม

• $_FILES[“fileToUpload”][“name”]: ชื่อของไฟล์ที่ถูกอัปโหลด

• $_FILES[“fileToUpload”][“tmp_name”]: ตำแหน่งไฟล์ชั่วคราวที่เก็บไว้ในเซิร์ฟเวอร์ก่อนย้ายไปยังโฟลเดอร์เป้าหมาย

• $target_dir: เก็บโฟลเดอร์เป้าหมายที่เราต้องการอัปโหลดไฟล์

• $target_file: ใช้เก็บเส้นทางที่สมบูรณ์ของไฟล์ที่จะอัปโหลด โดยประกอบด้วยโฟลเดอร์เป้าหมายและชื่อไฟล์

• $imageFileType: ตัวแปรนี้ใช้เก็บนามสกุลของไฟล์

• move_uploaded_file(): ใช้ย้ายไฟล์จากตำแหน่งชั่วคราวไปยังโฟลเดอร์เป้าหมาย

สรุป

• ใช้งานง่ายสำหรับการอัปโหลดไฟล์ผ่านฟอร์ม HTML

• มีฟังก์ชันที่ช่วยตรวจสอบและย้ายไฟล์ เช่น move_uploaded_file()

• เหมาะสำหรับเว็บแอปพลิเคชันที่ทำงานบนเซิร์ฟเวอร์

JAVA

การอัปโหลดไฟล์มักจะทำงานร่วมกับ Servlet และ JSP หรือ Spring Framework ใช้การเขียนโค้ดที่ซับซ้อนกว่า PHP เนื่องจากต้องจัดการกับ multipart form data และ HTTP request แบบ manual

Code:

@WebServlet("/upload")
@MultipartConfig
public class FileUploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Part filePart = request.getPart("fileToUpload");
        String fileName = Paths.get(filePart.getSubmittedFileName()).getFileName().toString();
        File uploads = new File("uploads");
        
        // อันนี้เป็นการตรวจสอบและสร้างโฟลเดอร์ uploads ถ้าเรายังไม่มี
        if (!uploads.exists()) {
            uploads.mkdir();
        }
        
        File file = new File(uploads, fileName);
        
        try (InputStream input = filePart.getInputStream()) {
            Files.copy(input, file.toPath());
            response.getWriter().println("ไฟล์ถูกอัปโหลดแล้ว: " + fileName);
        } catch (IOException e) {
            response.getWriter().println("เกิดข้อผิดพลาดในการอัปโหลดไฟล์: " + e.getMessage());
        }
    }
}

อธิบาย

• HttpServletRequest request: เข้าถึงข้อมูลที่ถูกส่งมาพร้อมกับคำขอ HTTP

• HttpServletResponse response: ส่งคำตอบกลับไปยังผู้ใช้

• Part filePart: เก็บส่วนของข้อมูลไฟล์ที่ถูกอัปโหลดจากคำขอ

• filePart.getSubmittedFileName(): ดึงชื่อไฟล์ที่ถูกอัปโหลดจากส่วนไฟล์

• Paths.get(): ดึงเส้นทางของไฟล์

• File uploads: สร้างตัวแปรที่อ้างอิงไปยังโฟลเดอร์เป้าหมาย

• Files.copy(): คัดลอกข้อมูลไฟล์

• response.getWriter().println(): การแสดงข้อความตอบกลับไปยังผู้ใช้

สรุป

• มีความยืดหยุ่นสูงแต่โค้ดซับซ้อนกว่า PHP

• ใช้คลาส Part ในการจัดการข้อมูล multipart

• เหมาะสำหรับแอปพลิเคชันขนาดใหญ่ที่ต้องการการจัดการไฟล์ที่ละเอียด

C

ภาษาซีไม่ได้ออกแบบมาเพื่อรองรับการอัปโหลดไฟล์โดยตรงผ่าน HTTP การอัปโหลดไฟล์ใน C จะซับซ้อนมากและไม่ใช่ทางเลือกสำหรับงานที่เกียวกับเว็บ เนื่องจากการจัดการกับ HTTP ต้องใช้การเชื่อมต่อ socket และการ parse ข้อมูล

Code:

#include <stdio.h>
#include <stdlib.h>

void upload_file(const char *filename) {
    FILE *file = fopen(filename, "rb");
    if (!file) {
        printf("ไม่สามารถเปิดไฟล์ได้\n");
        return;
    }
    fclose(file);
    printf("ไฟล์ถูกอัปโหลดแล้ว: %s\n", filename);
}
int main() {
    upload_file("fileToUpload.txt");
    return 0;
}

อธิบาย

• *FILE file: ตัวแปรนี้ใช้เก็บไฟล์ที่เปิดอยู่

• ส่งข้อมูลไฟล์ผ่าน socket ไปยังเซิร์ฟเวอร์

• การจัดการนี้ต้องเขียน socket connection ด้วยตนเอง

สรุป

• การอัปโหลดไฟล์ผ่าน HTTP ด้วย C ทำได้ยากและซับซ้อน

• เหมาะสำหรับโปรเจกต์ที่ต้องการควบคุมระบบอย่างละเอียดและทำงานระดับต่ำ

• ไม่เหมาะสำหรับงานเว็บแอปพลิเคชันทั่วไป

Python

การอัปโหลดไฟล์ได้ง่ายโดยใช้เว็บเฟรมเวิร์ก เช่น Flask หรือ Django ทำให้การทำงานง่ายขึ้นมากเมื่อใช้เฟรมเวิร์กเหล่านี้ เพื่อจัดการ HTTP request และการอัปโหลดไฟล์

Code:

from flask import Flask, request, redirect, url_for
import os

app = Flask(__name__)
UPLOAD_FOLDER = 'uploads/'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/upload', methods=['POST'])
def upload_file():
    if 'fileToUpload' not in request.files:
        return 'ไม่มีไฟล์สำหรับอัปโหลด'
    file = request.files['fileToUpload']
    if file.filename == '':
        return 'ไม่ได้เลือกไฟล์'
    file.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))
    return f'ไฟล์ {file.filename} ถูกอัปโหลดแล้ว'

if __name__ == '__main__':
    app.run(debug=True)

อธิบาย

• Flask: เป็นเฟรมเวิร์ก

• UPLOAD_FOLDER: เก็บเส้นทางของโฟลเดอร์ที่ใช้เก็บไฟล์ที่อัปโหลด

• request.files: ดึงข้อมูลไฟล์ที่ถูกอัปโหลดจากคำขอ HTTP

• file.save(): บันทึกไฟล์ที่อัปโหลดไปยังโฟลเดอร์ที่กำหนด

สรุป

• Python รองรับการอัปโหลดไฟล์ได้ง่ายด้วยเฟรมเวิร์กเว็บ

• มีฟังก์ชันการจัดการไฟล์ที่เรียบง่าย

• เหมาะสำหรับงานเว็บแอปพลิเคชันที่เน้นการพัฒนาอย่างรวดเร็ว

เปรียบเทียบทั้ง 4 ภาษาในรูปแบบตาราง

PHP เหมาะกับงานอัปโหลดไฟล์ที่เรียบง่ายตามเว็บไซต์ทั่วไป ส่วน Java และ Python เหมาะกับโปรเจกต์ที่มีขนาดใหญ่ หรือระบบที่ต้องการการจัดการ HTTP ที่ซับซ้อน C อาจจะไม่ใช่ตัวเลือกที่จะเลือกมาทำงานนี้

ภาษา	ความง่ายในการอัปโหลดไฟล์	ความยืดหยุ่น	ความซับซ้อน
PHP	ง่าย	จำกัดบางครั้ง	ต่ำ
JAVA	ปานกลาง	ยืดหยุ่นสูง	สูง
C	ยาก	ยืดหยุ่นสูง เน้นเขียนเอง	สูง
Python	ง่าย	ยืดหยุ่นสูง เน้นเฟรมเวิร์ค	ต่ำ

Reference

Adapt the content and example code: W3Schools. (n.d.). Important content.[W3Schools]. W3Schools

Take some of the content and example code: Javatpoint. (n.d.). Important content. [Javatpoint]. Javatpoint

Take some content and adapt it: Tutorialspoint. (n.d.). Uploading Procedure.[Tutorialspoint]. Tutorialspoint

Study the content: CodexWorld. (2024, July 17) Important content. [CodexWorld]. CodexWorld

Take some content and adapt it: PHP.net. (n.d.). Important content.[PHP.net]. PHP

Slide:

5MB

640710149_File Upload.pdf

PDF

Open

Link Video: