Nine MVP's Blog

03/11/2013

ASP.NET MVC Series : Photo Upload Tool (PLUpload, Bootstrap)

Filed under: ASP.NET, ASP.NET MVC, C#, html5, javascript — Tags: , , , , — Nine MVP @ 7:55 pm

ตอนนี้จะเป็นบทความสุุดท้ายที่จะโพสใน wordpress นี้ซึ่งผมจะย้ายไป blog ส่วนตัวซึ่งจะจัดการรายละเอียดต่างๆได้สะดวกกว่านี้

ตอนนี้จะมาแนะนำการสร้างเครื่องมือในการทำ Photo Upload สำหรับ MVC และเช่นเคยไม่เกริ่นมากมาย ก็เข้าเรื่องกันเลย

มาดู library ที่จะใช้งาน

plupload  library ตัวนี้มีดีที่รองรับ multi browser สามารถสลับ engine ไปใช้ html4, html5, flash, siverlight, etc. ตามที่ browser จะรองรับหรือมีติดตั้งไว้ และสามารถทำงานแบบ multiple file selection, file filter (GPLv2 License) ซึ่งใครไม่เข้าใจ plupload ให้อ่านที่นี่ก่อน เพราะผมจะไม่อธิบายการทำงานในบทความนี้
http://www.plupload.com

ตอนนี้จะแนะนำการใช้งานโดยสร้าง UI ขึ้นมาใช้งานเองโดยเพิ่มเติมความสามารถเรื่อง thumbnail, image dimension และตรวจสอบว่า browser รองรับการทำงานของฟังชั่นที่เราเพิ่มเติมเข้าไปหรือไม่

หน้าตาและตัวอย่างการทำงาน

สำหรับ Browser ที่รองรับ HTML5

สำหรับ browser ที่ไม่รองรับ HTML5

ตัวอย่าง code ใน Razor View

10-31-2013 3-02-37 PM

Line 3: เป็นการเรียกใช้ _layout.cshtml ซึ่งจะมี javascript พื้นฐานพวก jquery, css ต่างๆไว้ใช้งาน
Line 9: เรียกใช้ css สำหรับ xPhotoUpload
Line 11-17: ประกาศ tag สำหรับ เรียกใช้ตัว xphotoupload และกำหนดค่าต่าง ๆ ผ่าน data-* property

  • data-multiple-upload = true/ false ต้องการใช้งานโหมด single/multiple upload
  • data-upload-url = action for upload url
  • data-flash-url = กำหนด url path สำหรับ flash engine ของ plupload
  • data-filter-extension =  นามสกุลไฟล์ที่ต้องการมองเห็น
  • data-size-limit = ขนาดของไฟล์ที่อนุญาตให้ upload
  • data-chunk-size = ขนาดชิ้นงานที่จะทำการอัพโหลดต่อครั้ง
  • data-show-console = แสดงคอนโซลการทำงานของ upload tool

โค้ดส่วน Controller

10-31-2013 6-42-22 PM

Line 16-19: เป็นการนำวิว Index.cshtml ส่งกลับไปให้ client เพื่อแสดงผล
Line 22: รับเข้าเป็น HttpPostedFileBase parameter เพื่อง่ายในการเรียกใช้  หรือเปลี่ยนไปอ่านจาก Request.File
Line 25-30: เป็นการสร้าง Upload Directory ตามวันที่
Line 33: สั่งให้บันทึก File ที่ upload มาลงตาม path ดังกล่าว
Line 35: ส่งค่ากลับ

ส่วนของ script/style bundle

11-1-2013 2-24-17 PM

Line 28: kendo core เอาไว้ใช้ทำ template
Line 29: plupload script ใช้เป็น engine สำหรัย upload
Line 30: XPhotoUpload script ที่เราเขียนไว้เพิ่มเติมใช้ในงานนี้
Line 33-35: เป็น css ที่ใช้งานทั้งหมด

