การอัปโหลดไฟล์และการจัดการฟอร์มแบบหลายส่วน
รับไฟล์จากผู้ใช้ด้วยอินพุตไฟล์ แสดงตัวอย่างบนไคลเอนต์ และประมวลผลการอัปโหลดแบบหลายส่วนบนเซิร์ฟเวอร์ พร้อมการตรวจสอบความถูกต้องและความคืบหน้า
การอัปโหลดไฟล์และการจัดการฟอร์มแบบหลายส่วน เป็นบทเรียน Next.js 15 Fullstack Web Apps ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Next.js 15 Fullstack Web Apps และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Next.js 15 Fullstack Web Apps มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
The File Input
Users send files through <input type="file">. Adding multiple allows several files, and accept filters the picker by type.
<input type="file" accept="image/*" multiple />Reading Selected Files
The input exposes a FileList on its files property. Each File carries the name, size, and MIME type.
function onChange(e) {
const file = e.target.files[0];
console.log(file.name, file.size, file.type);
}Client-Side Preview
Generate an instant preview without uploading using URL.createObjectURL, which makes a temporary local URL for the file.
const url = URL.createObjectURL(file);
setPreview(url); // <img src={preview} />Client-Side Validation
Reject bad files before they leave the browser to save bandwidth and give fast feedback:
- Check
file.typeagainst allowed MIME types - Check
file.sizeagainst a max
if (file.size > 5 * 1024 * 1024) {
alert('Max 5 MB');
return;
}What Is multipart/form-data?
Files cannot ride in JSON. The browser encodes them as multipart/form-data: each field becomes a part with its own headers, and binary file content stays intact.
Building FormData
The FormData object assembles a multipart body programmatically. Append fields and files, then send it with fetch — do not set the Content-Type yourself; the browser adds the boundary.
const fd = new FormData();
fd.append('avatar', file);
fd.append('userId', '42');
await fetch('/api/upload', { method: 'POST', body: fd });Handling Uploads in Next.js
A Server Action or route handler reads the multipart body. With the Web API, call request.formData() and pull the file out.
export async function POST(req) {
const form = await req.formData();
const file = form.get('avatar');
const bytes = await file.arrayBuffer();
// save bytes...
return Response.json({ ok: true });
}Server-Side Validation
Never trust the client. Re-validate on the server: confirm the MIME type, enforce the size limit, and sanitize the filename to avoid path traversal before writing to disk or storage.
Storing Files
For production, do not store uploads on the app server filesystem (it is ephemeral). Stream them to object storage such as S3 or a managed blob store, and save only the resulting URL in your database.
Upload Progress
To show a progress bar you need byte-level events, which fetch does not expose for uploads. Use XMLHttpRequest and listen to its upload.onprogress event.
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
setPct(Math.round((e.loaded / e.total) * 100));
};
xhr.open('POST', '/api/upload');
xhr.send(fd);Security Checklist
Safe uploads require:
- Allowlist of MIME types and extensions
- Hard size limits enforced server-side
- Randomized, sanitized stored filenames
- Never executing or serving uploads from a trusted path
Quick Check
Test your file-upload knowledge.
Recap
You learned to handle uploads end to end:
- The file input yields a
FileListwith name, size, type - Preview with
createObjectURLand validate on the client - Send a FormData multipart body; read it with
request.formData() - Always re-validate server-side, store in object storage, and follow the security checklist
เรียนรู้ TypeScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 12
- บทเรียน
- 48
คำถามที่พบบ่อย
บทเรียน “การอัปโหลดไฟล์และการจัดการฟอร์มแบบหลายส่วน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การอัปโหลดไฟล์และการจัดการฟอร์มแบบหลายส่วน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Next.js 15 Fullstack Web Apps ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Next.js 15 Fullstack Web Apps มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การอัปโหลดไฟล์และการจัดการฟอร์มแบบหลายส่วน”
รับไฟล์จากผู้ใช้ด้วยอินพุตไฟล์ แสดงตัวอย่างบนไคลเอนต์ และประมวลผลการอัปโหลดแบบหลายส่วนบนเซิร์ฟเวอร์ พร้อมการตรวจสอบความถูกต้องและความคืบหน้า คุณปฏิบัติ Next.js 15 Fullstack Web Apps ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Next.js 15 Fullstack Web Apps หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Next.js 15 Fullstack Web Apps บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การอัปโหลดไฟล์และการจัดการฟอร์มแบบหลายส่วน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Next.js 15 Fullstack Web Apps นี้ได้ไหม
ได้ บทเรียน Next.js 15 Fullstack Web Apps ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- คอมโพเนนต์ควบคุมและสถานะ
- การตรวจสอบแบบฟอร์มด้วย React Hook Form
- แบบฟอร์มฟูลสแตกด้วยการดำเนินการเซิร์ฟเวอร์
- การอัปโหลดไฟล์และการจัดการฟอร์มแบบหลายส่วน