ปรับปรุงการควบคุมการอัพโหลดไฟล์โดยใช้ jQuery

เมื่อใช้ CSS เพื่อตกแต่งองค์ประกอบของฟอร์มให้สวยงาม ไม่เคยมีวิธีใดที่ดีในการตกแต่งการควบคุมการอัพโหลดไฟล์ให้สวยงาม http://www.quirksmode.org/dom/inputfile.html (ดูเหมือนว่าเว็บไซต์จะมีข้อผิดพลาด) ให้วิธีการตกแต่งการควบคุมการอัพโหลดไฟล์ให้สวยงาม ด้วยแรงบันดาลใจจากวิธีนี้ ฉันจึงรวมโปรเจ็กต์ของตัวเองเพื่อปรับปรุงฟังก์ชันต่างๆ หลังจากปรับปรุงแล้วจะมีลักษณะดังต่อไปนี้:

1. สิ่งที่ผู้ใช้เห็นไม่ใช่ปุ่มอัพโหลดไฟล์ แต่เป็นปุ่ม
2. สามารถจำกัดรูปแบบของรูปภาพได้
3. ภาพที่ผู้ใช้สามารถเลือกสามารถแสดงในพื้นที่เฉพาะได้ (ยกเว้น IE6, safari และ opera)
4. การควบคุมการอัพโหลดไฟล์ยังคงใช้งานได้เมื่อผู้ใช้ปิดการใช้งาน js

ฉันรวมมันไว้ในปลั๊กอิน jQuery เนื่องจากมีปลั๊กอินชื่อ jQuery.fakeFile บนอินเทอร์เน็ตอยู่แล้ว เพื่อแยกความแตกต่าง ฉันจะตั้งชื่อมันว่า jQuery.liveFakeFile บทความนี้จะแนะนำหลักการและการใช้วิธีนี้

1. อุปสงค์

ข้อกำหนดนั้นง่ายมาก แต่การใช้งานนั้นต้องใช้ทักษะบางอย่าง ซึ่งมีการอธิบายสั้น ๆ ดังต่อไปนี้:

1. จำเป็นต้องมีตัวควบคุมการอัปโหลดไฟล์ แต่จะมีปุ่ม "อัปโหลดรูปภาพ" เมื่อผู้ใช้คลิกปุ่ม กล่องโต้ตอบรูปภาพจะปรากฏขึ้น
2. หลังจากเลือกรูปภาพแล้ว รูปภาพจะแสดงเหนือปุ่ม ตามค่าเริ่มต้น รูปภาพเริ่มต้นจะแสดงขึ้น
3. รูปแบบของรูปภาพที่เลือกจะถูกตัดสิน เมื่อไม่ตรงตามข้อกำหนด ข้อความแสดงข้อผิดพลาดจะปรากฏขึ้นด้านล่างปุ่ม และรูปภาพเริ่มต้นจะปรากฏขึ้น

2. การวิเคราะห์

ตระหนักถึงผลกระทบของการเปิดกล่องโต้ตอบการเลือกรูปภาพขึ้นมาโดยคลิกที่ปุ่ม

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

แสดงภาพที่ผู้ใช้เลือก

การแสดงรูปภาพดูเหมือนง่ายมาก แต่มีความแตกต่างระหว่างเบราว์เซอร์ IE6 ไม่สามารถแสดงรูปภาพได้อย่างถูกต้อง และ IE7 สามารถแสดงรูปภาพเหล่านั้นได้โดยใช้ตัวกรอง AlphaImageLoder Firefox ไม่สามารถแสดงรูปภาพได้ตามปกติ แต่มีวิธีแสดงรูปภาพ—getAsDataURL() เบราว์เซอร์อื่น Opera และ Safari ไม่สามารถแสดงภาพได้อย่างถูกต้อง ดังนั้นเราจึงใช้เทคโนโลยีการดมเบราว์เซอร์เพื่อประมวลผลเบราว์เซอร์ต่างๆ แยกกัน และโดยปกติแล้วให้เฉพาะเบราว์เซอร์ที่ไม่สามารถแสดงภาพเท่านั้นที่แสดงข้อความได้

กำหนดรูปแบบภาพ

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

การวิเคราะห์การใช้งาน

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