โครงสร้างไฟล์ในโปรเจคที่เดโม

ใน Content จะมีสองส่วนคือ plupload folder กับ xphotoupload.css ส่วน bootstrap ถือว่าต้องใช้เป็นพื้นในงานนี้อยู่แล้ว
11-3-2013 4-16-56 PM

ต่อมา Scripts จะมี plupload, kendo.core.min.2013.319.js, XPhotoUpload.js ซึ่งใช้ในการทำงานส่วน javascript
11-3-2013 4-17-15 PM

แนะนำ code ใน XPhotoUpload.js บางบรรทัดที่น่าสนใจ

การเข้าถึง File จาก browser

image
การเข้าถึง file upload โดยใช้ HTML5 API ทุก browser จะมี object สองตัวนี้ให้เรียกใช้งานซึ่งจะมี standard function ในการใช้ทำงานกับ file ได้

หารายละเอียดของรูปที่จะอัพโหลดเพื่อตรวจสอบ dimension

image
Line 98: สร้าง image object ขึ้น
Line 108: เรียกใช้ _URL object โดยให้สร้าง url address ของไฟล์ที่เลือกเขามาใน plupload และส่งให้ img object
Line 99-102: เป็นการผูก function ให้กับ img เพื่อให้ทำงานเมื่อมีการโหลดภาพเข้ามา ซึ่งจะเกิดทันทีที่กำหนดค่าให้ img.src ที่บรรทัด 108

การทำ progress bar

image
เป็น event ที่เกิดขึ้นโดย plupload และแสดงผลโดยใช้ css class ของ bootstrap  โดยการขยายความกว้างไปพร้อมๆ กำหนด % ของไฟล์ที่ plupload ส่งค่ามาให้ใน event นี้

การใช้ Kendo Template ในการทำ html template binding

image
Line 19: table template สำหรับแสดงผลตารางเพื่อสร้างกรอบการทำงานของทูลอัพโหลด
Line 20: table row แบบไม่แสดงผล thumbnail ในกรณีที่ browser ไม่รองรับการทำงานของ HTML5
Line 21: table row แบบแสดงผล thumbnail หาก browser รองรับการทำงาน

ใน table row ทั้งสองแบบจะมี tag ลักษณะ  #= property name # เพื่อบอกให้ kendo มองหา property ของ object นั้นมาแทนค่าลงไปโดยใช้ code ชุดข้างล่างนี้ซึ่งมี 2 แบบ
แบบสั่ง bind โดยไม่มี object
image
และแบบมี object
image

ส่งท้าย

หากเรามีความรู้ในส่วนของ client script อย่าง javascript ให้ลึกพอ เราก็จะสามารถสร้างสรรค์งานขึ้นตามที่เราต้องการได้ ซึ่งก็เป็นเรื่องที่สมควรจะต้องมีสำหรับ web developer ทุกท่าน Smile

สำหรับ project demo สามารถ download ได้ที่ https://bitbucket.org/NineMvp/mvc-upload #Git
สำหรับ zip file https://bitbucket.org/NineMvp/mvc-upload/get/b68e85296709.zip

4 Comments »

  1. เยี่ยมยอดครับ🙂

    Comment by Non Intanon — 03/11/2013 @ 8:05 pm

    • ขอบคุณครับ🙂

      Comment by Nine MVP ASP.NET — 03/11/2013 @ 8:39 pm

  2. ดีใจที่จะย้ายไปเว็บส่วนตัวครับ
    เพราะเน็ทบริษัทผม บล็อก wordpress

    Comment by Awiruth Bunmason — 04/11/2013 @ 11:05 am

    • ดีใจด้วยครับ แต่ บ. ค่อยข้างไม่มีเหตุผลนะ ความรู้ทั้งนั้น หุหุ

      Comment by Nine MVP ASP.NET — 04/11/2013 @ 8:15 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: