ASP.NET - การจัดเก็บและเรียกรูปภาพจากฐานข้อมูล MS SQL Server

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

แบบที่ 1 - โปรแกรมจะจัดเก็บไฟล์รูปภาพลงฐานข้อมูล MSSQL และดึงข้อมูลจากฐานข้อมูลไปแสดงรูปภาพบนหน้า Web
แบบที่ 2 - โปรแกรมไม่ได้จัดเก็บไฟล์ลงฐานข้อมูล แต่จะนำไปแสดงบนหน้า Web

( ดาวน์โหลด ซอร์สโค้ด ได้ที่นี่ครับ https://github.com/noomdev/StoreImageDB )

เมื่อได้ดาวน์โหลดไฟล์ source code มาแล้ว จะต้องเปิดไฟล์ด้วย MS Visual Studio 2010 ขึ้นไป (ผม dev ด้วย Web Developer 2010 Express) ครับ


ก่อนอื่น เราจะต้องมีฐานข้อมูลที่จัดเก็บไฟล์รูปภาพ โดยเราจะเลือกจัดเก็บเป็นแบบ varbinary(max)




ทดลองรันโปรแกรม จะเข้าหน้า default.aspx

ตัวอย่างการทำงานของแบบที่ 1

    ให้กดปุ่ม Browse เพื่อเลือกไฟล์รูปภาพ (jpg) จากเครื่อง client จากนั้นกดปุ่ม "Upload & Save Picture"

    เมื่อกดปุ่มเสร็จแล้ว โปรแกรมจะทำงานดังนี้

1. อัพไฟล์รูปภาพจากเครื่อง Client ขึ้น Web Server 
2. แปลงไฟล์รูปภาพ ไปเป็น byte[] แบบ array
3. บันทึกเข้าฐานข้อมูล
4. เรียกข้อมูล จากฐานข้อมูล มาเป็น byte[]
5. นำ byte ไป content เป็น image/jpg และแสดงผลลงใน Image1 Control

    ผลลัพธ์จากการทำงานทั้งหมด

 
เมื่อดูในตารางจะพบข้อมูล จัดเก็บอยู่

ตัวอย่างการทำงานของแบบที่ 2

    ให้กดปุ่ม Browse เพื่อเลือกไฟล์รูปภาพ (jpg) จากเครื่อง client จากนั้นกดปุ่ม "Upload & Save Picture"

เมื่อกดปุ่มเสร็จแล้ว โปรแกรมจะทำงานดังนี้

1. อัพไฟล์รูปภาพจากเครื่อง Client ขึ้น Web Server 
2. แปลงไฟล์รูปภาพ ไปเป็น byte[] แบบ array
3. ส่ง byte[] ไปยัง การแสดงผลรูปภาพทันที

ผลลัพธ์จากการทำงาน

** เทคนิค **

ในการแสดงผลรูปภาพทาง Image1 Control นั้น ผมได้ใช้การอ้างไปยัง "Image.aspx" อีกทีเพื่อทำการแปลง byte[] ไปเป็น Response.OutputStream และส่งกลับไปยัง default.aspx เพื่อแสดงรูปบน Image1 โดยโคิดส่วนที่สำคัญ คือ การใช้ MemoryStream ในการอ่าน byte[] และ ส่งไปยัง Image Object และให้ Image Object ทำการ Save ไฟล์แบบ Response.OutputStream 

////////////  NoooM  ////////////