วิธีการตรวจสอบว่าผู้ใช้ได้เลือกไฟล์สำหรับการอัปโหลดในฟอร์ม HTML

การจัดการการอัปโหลดไฟล์ในแอพพลิเคชันเว็บเป็นความต้องการทั่วไป ด้วยความที่เบราว์เซอร์แต่ละตัวตีความ HTML ต่างกัน นักพัฒนามักเผชิญกับอุปสรรคในการรับประกันว่าแอพพลิเคชันทำงานอย่างราบรื่นในทุกสภาพแวดล้อม บทความนี้ตอบคำถามที่พบบ่อย: ฉันจะตรวจสอบได้อย่างไรว่าผู้ใช้ได้เลือกไฟล์สำหรับการอัปโหลดในฟอร์ม HTML?

การทำความเข้าใจกับปัญหา

เมื่อจัดการกับไฟล์อินพุต คุณอาจคิดว่าการตรวจสอบว่าได้เลือกไฟล์หรือไม่เป็นเรื่องง่าย สำหรับเบราว์เซอร์สมัยใหม่เช่น Firefox (FF) การตรวจสอบว่าผู้ใช้ได้เลือกไฟล์โดยใช้คุณสมบัติ .files นั้นค่อนข้างง่าย อย่างไรก็ตาม Internet Explorer (IE) โดยเฉพาะเวอร์ชันเก่ามีความท้าทายเฉพาะ

โครงสร้าง HTML

นี่คือโครงสร้าง HTML ที่เรากำลังทำงานอยู่:

<input id="uploadFile" type="file" />
<button id="submitBtn">ยืนยัน</button>

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

วิธีการมาตรฐานสำหรับเบราว์เซอร์สมัยใหม่

ในเบราว์เซอร์สมัยนิยมส่วนใหญ่ การตรวจสอบว่ามีการเลือกไฟล์สามารถทำได้ด้วยการตรวจสอบง่าย ๆ:

var selected = document.getElementById("uploadFile").files.length > 0;

ในโค้ดนี้:

• คุณสมบัติ files จะส่งคืนวัตถุ FileList
• โดยการตรวจสอบ length ของมัน เราสามารถระบุได้ว่าผู้ใช้ได้เลือกไฟล์หรือไม่

อย่างไรก็ตาม วิธีนี้ใช้ไม่ได้ผลใน Internet Explorer เวอร์ชันเก่า

ทางออกสำหรับ Internet Explorer

เพื่อรองรับ IE (และรับประกันความเข้ากันได้กับ Firefox) คุณสามารถใช้วิธีการที่แตกต่างกัน Internet Explorer ไม่สนับสนุนคุณสมบัติ files แต่คุณสามารถตรวจสอบ value ของอินพุตเพื่อดูว่ามีการเลือกไฟล์หรือไม่:

if (document.getElementById("uploadFile").value != "") {
    // มีไฟล์ถูกเลือก
}

การอธิบายโค้ด

1. เข้าถึงองค์ประกอบอินพุต: ใช้ document.getElementById("uploadFile") เพื่อดึงองค์ประกอบไฟล์อินพุต
2. ตรวจสอบค่า: คุณสมบัติ .value จะมีเส้นทางของไฟล์ที่เลือก หากไม่ใช่สตริงว่าง มันแสดงว่าได้มีการเลือกไฟล์

การรวมวิธีเพื่อลดความเข้ากันได้

เพื่อให้ทางออกของคุณทำงานได้ในทุกเบราว์เซอร์ รวมถึง IE และเบราว์เซอร์สมัยใหม่ คุณสามารถรวมทั้งสองวิธี:

var fileInput = document.getElementById("uploadFile");
var isFileSelected = (fileInput.files && fileInput.files.length > 0) || (fileInput.value !== "");

if (isFileSelected) {
    // จัดการตรรกะการอัปโหลดไฟล์ที่นี่
}

การแบ่งโครงสร้างของวิธีนี้:

• การตรวจจับฟีเจอร์: ก่อนอื่นตรวจสอบการมีอยู่ของคุณสมบัติ files เพื่อดูว่าเบราว์เซอร์สนับสนุนหรือไม่
• fallback สำหรับเบราว์เซอร์เก่า: หากคุณสมบัตินี้ไม่มีอยู่ (ตามที่เกิดขึ้นใน IE เวอร์ชันเก่า) เราจะตรวจสอบที่ค่า

สรุป

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

อย่าลืมว่าขณะจัดการการอัปโหลดไฟล์ ให้คำนึงถึงประสบการณ์ของผู้ใช้และให้ข้อเสนอสำหรับการเลือกอย่างชัดเจน ขอให้สนุกกับการเขียนโค้ด!