แทรกตัวควบคุมรูปภาพ

ถ้าคุณต้องการให้ผู้ใช้สามารถแทรกรูปภาพในฟอร์ม Microsoft Office InfoPath ได้ คุณสามารถใช้ตัวควบคุมรูปภาพในแม่แบบฟอร์มของคุณได้ ตัวควบคุมรูปภาพช่วยให้ผู้ใช้สามารถแทรกรูปภาพลงในพื้นที่ที่กําหนดบนฟอร์มได้ ข้อมูลรูปภาพจะถูกบันทึกในไฟล์ฟอร์มต้นแบบ (.xml) รูปภาพที่ผู้ใช้แทรกลงในตัวควบคุมรูปภาพสามารถเป็นรูปภาพชนิดใดก็ได้ที่ Windows Internet Explorer สามารถแสดงได้

ในบทความนี้

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

ควรใช้ตัวควบคุมรูปภาพเมื่ออะไร

ใช้ตัวควบคุมรูปภาพเมื่อคุณต้องการทําสิ่งต่อไปนี้

• เพิ่มตําแหน่งว่างบนเทมเพลตฟอร์มของคุณที่ผู้ใช้สามารถแทรกรูปภาพ รวมถึงรูปถ่าย คลิปอาร์ต และรูปวาด
• เพิ่มรูปภาพถาวรลงในแม่แบบฟอร์มของคุณที่ไม่สามารถแทนที่หรือลบออกได้ เช่น โลโก้ขององค์กร
• เพิ่มรูปภาพชั่วคราวลงในเทมเพลตฟอร์มของคุณที่สามารถลบหรือแทนที่ได้โดยผู้ใช้ เช่น ตัวแทนรูปภาพ
• บันทึกข้อมูลรูปภาพเป็นข้อมูลที่เข้ารหัสในไฟล์ฟอร์มผู้ใช้ (.xml) InfoPath ใช้การเข้ารหัส base64 เพื่อเข้ารหัสและถอดรหัสไฟล์ไบนารี เช่น ไฟล์ .gif หรือไฟล์ .jpg
• บันทึกข้อมูลรูปภาพเป็นการอ้างอิงไฮเปอร์ลิงก์ในไฟล์ฟอร์มผู้ใช้ (.xml)
• แสดงรูปบนแม่แบบฟอร์มของคุณที่ดึงมาจากฐานข้อมูลหรือแหล่งข้อมูลภายนอกอื่นๆ

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

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

ตัวควบคุมที่เกี่ยวข้อง

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

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

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

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

ด้านบนของหน้า

ประสบการณ์ใช้งานของผู้ใช้

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

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

ด้านบนของหน้า

ข้อควรพิจารณาเกี่ยวกับความเข้ากันได้

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

ถ้าคุณต้องการให้ผู้ใช้สามารถแทรกรูปภาพในเทมเพลตฟอร์มที่เปิดใช้งานสําหรับเบราว์เซอร์ คุณสามารถโฮสต์ InfoPath เป็นตัวควบคุมฟอร์มของ Microsoft ASP.NET บนเว็บเพจ และเขียนโค้ดที่ฝั่งเซิร์ฟเวอร์เพื่อแทรกรูปภาพใน XML ของเทมเพลตฟอร์มเป็นข้อมูลที่เข้ารหัสพื้นฐาน 64 อีกวิธีหนึ่งคือ คุณสามารถใช้กล่อง Rich Text บนเทมเพลตฟอร์มที่เข้ากันได้กับเบราว์เซอร์ของคุณ ซึ่งทําให้ผู้ใช้สามารถแทรกรูปที่ลิงก์ได้ ซึ่งจะทําให้คุณสามารถบันทึกข้อมูลรูปภาพเป็นไฮเปอร์ลิงก์ใน XML ต้นแบบได้

ด้านบนของหน้า

แทรกตัวควบคุมรูปภาพ

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

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

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

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

แทรกตัวควบคุมรูปภาพบนเทมเพลตฟอร์มเปล่าใหม่

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

