jQuery: upload แบบ ajax

การอัปโหลดไฟล์ (File Upload) เป็นฟังก์ชันที่สำคัญอย่างยิ่งในเว็บแอปพลิเคชันสมัยใหม่ แต่หากใช้การส่งฟอร์มแบบดั้งเดิม (Traditional Form Submission) จะทำให้เกิดการรีเฟรชหน้าจอ (Page Refresh) ซึ่งส่งผลเสียต่อประสบการณ์ผู้ใช้ (User Experience) อย่างมาก

ในฐานะ Senior Architect เราจึงแนะนำให้ใช้เทคนิค Asynchronous JavaScript and XML (AJAX) ร่วมกับ jQuery เพื่อจัดการกระบวนการอัปโหลดไฟล์ทั้งหมดในเบื้องหลัง (Background) ทำให้หน้าเว็บยังคงลื่นไหลและตอบสนองได้ทันที บทความนี้จะเจาะลึกวิธีการ implement ระบบ Upload ไฟล์ด้วย AJAX อย่างสมบูรณ์ โดยผสานการทำงานเข้ากับฐานข้อมูล PostgreSQL เพื่อให้ได้ระบบที่ทรงประสิทธิภาพและเป็นมาตรฐานระดับองค์กร

🚀 หลักการทำงานของ jQuery AJAX File Upload

หัวใจสำคัญของการอัปโหลดไฟล์แบบ AJAX คือการใช้ FormData API ซึ่งเป็นเครื่องมือที่ช่วยให้เราสามารถสร้าง Object ที่มีโครงสร้างเหมือนกับข้อมูลที่ส่งผ่านฟอร์ม HTML ได้อย่างสมบูรณ์ แม้ว่าเราจะไม่ได้กดปุ่ม Submit จริงๆ ก็ตาม การทำงานจะแบ่งออกเป็น 3 ส่วนหลักคือ Client-Side (jQuery), Network Transfer (AJAX), และ Server-Side (PostgreSQL)

💻 ขั้นตอนที่ 1: การเตรียมข้อมูลฝั่ง Client (jQuery)

เราต้องดักจับเหตุการณ์การ Submit ของ Form และป้องกันการส่งแบบปกติ จากนั้นจึงสร้าง FormData เพื่อบรรจุไฟล์และข้อมูลอื่นๆ เข้าไป

JavaScript

// 1. ดักจับ Event และป้องกัน Default Behavior
$('form#uploadForm').on('submit', function(event) {
    event.preventDefault();
    
    // 2. สร้าง FormData Object
    const formData = new FormData(this);
    
    // 3. ส่งข้อมูลผ่าน AJAX
    $.ajax({
        url: '/api/upload-file',
        type: 'POST',
        data: formData,
        contentType: false, // สำคัญ: ต้องตั้งค่านี้
        processData: false, // สำคัญ: ต้องตั้งค่านี้
        success: function(response) {
            console.log('Upload สำเร็จ:', response.message);
        },
        error: function(xhr) {
            console.error('Upload ล้มเหลว:', xhr.responseText);
        }
    });
});

💾 ขั้นตอนที่ 2: การรับและประมวลผลข้อมูลฝั่ง Server (PostgreSQL)

เมื่อข้อมูลถูกส่งมาถึง Backend Endpoint (เช่น Node.js, PHP, Python) ระบบจะต้องรับไฟล์ที่อัปโหลดมา (ซึ่งมักถูกบันทึกเป็นไฟล์ชั่วคราว) จากนั้นจึงทำการบันทึก Metadata ของไฟล์นั้นๆ ลงในตารางใน PostgreSQL

สมมติว่าเรามีตารางชื่อ file_uploads และไฟล์ถูกบันทึกที่พาธ /uploads/unique_file_name.pdf เราจะใช้คำสั่ง SQL เพื่อบันทึกข้อมูล:

SQL

-- PostgreSQL Query
INSERT INTO file_uploads (file_name, file_path, uploaded_by, upload_date) VALUES 
('report_q3.pdf', 'uploads/2023/report_q3.pdf', 'user_123', NOW());

-- ตัวอย่างการดึงข้อมูลล่าสุด
SELECT * FROM file_uploads ORDER BY upload_date DESC LIMIT 1;

✅ สรุปและข้อดีทางสถาปัตยกรรม

การใช้ jQuery AJAX ร่วมกับ FormData ทำให้เราสามารถสร้างประสบการณ์ผู้ใช้ที่ราบรื่น (Seamless UX) โดยที่หน้าเว็บไม่เกิดการรีเฟรชใดๆ การจัดการข้อมูลที่ Backend ด้วย PostgreSQL อย่างเป็นระบบ ไม่เพียงแต่ช่วยให้การจัดเก็บข้อมูลมีความน่าเชื่อถือ แต่ยังช่วยให้เราสามารถ Query, Index, และจัดการความสัมพันธ์ของข้อมูลไฟล์ได้อย่างมีประสิทธิภาพสูงสุด นี่คือการออกแบบระบบที่สมบูรณ์แบบทั้งในมุมมองของ Frontend และ Database Layer