หลักสูตรความผิดพลาด 101
10 โมดูล
5 สัปดาห์ที่ผ่านมา

เครื่องมือเลือกไฟล์

คลิกเพื่อคัดลอก

ส่วนประกอบ Filepicker ในเว็บแอปพลิเคชัน


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

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

การออกแบบโดยรวม

เริ่มจากการออกแบบโดยรวมกันก่อน เราจำเป็นต้องออกแบบหน้าและเพิ่มองค์ประกอบที่จำเป็น ปัญหาที่คล้ายกันได้รับการแก้ไขแล้วในระหว่างการทำงานในโมดูลที่ 6 ดังนั้นเราจะไม่อธิบายขั้นตอนทั้งหมดอีก ให้นี่เป็นอีกหนึ่งโอกาสในการรวบรวมความรู้ในทางปฏิบัติ

ลองนึกภาพว่าผู้ใช้สามารถเพิ่มอวาตาร์ในโปรไฟล์ ระบุข้อมูลเข้าสู่ระบบ และกรอกข้อมูลชีวประวัติได้ แต่มีเงื่อนไขข้อหนึ่ง - ไม่สามารถป้อนได้โดยตรง (ฟิลด์อินพุตทั้งหมดมีพารามิเตอร์ Disabled = true ) ต้องโหลดจากไฟล์

เครื่องมือเลือกไฟล์

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

เราจะใช้ทริกเกอร์ Container onClick ในคอนเทนเนอร์หลักเพื่อทำสิ่งนี้ การคลิกที่คอนเทนเนอร์หรือองค์ประกอบของคอนเทนเนอร์จะเป็นการเริ่มกระบวนการทางธุรกิจนี้ และเราควรเริ่มต้นด้วยการเลือกไฟล์ ในการทำเช่นนี้ เราจะใช้บล็อก Select Files ลักษณะเฉพาะของมันคือบล็อกนี้ต้องการการมีส่วนร่วมของผู้ใช้ในการดำเนินการ กระบวนการจะดำเนินการต่อหลังจากที่ผู้ใช้เลือกไฟล์แล้วเท่านั้น ตั้งค่าพารามิเตอร์ Max files = 99 เพื่อให้สามารถเลือกได้หลายไฟล์

แผนนี้มีไว้สำหรับผู้ใช้ในการส่งไฟล์สองไฟล์พร้อมกัน อย่างแรกคือรูปภาพสำหรับตั้งเป็นอวาตาร์ ไฟล์ที่สองคือไฟล์ Excel (xlsx) พร้อมข้อมูลที่เหลือ

Was this article helpful?
ยังคงมองหาคำตอบ?