1. ในเทมเพลตฟอร์ม ให้วางเคอร์เซอร์ไว้ในตำแหน่งที่คุณต้องการแทรกตัวควบคุม

2. ถ้าไม่เห็นบานหน้าต่างงาน ตัวควบคุม ให้คลิก ตัวควบคุมเพิ่มเติม ในเมนู แทรก หรือกด ALT+I, C

3. ภายใต้ แทรกตัวควบคุม ให้คลิก รูปภาพ

4. ในกล่องโต้ตอบ แทรกตัวควบคุมรูปภาพ ให้เลือกทําอย่างใดอย่างหนึ่งต่อไปนี้

   • เมื่อต้องการบันทึกข้อมูลรูปภาพในแบบฟอร์มของผู้ใช้ ให้คลิก รวมอยู่ในแบบฟอร์ม เมื่อคุณเลือกตัวเลือกนี้ InfoPath จะใช้ชนิดข้อมูล Picture หรือ File Attachment (base64) สําหรับตัวควบคุมรูปภาพ และข้อมูลรูปภาพจะถูกเข้ารหัสในไฟล์ฟอร์มต้นแบบ (.xml) การใส่รูปภาพในรูปแบบเป็นตัวเลือกที่ดีถ้าคุณต้องการเก็บฟอร์มและข้อมูลให้พกพาได้

   • เมื่อต้องการแสดงรูปภาพที่ลิงก์แต่ไม่ได้บันทึกด้วย ฟอร์มของผู้ใช้ ให้คลิก เป็นลิงก์ เมื่อคุณเลือกตัวเลือกนี้ InfoPath จะใช้ Hyperlink (anyURI) เป็นชนิดข้อมูลสําหรับตัวควบคุมรูปภาพ และข้อมูลรูปภาพจะถูกจัดเก็บเป็นไฮเปอร์ลิงก์ในไฟล์ฟอร์มต้นแบบ (.xml) การลิงก์ไปยังรูปภาพเป็นตัวเลือกที่ดีถ้าคุณคิดว่าผู้ใช้จะต้องอัปเดตรูปภาพที่ลิงก์ หรือถ้าคุณต้องการลดขนาดไฟล์ของฟอร์มของผู้ใช้

     หมายเหตุ

     เมื่อดูรูปที่ลิงก์บนฟอร์ม ผู้ใช้ต้องมีสิทธิ์เข้าถึงตําแหน่งที่ตั้งของแฟ้มแหล่งรูปภาพ มิฉะนั้น รูปภาพจะไม่ปรากฏบนแบบฟอร์ม

5. ตามค่าเริ่มต้น ตัวควบคุมรูปภาพที่มี คลิกที่นี่เพื่อแทรกตัวแทนข้อความรูปภาพ จะถูกแทรกบนเทมเพลตฟอร์ม

6. ถ้าคุณเลือกที่จะรวมข้อมูลรูปภาพลงในฟอร์มของผู้ใช้ของคุณในขั้นตอนที่ 4 คุณสามารถระบุรูปภาพพื้นหลังได้
   วิธีการ

   1. ดับเบิลคลิกที่ตัวควบคุมรูปภาพบนเทมเพลตฟอร์มของคุณ

   2. คลิกแท็บ ข้อมูล

   3. ภายใต้ การเข้าเล่ม บนแท็บ ข้อมูล ให้คลิก ระบุรูปภาพเริ่มต้น แล้วคลิก เรียกดู

      หมายเหตุ

      ตัวเลือกนี้ไม่พร้อมใช้งานถ้าคุณเลือก เป็นลิงก์ ก่อนหน้าในขั้นตอนนี้

   4. ในกล่องโต้ตอบ แทรกรูปภาพ ให้คลิกรูปภาพที่คุณต้องการ

7. เมื่อต้องการเพิ่มป้ายชื่อให้ตัวควบคุม ให้พิมพ์ข้อความไว้เหนือหรือไว้ทางซ้ายของตัวควบคุม ตามด้วยเครื่องหมายจุดคู่ (:)

แทรกตัวควบคุมรูปภาพบนแม่แบบฟอร์มที่ยึดตามแหล่งข้อมูลที่มีอยู่

