จะสร้างตัวอัปโหลดไฟล์ JavaScript ได้อย่างไร

การอัปโหลดไฟล์เป็นคุณสมบัติพื้นฐานของโปรเจ็กต์บนเว็บส่วนใหญ่ในปัจจุบัน ตัวอย่างเช่น เว็บไซต์สมัยใหม่และเว็บแอป เช่น Facebook, LinkedIn, Twitter, Coursera และอื่น ๆ อีกมากมายช่วยให้ผู้ใช้ปลายทางสามารถอัปโหลดไฟล์ เช่น รูปภาพ เอกสาร วิดีโอ ฯลฯ นอกจากนี้ เครื่องมือออนไลน์ เช่น เครื่องมือแก้ไขรูปภาพ เครื่องมือตรวจสอบการลอกเลียนแบบ และตัวแปลง PDF เป็น Word ยังอนุญาตให้ผู้ใช้อัปโหลดไฟล์ บางครั้งทีมภายในก็ต้องการฟีเจอร์การอัปโหลดไฟล์เพื่ออัปโหลดวิดีโอและรูปภาพของผลิตภัณฑ์ แม้ว่าการสร้างเครื่องมืออัปโหลดไฟล์อาจเป็นเรื่องที่ท้าทาย แต่ปัจจุบันมีเครื่องมือและไลบรารีของบุคคลที่สามมากมายที่พร้อมให้ใช้งานซึ่งช่วยนำคุณลักษณะการอัปโหลดไฟล์ไปใช้ในโครงการของคุณได้อย่างรวดเร็ว อย่างไรก็ตาม หากคุณต้องการสร้างเครื่องมืออัปโหลดไฟล์ โดยเฉพาะอย่างยิ่ง เครื่องมืออัปโหลด JavaScript ตั้งแต่เริ่มต้น บทความนี้คือที่ที่เหมาะสม

ในบทความนี้ เราจะแสดงวิธีสร้างเครื่องมืออัปโหลดไฟล์ JavaScript ด้วยวานิลลา JavaScript หรือ Pure JavaScript โดยไม่ต้องใช้ไลบรารีภายนอกใดๆ

คุณสมบัติของผู้อัปโหลดไฟล์คืออะไร?

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

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

วิธีสร้างตัวอัปโหลดไฟล์ JavaScript

ขั้นตอนที่ 1: การตั้งค่าฝั่งเซิร์ฟเวอร์

เราจะใช้แพ็คเกจ HTTP ในตัวเพื่อตั้งค่าเซิร์ฟเวอร์ Node.js เราจะเริ่มต้นด้วยการสร้างโฟลเดอร์ใหม่สำหรับโครงการ:

บริการอัพโหลดไฟล์ mkdir

ต่อไป เราจะสร้างไฟล์ index.js นี่จะเป็นจุดเริ่มต้นของเซิร์ฟเวอร์ของเรา

สุดท้าย เราจะสร้างเซิร์ฟเวอร์ HTTP ที่จะรันบนพอร์ต 8080

ขั้นตอนที่ 2: สร้างส่วนหน้าของตัวอัปโหลดไฟล์ JavaScript

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

ขณะที่เรากำลังสร้างปุ่มอัปโหลดไฟล์อย่างง่าย คุณยังสามารถแก้ไขข้อความของปุ่มหรือเปลี่ยนสีของปุ่มเพื่อวัตถุประสงค์ในการออกแบบได้อีกด้วย

ต่อไป เราจะส่งไฟล์นี้จากแบ็กเอนด์:

ขั้นตอนที่ 3: อ่านไฟล์ที่อัปโหลดที่ส่วนหน้า

หากต้องการอ่านเนื้อหาไฟล์ในส่วนหน้า เราจะใช้วัตถุ 'FileReader' ช่วยให้เว็บแอปสามารถอ่านเนื้อหาไฟล์ (ที่จัดเก็บไว้ในระบบของผู้ใช้) แบบอะซิงโครนัส วัตถุ 'FileReader' มีหลายวิธีในการอ่านไฟล์ ตัวอย่างเช่น เราสามารถอ่านไฟล์ที่อัปโหลดเป็นบัฟเฟอร์อาร์เรย์หรือในข้อมูลไบนารีดิบ เราสามารถอ่านไฟล์เป็น URL ข้อมูลได้ ที่นี่ เราจะใช้วิธีอาร์เรย์เพื่ออ่านไฟล์:

ไฟล์ที่เลือกสามารถเข้าถึงได้ภายใต้ฟิลด์ 'ไฟล์' สำหรับอินพุต:

อ็อบเจ็กต์ 'FileReader' ยังมีตัวฟังเหตุการณ์หลายตัว เช่น 'กำลังดำเนินการ' และ 'กำลังโหลด' เพื่อติดตามการอ่านไฟล์ที่อัปโหลดที่ส่วนหน้า ที่นี่ เราจะใช้เหตุการณ์ 'onload':

ขั้นตอนที่ 4: ส่งไฟล์ที่อัปโหลดไปยังแบ็กเอนด์

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

ดังนั้น ก่อนอื่นเราจะแยกไฟล์ออกเป็นส่วนๆ และส่งไปยังแบ็กเอนด์ทีละไฟล์ เราต้องแน่ใจว่าเราส่งชิ้นส่วนตามลำดับเพื่อไม่ให้ไฟล์เสียหาย นอกจากนี้ เราจะใช้ 'async wait' เพื่อไม่ให้เซิร์ฟเวอร์โหลดคำขอมากเกินไป

ขั้นตอนที่ 5: จัดเก็บก้อนไฟล์บนเซิร์ฟเวอร์

สุดท้าย เราจะได้รับชิ้นส่วนและเก็บไว้ในเซิร์ฟเวอร์

แค่นั้นแหละ. ขณะนี้เรามีเครื่องมืออัปโหลดไฟล์เดียวที่สมบูรณ์แบบสำหรับการอัปโหลดไฟล์ Javascript เรายังสามารถเปิดใช้งานการอัปโหลดไฟล์หลายไฟล์ได้โดยใช้ตัวเลือก 'หลายไฟล์':

<input type=”file” id=”files” หลายรายการ>

เราจะแบ่งไฟล์แต่ละไฟล์ออกเป็นส่วนๆ ทีละไฟล์ และส่งไปยังแบ็กเอนด์

บทสรุป

การอัปโหลดไฟล์เป็นคุณลักษณะที่สำคัญของเว็บแอปและเว็บไซต์สมัยใหม่จำนวนมาก เราสามารถใช้เครื่องมืออัปโหลดไฟล์ของบุคคลที่สาม เช่น ไลบรารี JavaScript หรือ API การอัปโหลดไฟล์ เพื่อใช้งานการอัปโหลดไฟล์ JavaScript ในแอปของเราได้อย่างรวดเร็ว อย่างไรก็ตาม คุณยังสามารถสร้างเครื่องมืออัปโหลดไฟล์ตั้งแต่ต้นด้วยวิธีที่คุณต้องการ ตัวอย่างเช่น คุณสามารถแยกไฟล์ขนาดใหญ่ออกเป็นชิ้นๆ และส่งไปยังแบ็กเอนด์ทีละไฟล์ ในบทความนี้ เราได้สร้างเครื่องมืออัปโหลดไฟล์ JavaScript ด้วย Vanilla JS ตั้งแต่เริ่มต้น