CSS เปลี่ยน file inputs อัพโหลดเป็นปุ่มสวย

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

css-button-file-inputs

มาดูวิธีการกัน อันนี้ผมจะไม่ขออธิบาย code แบบละเอียดมากนักเพราะเว็บต้นฉบับอธิบายดีอยู่แล้วครับ ให้ลอง copy code ตามด้านล่าง หรือ download ไฟล์ code ที่ผมตัดส่วนไม่สำคัญออกไปเพื่อให้ดูเข้าใจง่ายแล้วไปลองรันดูครับ แต่ก่อนอื่นขออธิบายการทำงานของ code แบบสั้นๆนิดนึงครับ คือ CSS จะเอาปุ่มด้านล่าง  file inputs ไปแทนที่ทับอีกทีนึงแล้วจะมี JavaScript ควบคุมเหตุการณ์ว่าถ้าคลิกปุ่ม Button นี้ให้แสดงหน้าต่างเพื่อเลือกไฟล์มาอัพโหลด

CSS

HTML

JavaScript

ตัวอย่าง (ผมตัดส่วนที่ไม่ใช้ออกให้แล้ว) : https://www.memo8.com/wp-content/uploads/2013/07/demo.htmls

ที่มา : http://ericbidelman.tumblr.com/post/14636214755/making-file-inputs-a-pleasure-to-look-at

(ตั้ม) ศิริชัย ธีรภัทรสกุล เป็นเว็บโปรแกรมเมอร์, บล็อกเกอร์, และเจ้าของกิจการ ชอบถ่ายรูป อ่านหนังสือ และออกกำลังกาย “จงมีความกล้าที่จะลงมือทำ และอยู่กับปัจจุบัน ณ ขณะ (จงโฟกัส)"

Post a Comment