9 ตัวอย่างฟิลด์อัปโหลดไฟล์โอเพ่นซอร์สที่กำหนดเอง

คุณสามารถค้นหาเครื่องมือที่น่าทึ่งสำหรับการปรับปรุงเว็บฟอร์ม ตั้งแต่ชุดเครื่องมือ UI ไปจนถึงปลั๊กอิน jQuery ขั้นสูง

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

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

1. อัปโหลดไฟล์แบบแบน

นักพัฒนา Wallace Erick ได้สร้างฟิลด์การอัปโหลดแบบเรียบนี้ด้วย CSS และ JavaScript เพียงเล็กน้อย โดยยืมมาจากแนวโน้มของการออกแบบเรียบๆ ซึ่งหลีกเลี่ยงการไล่ระดับสีโดยเน้นที่สีเดียว ซึ่งมักใช้โทนสีเดียว

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

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

2. อัปโหลดไฟล์แบบกำหนดเอง

นี่คือการออกแบบที่ทำให้ฟิลด์อัปโหลดมีความเป็นนามธรรมมากขึ้น นักพัฒนา Aaron Vanston ได้สร้างการอัปโหลดไฟล์นี้เป็นแบบจำลองของไฟล์ที่เราเห็นในเว็บไซต์ขนาดใหญ่

ลองนึกถึงไซต์เทคโนโลยีขนาดใหญ่ เช่น Dropbox, Google+ และ Facebook พวกเขามักจะมีพื้นที่ลากและวางที่มีพื้นที่ "คลิกที่นี่" ขนาดใหญ่เพื่อเปิดหน้าต่างอัปโหลด นั่นคือสิ่งที่แอรอนทำกับตัวอย่างข้อมูลนี้

มันอาศัย jQuery และ JS/CSS ในปริมาณที่เหมาะสมในการทำงาน และในขณะที่มันใช้ฟิลด์อินพุต HTML มาตรฐาน มันยังจัดการกระบวนการอัพโหลดด้วยฟังก์ชัน JS แบบกำหนดเอง

หากคุณรู้จัก JavaScript สิ่งนี้สามารถใช้เป็นเทมเพลตที่สะดวกสำหรับการสร้าง UI การอัปโหลดไฟล์ของคุณเอง

3. ตัวอัปโหลดภาพเคลื่อนไหวที่ตอบสนอง

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

ดูการออกแบบนี้เพื่อดูตัวอย่างช่องอัปโหลดคุณภาพที่เหมาะกับอุปกรณ์เคลื่อนที่ เป็นพื้นฐานมาก โดยมีเพียงพื้นที่อัปโหลดสี่เหลี่ยมเล็กๆ ที่รองรับการลากและวาง

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

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

4. ตัวอัปโหลดแบบกำหนดเอง

โครงการพัฒนารายวันเป็นวิธีที่ยอดเยี่ยมในการฝึกฝนทักษะของคุณ Drew Vosburg ปฏิบัติตามแนวทางนี้เพื่อสร้างแบบฟอร์มการอัปโหลดที่โฮสต์อย่างอิสระบน CodePen

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

พื้นที่ที่คลิกได้คือป้ายกำกับ HTML ที่มีรูปแบบ CSS องค์ประกอบป้ายกำกับนั้นแนบมากับช่องป้อนข้อมูล ซึ่งซ่อนอยู่นอกหน้า มันทำงานเหมือนกับฟิลด์ที่คลิกได้ เป็นความคิดที่ฉลาดและมีความหมายอย่างยิ่งในการบูต

5. อินเทอร์เฟซการอัพโหลดภาพถ่ายสต็อก

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

ทำงานโดยการดึงรูปภาพผ่าน JavaScript จากนั้นแปลงเป็น base64 เพื่อฝังลงใน CSS

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

อินเทอร์เฟซนั้นสะอาดมาก และคุณสมบัติการอัปโหลดก็เข้ากันได้ดี

6. UI อัปโหลดสีน้ำเงินง่าย ๆ

หากคุณกำลังมองหาฟิลด์อัปโหลดที่ไม่มี JS ลองดูตัวอย่างนี้ซึ่งสร้างโดย Stephen Baker

ใช้ CSS3 บริสุทธิ์เพื่อเปลี่ยนรูปแบบการป้อนข้อมูลเป็นปุ่มขนาดใหญ่เพียงปุ่มเดียว ใช้งานได้กับไอคอนอัปโหลด Font Awesome และครอบพื้นที่วงกลมทั้งหมดรอบช่องอัปโหลด

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

7. jQuery อินพุตอัปโหลดไฟล์ที่กำหนดเอง

นักพัฒนา Terry Young ใช้ jQuery เล็กน้อยและใช้มันเพื่อปรับปรุงฟิลด์การอัปโหลดที่มีอยู่ นี่คือผลลัพธ์ (และเป็นผลลัพธ์อย่างหนึ่งถ้าฉันสามารถพูดได้)

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

โปรดทราบว่าสิ่งนี้ต้องการ jQuery ในปริมาณที่เหมาะสม เนื่องจากคุณสมบัติเหล่านี้ส่วนใหญ่ไม่สามารถแก้ไขด้วย CSS ได้ หากคุณไม่สนใจที่จะทำงานกับ jQuery ตัวเลือกเหล่านี้ก็ยอดเยี่ยม

8. ไฟล์อินพุต UI แบบแบน

นี่คือฟิลด์อัปโหลดแบบเรียบที่แตกต่างกันเล็กน้อยที่สร้างโดย Geoffrey Crofte สิ่งนี้ยังอาศัย JavaScript บางตัว แต่จัดรูปแบบอินพุตทั้งหมดด้วยคุณสมบัติ CSS3

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

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

เหนือสิ่งอื่นใด รหัสเหล่านี้ทำงานในเบราว์เซอร์ย้อนหลังไปถึง IE 8! ดังนั้นจึงเป็นตัวเลือกที่ดีหากคุณกังวลเกี่ยวกับการช่วยสำหรับการเข้าถึง

9. ช่องอัปโหลดหลายช่อง

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

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

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