ถ้าคุณยึดการดีไซน์เทมเพลตฟอร์มของคุณตามไฟล์ Extensible Markup Language (XML) ที่มีอยู่ ฐานข้อมูล หรือบริการบนเว็บ InfoPath จะรับเขตข้อมูลและกลุ่มในบานหน้าต่างงาน แหล่งข้อมูล จากแหล่งข้อมูลที่มีอยู่แล้วนั้น ในสถานการณ์นี้ คุณสามารถแทรกตัวควบคุมรูปภาพได้โดยการลากเขตข้อมูลจากบานหน้าต่างงาน แหล่งข้อมูล ลงในเทมเพลตฟอร์มหรือแทรกตัวควบคุมรูปภาพจากบานหน้าต่างงาน ตัวควบคุม แทน ตามที่อธิบายไว้ในขั้นตอนต่อไปนี้

1. ในเทมเพลตฟอร์ม ให้วางเคอร์เซอร์ไว้ในตำแหน่งที่คุณต้องการแทรกตัวควบคุม

2. ถ้าไม่เห็นบานหน้าต่างงาน ตัวควบคุม ให้คลิก ตัวควบคุมเพิ่มเติม ในเมนู แทรก หรือกด ALT+I, C

3. ภายใต้ แทรกตัวควบคุม ให้คลิก รูปภาพ

4. ในกล่องโต้ตอบ แทรกตัวควบคุมรูปภาพ ให้เลือกทําอย่างใดอย่างหนึ่งต่อไปนี้

   • เมื่อต้องการบันทึกข้อมูลรูปภาพในแบบฟอร์ม ให้คลิก รวมอยู่ในแบบฟอร์ม เมื่อคุณเลือกตัวเลือกนี้ คุณต้องผูกตัวควบคุมรูปภาพเข้ากับเขตข้อมูลที่มีชนิดข้อมูลรูปภาพหรือไฟล์ที่แนบ (base64)
   • เมื่อต้องการแสดงรูปภาพที่ลิงก์แต่ไม่ได้บันทึกด้วย ฟอร์ม ให้คลิก เป็นลิงก์ เมื่อคุณเลือกตัวเลือกนี้ คุณต้องผูกตัวควบคุมรูปภาพกับเขตข้อมูลที่มีชนิดข้อมูล ไฮเปอร์ลิงก์ (anyURI)

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

6. ถ้าคุณเลือกที่จะรวมข้อมูลรูปภาพลงในฟอร์มของผู้ใช้ของคุณในขั้นตอนที่ 4 คุณสามารถระบุรูปภาพเริ่มต้นที่ปรากฏภายในตัวควบคุมได้
   วิธีการ

   1. ดับเบิลคลิกที่ตัวควบคุมรูปภาพบนเทมเพลตฟอร์มของคุณ

   2. คลิกแท็บ ข้อมูล

   3. ภายใต้ การเข้าเล่ม ให้คลิก ระบุรูปภาพเริ่มต้น แล้วคลิก เรียกดู

      หมายเหตุ

      ตัวเลือกนี้จะไม่พร้อมใช้งานถ้าคุณผูกตัวควบคุมรูปภาพไว้กับเขตข้อมูลที่มีชนิดข้อมูล ไฮเปอร์ลิงก์ (anyURI) ก่อนหน้าในกระบวนการนี้

   4. ในกล่องโต้ตอบ แทรกรูปภาพ ให้คลิกรูปภาพที่คุณต้องการ

7. เมื่อต้องการเพิ่มป้ายชื่อให้ตัวควบคุม ให้พิมพ์ข้อความไว้เหนือหรือไว้ทางซ้ายของตัวควบคุม ตามด้วยเครื่องหมายจุดคู่ (:)

ด้านบนของหน้า

เคล็ดลับเกี่ยวกับเค้าโครง

ใช้เคล็ดลับต่อไปนี้เพื่อช่วยคุณปรับปรุงลักษณะที่ปรากฏ ขนาด และลักษณะอื่นๆ ของตัวควบคุมรูปภาพของคุณ

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

ด้านบนของหน้า