เนื่องจากผู้เขียนได้มีการทำงานที่ต้องตรวจสอบไฟล์ จึงอยากจะแชร์ประสบการณ์การเขียน web service โดยยกตัวอย่างการเขียนดังนี้
โดยจากตัวอย่างผู้เขียนได้ใช้ฟังก์ชัน client.DownloadData(url) โดยผลลัพธ์ที่ได้ มีดังนี้
ซึ่งหวังว่าจะมีประโยชน์ไม่มากก็น้อยค่ะ
เนื่องจากช่วงนี้ ผู้เขียนมีโอกาสได้เข้ามาอยู่ในแวดวงของ Dojo และได้ประสบกับปัญหาในการที่จะ set property ของ Dojo ซึ่งในที่นี้คือ Radio Button หลังจากที่ได้ลองผิด ลองถูก Error กันหัวหมุน 
จนสุดท้ายได้เจอทางออก 
เลยอยากจะบันทึกไว้สำหรับตัวเองมาดูในอนาคต และเผื่อท่านอื่นที่ประสบปัญหาเดียวกัน มาเจอจะได้ลองนำไปใช้งานกันดูค่ะ Let’s GO!!!
เนื่องจาก Radio Button เป็น Control ภายใต้ dijit/form/RadioButton ดังนั้น การเขียนคำสั่งเพื่อ set property จึงได้เป็นดังนี้
| dijit.byId(‘control_id‘).set(‘control_prop‘, value);
control_id : id ของ control นั้น ๆ control_prop : property ของ control ที่ต้องการกำหนดค่า value : ค่าที่ต้องการกำหนด |
ตัวอย่างเช่น ต้องการกำหนดให้ radio button ที่มี id=”rdBtn1″ ไม่สามารถใช้งานแต่ยังแสดง(disable) และ
id=”rdBtn2″ มีค่าโดยปริยายเป็นเลือกไว้ จะเขียน Code ได้ดังนี้
|
dijit.byId(‘rdBtn1’).set(‘disabled’, true); dijit.byId(‘rdBtn2’).set(‘checked’, true); |
ซึ่ง properties ของ control ต่าง ๆ สามารถดูเพิ่มเติมได้จากเว็ปเพจของ Dojo ตามลิงค์นี้ค่ะ Dojo Documentation
หวังว่าบทความนี้จะเป็นประโยชน์แก่ท่านผู้อ่านไม่มาก็น้อยนะคะ แล้วพบกันใหม่ตอนหน้าค่ะ 
วันนี้จะมาพูดถึง Firebug ซึ่งหลาย ๆ คนคงใช้งานหรือรู้จักกันอยู่แล้ว แต่ผู้เขียนเพียงแค่นำส่วนที่ใช้งานมาแบ่งปันสำหรับผู้ที่ยังไม่เคยใช้งานค่ะ
Firebug เป็นเครื่องมือสำหรับ Web Development ในการแก้ไขตรวจสอบ JavaScript / CSS / HTML เป็น Extension หรือ Add-ons สำหรับใช้ในการช่วยจัดการ Debug พวก HTML , JavaScript และ CSS การใช้งานไม่ยาก โดยทำการติดตั้ง Plugin ลงใน Web Browser เช่น Google Chrome หรือ Mozilla Firefox หลังจากนั้นก็เปิด URL หรือเว็บไซต์ที่ต้องการ และทำการคลิกที่ Icon ของ Firebug จากนั้นโปรแกรม Firebug ก็จะแสดงรายละเอียดโครงสร้าง HTML , JavaScript และ CSS ทั้งหมดใน URL นั้น ๆ เราสามารถทำการคลิกเพื่อแก้ไข CSS หรือแม้กระทั่งตรวจสอบค่าต่าง ๆ ซึ่งการใช้งานนั้นไม่ยากซับซ้อนอะไร
ผู้เขียนได้ใช้ Firebug กับการทำงานโดยใช้การ debug ที่แท็บ Console ตัวอย่างดังนี้
เมื่อมีการแจ้งจากผู้ใช้งานระบบว่าข้อมูลแสดงไม่ครบถ้วน จึงทำการตรวจสอบ Service ที่ดึงข้อมูลดังกล่าว โดยใช้ Firebug ในการตรวจสอบ
คลิก Service ที่ต้องการจะแสดงข้อมูลดังนี้ (จะเห็นได้ว่าจากรูปด้านบนแสดงเวลาที่โหลดข้อมูลแต่ละคำสั่งด้วยค่ะ)
ในส่วนอื่น ๆ ก็สามารถศึกษาได้ไม่ยากค่ะ
API คืออะไร?
API ย่อมาจาก Application Programming Interface คือการพัฒนาโปรแกรมสำหรับเป็นส่วนติดต่อเซอร์วิสของแอพพลิเคชั่น หรือโมดูลต่างๆ เพื่อให้คนภายนอกมาเรียกใช้งาน หรือกล่าวอย่างง่ายๆ ก็คือการเขียนโปรแกรมเพื่อให้บริการสำหรับให้คนอื่นมาเรียกใช้งาน ซึ่งแนวคิดเรื่องการสร้าง API เพื่อการใช้งานก็มีมาอย่างยาวนานแล้ว ยกตัวอย่างเช่นตั้งแต่ที่มีการสร้างระบบปฎิบัติการ (OS) ก็จะมีการติดต่อ API ของไดร์เวอร์อุปกรณ์ฮาร์แวร์ต่างๆ ของเครื่องคอมพิวเตอร์เพื่อเรียกใช้งานอุปกรณ์นั้นๆ ตามคำสั่งของนักพัฒนา (more…)
ปัญหาของ PSU Webmail ในช่วง 9-15 สิงหาคม 2559 ที่ผ่านมา คือ เมื่อเริ่มเข้าสู่เวลาราชการ ในวันทำการ พบว่า มีการตอบสนองที่ช้า บางครั้งต้องรอถึง 15-20 วินาที หรือ ผู้ใช้บางท่านแจ้งว่า Timeout ไปเลย หรือไม่ก็ใช้งานไปสักพัก ถูกดีดกลับมาหน้า Login ใหม่
แต่เมื่อพ้นเวลาราชการ พบว่าการตอบสนองก็เร็วขึ้นดังเดิม รวมถึงในช่วงวันหยุดก็เร็วอย่างที่ควรเป็น
ขอบคุณทาง NetAdmin ที่ทำระบบตรวจสอบไว้ที่หน้า Data Center เพื่อตรวจจับความเร็วในการตอบสนองบริการ PSU Webmail ด้วย SmokePing ผลที่ได้เป็นดังภาพ
จะเห็นว่า มีความหน่วงในการตอบสนอง เฉพาะในวันเวลาราชการเท่านั้น … ทำไม ???
ทำการตรวจสอบด้วยคำสั่ง
ps aux |grep apache| wc -l
เพื่อดูว่า มีจำนวน Apache อยู่กี่ Process พบว่า ในช่วงเวลาที่ระบบหน่วง มี Process เกือบคงที่ที่ 150 แต่ในช่วงที่ระบบทำงานได้เร็ว มีจำนวนประมาณ 50 process
จากการศึกษา พบว่า Apache2 ที่ใช้ MPM Prefork นั้น จะจำกัดค่า MaxRequestWorkers ไว้ โดยหากไม่กำหนดค่าใดๆจะตั้งไว้ที่ 256 แต่เมื่อตรวจสอบในไฟล์
/etc/apache2/mods-enabled/mpm_prefork.conf
พบว่า
<IfModule mpm_prefork_module>
StartServers 5
MinSpareServers 5
MaxSpareServers 10
MaxRequestWorkers 150
MaxConnectionsPerChild 0
</IfModule>
ทำให้เพดานของจำนวน Process ไปจำกัดที่ 150 ดังที่ตรวจสอบเบื้องต้น เมื่อมีผู้ใช้มากขึ้นกว่าเดิม จึงทำให้ Process ไม่เพียงพอต่อความต้องการ เป็นผลให้เกิดการหน่วงขึ้น
จึงทำการแก้ไข MaxRequestWorkers เป็น 256 แล้ว Restart Apache
ผลทำให้ จำนวน Apache Process ขึ้นไปถึง 200 Process และการตอบสนองเร็วขึ้นตามที่ควรเป็นดังภาพ (หลังเวลา 14:45)
ทั้งนี้ การกำหนดจำนวน MaxRequestWorkers นั้น ต้องสัมพันธ์กับ RAM ของ Server ด้วย โดยมีสูตรคร่าวๆ คือ จำนวน RAM ในหน่วย MB หารด้วยขนาดของ Apache Process โดยเฉลี่ย
เช่น
มี RAM 4GB = 4 x 1024 = 4096
ขนาดเฉลี่ย Apache Process = 20
ดังนั้น MaxRequestWorkers = 4096/20 = 204
แต่จริงๆแล้ว ควรเผื่อ Memory ไว้ให้ OS และอื่นๆด้วย (อาจจะไม่เต็ม 4096) หากขยับค่า MaxRequestWorkers แล้วยังพบว่า จำนวน Process ยังขึ้นไปเต็มเพดานอยู่ ควรพิจารณาเพิ่ม Memory ด้วย
ประมาณนี้ครับ
UPDATE:
ผลการปรับแก้ไข ทำให้ เวลาในการตอบสนอง จากที่หน่วง 10 วินาที เหลือ เพียง 50 มิลลิวินาที ดังภาพ
เคยเขียนบทความเกี่ยวกับการ upgrade PHP 5.2 to 5.3 ไปเมื่อปีที่แล้ว (Apache 2.2 + PHP 5.2 + phpMyAdmin on Windows 8.1)
วันนี้ขอนำเสนอการ upgrade เวอร์ชั่นของ PHP บน IIS (Windows Server 2012 R2) ด้วยวิธีที่แสนจะง่ายดาย
***ใครทราบวิธีการแล้วก็ผ่านไปเลยนะคับ ^^ เขียนไว้เผื่อบางท่านที่ยังไม่รู้เนอะ
<?php
phpinfo();
?>
2. เปิดเว็บ http://localhost/phpinfo.php ในภาพจะเป็น php 5.6.2.2
3. เปิด IIS manager ขึ้นมา แล้วคลิกที่ Web Platform Installer
4. พิมพ์คำค้น PHP ในช่องค้นหา ในรูปเราจะติดตั้ง PHP 7.0.7 ให้คลิกที่ปุ่ม Add จากนั้นระบบจะทำการติดตั้ง PHP 7.0.7
5. เมื่อติดตั้งเสร็จแล้ว ให้คลิก Restart IIS
6. ตรวจสอบเวอร์ชั่นของ PHP ด้วยการเปิดหน้าเว็บ http://localhost/phpinfo.php ในภาพจะเป็น php 7.0.7 เรียบร้อยแล้ว
7. เสร็จสิ้นกระบวนการ upgrade PHP to new version
ข้อมูลรูปแบบของ JSON เป็นที่นิยมใช้เป็นวิธีการส่งข้อมูลอย่างมากในปัจจุบัน ซึ่งในบ้างครั้งข้อมูลส่งจะมีความซับซ้อนหรือมีการซ้อนกันของข้อมูลหลายชั้น ทำให้การอาจเกิดข้อผิดพลาดในการสร้างข้อมูลหรือยากในการตรวจสอบข้อมูล
ซึ่งในบทความนี้จึงขอเสนอเว็บไซต์ที่ช่วยในการตรวจสอบข้อมูลและแบ่งชั้นของข้อมูลที่ซ้อนกันหลาย ๆ ชั้น ในรูปแบบ JSON ได้ คือ https://jsonformatter.curiousconcept.com
จากรูป มีสิ่งที่ต้องระบุหลัก ๆ คือ
เมื่อกำหนดเรียบร้อยก็กดปุ่ม Process
จากรูป ระบบจะแสดงผลการตรวจสอบว่าถูกต้องหรือไม่ และนอกจากนี้ระบบยังแบ่งชั้นข้อมูลในแต่ละระดับที่ซ้อนกันให้ ทำให้เราดูชุดข้อมูลได้ง่ายยิ่งขึ้น
หากข้อมูลผิดล่ะ จะเป็นไง ลองทำกันดู
ในกรณีที่ไม่ถูกต้อง ระบบจะแสดงบรรทัด ที่ไม่ถูกต้อง แล่ะเมื่อคลิก มันจะแสดงสีแดงที่บรรทัดหรืออักษรที่ไม่ถูกต้องให้เราเห็นอีกด้วย
ในการพัฒนาเว็บไซต์ บางครั้งอาจมีความจำเป็น หรือความต้องการจากผู้ใช้ที่ต้องการให้เว็บไซต์ดังกล่าวมีฟังก์ชั่นการทำงานในส่วนของการอัพโหลดไฟล์เพื่อแนบไฟล์เข้าไปในระบบและบันทึกลงฐานข้อมูล เพื่อให้สามารถเรียกดูข้อมูลการแนบไฟล์ดังกล่าวได้ในภายหลัง การอัพโหลดไฟล์จึงถือเป็นอีกหนึ่งฟังก์ชั่นการทำงานที่นักพัฒนาเว็บไซต์ควรทราบไว้ ซึ่งลักษณะการทำงานโดยทั่วไปส่วนใหญ่เราจะใช้ Control ที่มีเรียกว่า “FileUpload” แบบอัพโหลดครั้งละ 1 ไฟล์ และหากมีมากกว่านั้นก็จะมีการสร้างตัว FileUpload มาวางไว้ในหน้าจอเพิ่มตามจำนวนที่ต้องการแบบตายตัว เช่น หากในหน้าจอดังกล่าวต้องการสามารถให้ทำการอัพโหลดไฟล์ได้ไม่เกิน 5 ไฟล์ต่อการอัพโหลดแต่ละครั้งก็จะมีการลากคอนโทรล FileUpload มาวางไว้ในหน้าจอจำนวน 5 ตัว เพื่อให้สามารถรองรับความต้องการในการอัพโหลดไฟล์ของผู้ใช้ได้ แต่ผู้เขียนพบว่าการทำงานดังกล่าวอาจไม่รองรับความต้องการในการทำงานของผู้ใช้ที่จะเพิ่มไฟล์ได้ครั้งละหลายๆไฟล์โดยไม่จำกัดและผู้พัฒนาไม่จำเป็นต้องระบุหรือสร้างคอนโทรล FileUpload มาวางในหน้าจอในจำนวนที่ตายตัวโดยไม่จำเป็น โดยผู้ใช้สามารถคลิกปุ่มเพื่อเพิ่มจำนวนในการอัพโหลดไฟล์แต่ละครั้งได้เองเพื่อความยืดหยุ่นในการใช้งาน ในบทความนี้ ผู้เขียนจึงขอเสนอแนวทางในการพัฒนาเว็บไซต์โดยใช้ ASP.NET(C#) ในแบบที่มีการอัพโหลดไฟล์ได้คราวละหลายๆไฟล์ในแบบไม่ต้องจำกัดจำนวนคอนโทรล FileUpload ในหน้าจอโดยมีการระบุจำนวนไฟล์ที่สามารถอัพโหลดได้ในแต่ละครั้งโดยผู้พัฒนาแบบตายตัวอย่างเช่นที่กล่าวไว้ข้างต้น
หลังจากที่ได้มีการศึกษาเพิ่มเติม ผู้เขียนพบว่าใน .NET Framework เวอร์ชั่น 4.5 นั้นจะมีการเพิ่ม Feature การทำงานในส่วนนี้ให้กับคอนโทรล FileUpload ไว้แล้วผ่าน Properties ที่เรียกว่า AllowMultiple ซึ่งจะทำให้สะดวกต่อการพัฒนาและสามารถลดปัญหาดังกล่าวข้างต้นได้ แต่สำหรับเวอร์ชั่นที่ต่ำกว่ายังคงต้องมีการปรับปรุงพัฒนาเพิ่มเติมเอง ในบทความนี้จึงขอยกตัวอย่างการพัฒนาทั้ง 2 แบบในเบื้องต้นโดยจะเน้นไปในแบบเวอร์ชั่นที่ต่ำกว่า 4.5 เพื่อให้ผู้อ่านได้นำไปเป็นแนวทางในการพัฒนาต่อไป ดังนี้
1. การอัพโหลดไฟล์คราวละหลายๆไฟล์โดยใช้ .Net Framework เวอร์ชั่นที่ต่ำกว่า 4.5
ในบทความนี้ ผู้เขียนขอเสนอแนวทางแบบที่เป็นการพัฒนาโดยใช้จาวาสคริปต์เข้ามาเป็นตัวช่วยให้สามารถอัพโหลดไฟล์ได้ครั้งละหลายไฟล์ต่อการอัพโหลดแต่ละครั้ง เพื่อลดจำนวนการโหลดของหน้าจอและทำให้ผู้ใช้รู้สึกว่าการทำงานดังกล่าวเป็นไปด้วยความรวดเร็วไม่ต้องใช้เวลานาน โดยจะอธิบายทีละขั้นตอน ดังนี้
1) ออกแบบหน้าจอการทำงานในฝั่ง Client ทำการออกแบบหน้าจอการทำงานไว้ในเบื้องต้น โดยมีการสร้างคอนโทรล FileUpload มาตั้งต้นไว้ 1 ตัว และมีปุ่มเพื่อให้ทำการเพิ่มคอนโทรล FileUpload ได้เองอัตโนมัติโดยตัวผู้ใช้เอง และปุ่มที่ใช้ในการอัพโหลดไฟล์จากคอนโทรล FileUpload ทั้งหมด ดังนี้
<body> <form id="form1" runat="server"> <div> <div id="fileUploadarea" class="Divborder"> <div id='divfirstUpload'><br /><asp:FileUpload ID="fuMultiple" runat="server" CssClass="fileUpload" onchange="javascipt:FileValidate(this,5);" /> <input style="display:inline;" id="BtnRemove" type="button" value="Remove" onclick="DelFileUpload('divfirstUpload');" /> </div> </div> <br /> <div> <input style="display:inline; background-color: #A4EDFF; color: #333333; width: 150px; font-weight: bold;" id="btnAddMoreFiles" type="button" value="Add more files" onclick="AddMoreFilesWithMax(6);" /> <asp:Button ID="BtnUpload" runat="server" onclick="BtnUpload_Click" Text="Upload" OnClientClick="return ValidateFileUpload();" BackColor="#3399FF" Font-Bold="True" ForeColor="White" Width="150px" /> <br> <asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="410px"> <RowStyle BackColor="#EFF3FB" /> <Columns> <asp:BoundField DataField="Name" HeaderText="ชื่อไฟล์"> <ItemStyle Width="200px" /> </asp:BoundField> <asp:BoundField DataField="FileSize" HeaderText="ขนาดไฟล์(KB)"> <ItemStyle HorizontalAlign="Right" Width="120px" /> </asp:BoundField> </Columns> <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <EditRowStyle BackColor="#2461BF" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> </div> </div> </form> </body>
2) ในส่วนของจาวาสคริปต์ที่ใช้เป็นตัวช่วยในการตรวจสอบ โดยจะแยกเป็นแต่ละ function ดังนี้
2.1) ฟังก์ชั่นที่ใช้ในการเพิ่มไฟล์ได้ไม่จำกัด โดยใช้ชื่อว่า AddMoreFiles()
<script language="javascript" type="text/javascript"> function AddMoreFiles() { if (!document.getElementById && !document.createElement) return false; ////อ้างอิงถึง div ที่มีชื่อว่าfileUploadarea var fileUploadarea = document.getElementById("fileUploadarea"); if (!fileUploadarea) return false; var newLine = document.createElement("br"); fileUploadarea.appendChild(newLine); var newFile = document.createElement("input"); newFile.type = "file"; newFile.setAttribute("class", "fileUpload"); /////กำหนดค่าเริ่มต้นให้กับตัวแปร AddMoreFiles.lastAssignedId เพื่อใช้ในการกำหนด ID ให้กับคอนโทรลที่สร้างขึ้น และเป็นตัวนับ if (!AddMoreFiles.lastAssignedId) AddMoreFiles.lastAssignedId = 1; //////กำหนดค่าแอททริบิวต์ต่างๆให้กับ FileUpload ที่ทำการสร้างใหม่ ในทีนี้คือ id และ name newFile.setAttribute("id", "FileUpload" + AddMoreFiles.lastAssignedId); newFile.setAttribute("name", "FileUpload" + AddMoreFiles.lastAssignedId); //////สร้าง div ขึ้นมาใหม่ และกำหนดค่าแอททริบิวต์ต่างๆให้กับ div ที่ทำการสร้างใหม่ ในทีนี้คือ id และ เพิ่มคอนโทรลที่สร้าง tag ไว้ด้านบนเข้ามาไว้ใน div var div = document.createElement("div"); div.appendChild(newFile); div.setAttribute("id", "div" + AddMoreFiles.lastAssignedId); //////เพิ่ม div ที่สร้างใหม่ไปยัง div ที่มีชื่อว่า fileUploadarea และเพิ่มค่าของตัวแปร AddMoreFiles.lastAssignedId fileUploadarea.appendChild(div); AddMoreFiles.lastAssignedId++; }
2.2) ฟังก์ชั่นที่ใช้ในการเพิ่มไฟล์ได้โดยมีการระบุจำนวนสูงสุดที่ยอมให้อัพโหลดแต่ละครั้ง ในกรณีที่ต้องการระบุค่าจำนวนไฟล์ที่ต้องการให้ผู้ใช้สามารถอัพโหลดได้สูงสุดในแต่ละครั้ง สามารถปรับแก้เพิ่มเติมจากฟังก์ชั่นก่อนหน้านี้ โดยการส่งพารามิเตอร์จำนวนมากสุดที่ยอมให้สร้างตัวอัพโหลดไฟล์ได้ โดยใช้ชื่อฟังก์ชั่นว่า AddMoreFilesWithMax(x) ดังนี้
function AddMoreFilesWithMax(x) { //////กำหนดค่าให้กับ AddMoreFiles.lastAssignedId เพื่อเป็นค่าตั้งต้นในการไปเซทค่า id และ name ของคอนโทรลที่สร้างใหม่ โดยในที่นี้เริ่มต้นที่ 2 เนื่องจากเดิมมีคอนโทรลอัพโหลดไฟล์อยู่เดิมแล้ว 1 ตัว if (!AddMoreFiles.lastAssignedId) AddMoreFiles.lastAssignedId = 2; if (!document.getElementById && !document.createElement) return false; var fileUploadarea = document.getElementById("fileUploadarea"); if (!fileUploadarea) return false; /////เป็นการตรวจสอบเงื่อนไขว่ายังไม่เกินจำนวนมากสุดที่ระบุไว้ผ่านพารามิเตอร์ x if (AddMoreFiles.lastAssignedId <= x) { var newLine = document.createElement("br"); //สร้างปุ่ม Remove เพื่อใช้ลบคอนโทรล FileUpload ที่สร้างขึ้นออกโดยผู้ใช้ var newbtnDel = document.createElement("input"); newbtnDel.setAttribute("id", "btnDelUpload" + AddMoreFiles.lastAssignedId); newbtnDel.setAttribute("name", "btnDelUpload" + AddMoreFiles.lastAssignedId); newbtnDel.setAttribute("value", "Remove"); newbtnDel.type = "button"; //////สร้างคอนโทรล FileUpload ขึ้นใหม่และกำหนดแอททริบิวต์ต่างๆให้ var newFile = document.createElement("input"); newFile.type = "file"; newFile.setAttribute("class", "fileUpload"); newFile.setAttribute("id", "FileUpload" + AddMoreFiles.lastAssignedId); newFile.setAttribute("name", "FileUpload" + AddMoreFiles.lastAssignedId); //////เป็นส่วนของการเรียกฟังก์ชั่นในการตรวจสอบไฟล์ที่ทำการอัพโหลดว่าถูกต้องตรงตามเงื่อนไขหรือไม่ เมื่อมีการเลือกไฟล์ใดๆจากผู้ใช้ ซึ่งจะพูดถึงในส่วนถัดไปในการสร้างฟังก์ชั่น FileValidate(ctrl,maxVal) newFile.setAttribute('onchange', 'javascipt:FileValidate(this,5);'); //////สร้าง div ขึ้นมาใหม่ และกำหนดค่าแอททริบิวต์ต่างๆให้กับ div ที่ทำการสร้างใหม่ ในทีนี้คือ id และ เพิ่มคอนโทรลที่สร้าง tag ไว้ด้านบนเข้ามาไว้ใน div var div = document.createElement("div"); div.appendChild(newLine); div.appendChild(newFile); //////เพิ่มช่องว่างระหว่างคอนโทรลอัพโหลดไฟล์และปุ่ม Remove เพื่อความสวยงาม div.appendChild(document.createTextNode('\u00A0')); div.appendChild( newbtnDel); div.setAttribute("id", "div" + AddMoreFiles.lastAssignedId); //////เพิ่ม event การคลิกปุ่ม Remove เพื่อให้ไปเรียกใช้ฟังก์ชั่น DelFileUpload โดยส่งค่า id ของ div ที่ต้องการให้ลบออกซึ่งจะกล่าวถึงในส่วนถัดไปของการสร้างฟังก์ชั่น DelFileUpload(divid); newbtnDel.setAttribute('onclick', 'javascipt:DelFileUpload(\'' + "div" + AddMoreFiles.lastAssignedId + '\');'); fileUploadarea.appendChild(div); AddMoreFiles.lastAssignedId++; } ///////กรณีที่มีจำนวนตัวอัพโฟลดไฟล์ที่ถูกสร้างขึ้นเองเกินกว่าที่กำหนด(ค่าพารามิเตอร์ x) จะแสดงข้อความให้ทราบ else { alert("ขออภัย ท่านสามารถอัพโหลดไฟล์ได้สูงสุดครั้งละไม่เกิน " + x + " ไฟล์ต่อการอัพโหลดแต่ละครั้ง กรุณาลองใหม่อีกครั้ง"); return false; } }
2.3) ฟังก์ชั่นที่ใช้ในการตรวจสอบขนาดของไฟล์ โดยมีการระบุขนาดสูงสุดที่ยอมให้อัพโหลดแต่ละครั้ง โดยใช้ชื่อฟังก์ชั่นว่า FileValidate(ctrlFile,MaxSize)
////เป็นการประกาศตัวแปรที่ใช้ในการตรวจสอบชนิดของไฟล์ที่ยอมให้อัพโหลดได้ var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png", ".pdf"];
function FileValidate(ctrlFile,MaxSize) {//////พารามิเตอร์ที่รับเข้ามาคือตัวคอนโทรลของการอัพโหลดไฟล์ที่ต้องการตรวจสอบ(ctrlFile) และขนาดสูงสุดของไฟล์ที่ยอมให้อัพโหลดในแต่ละคอนโทรล(MaxSize) ////ดึงค่าชื่อของไฟล์ที่อัพโหลดที่ต้องการตรวจสอบ var sFileName = ctrlFile.value; /////ตรวจสอบเมื่อพบชื่อไฟล์ที่ดึง if (sFileName.length > 0) { var blnValid = false; //////////ตรวจสอบนามสกุลของไฟล์ที่ดึงมาจากชื่อไฟล์กับค่าของนามสกุลไฟล์ที่ยอมให้อัพโหลด จากตัวแปร _validFileExtensions for (var j = 0; j < _validFileExtensions.length; j++) { var sCurExtension = _validFileExtensions[j]; if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { blnValid = true; break; } } //////กรณีไฟล์ดังกล่าวมีนามสกุลที่แตกต่างจากที่กำหนดจะแสดงข้อความแจ้งเตือน และล้างค่าของชื่อไฟล์ในคอนโทรลอัพโหลดไฟล์ตัวดังกล่าว if (!blnValid) { alert("ไม่สามารถอัพโหลดไฟล์ดังกล่าวได้ เนื่องจากรองรับเฉพาะไฟล์ที่มีนามสกุลดังนี้เท่านั้น: " + _validFileExtensions.join(", ")); ctrlFile.value = ""; return false; } else { /////หากไฟล์ที่อัพโหลดมีนามสกุลไฟล์ตามที่ระบุ จะทำการตรวจสอบขนาดของไฟล์ว่าไม่เกินจากขนาดสูงสุด ที่กำหนดหรือไม่ โดยมีการคำนวณหน่วยเป็น MB var fileSize = parseFloat(ctrlFile.files[0].size / 1048576).toFixed(2); /////หากขนาดของไฟล์เกินกว่าที่กำหนดจะแสดงข้อความแจ้งเตือน และล้างค่าไฟล์ที่ต้องการอัพโหลด ในคอนโทรลอัพโหลดไฟล์ดังกล่าว if (fileSize > MaxSize) { alert(" ขออภัย ขนาดของไฟล์ที่ต้องการอัพโหลดมีขนาดใหญ่เกินกว่าทีกำหนด(" + MaxSize + " MB)"); ctrlFile.value = ""; return false; } } } return true; }
2.4) ฟังก์ชั่นที่ใช้ในการตรวจสอบว่ามีการเลือกไฟล์ที่ต้องการอัพโหลดแล้วหรือไม่ เมื่อมีการกดปุ่ม “Upload” โดยใช้ชื่อฟังก์ชั่นว่า ValidateFileUpload()
function ValidateFileUpload() { //////เป็นการค้นหาคอนโทรลไฟล์อัพโหลดที่มีในหน้าจอโดยใช้ tag input และตรวจสอบที่มี type เป็น "file" ใส่ไว้ในตัวแปร arrInputs var arrInputs = document.getElementsByTagName("input"); var blnValid; var oInput; for (var i = 0; i < arrInputs.length; i++) { oInput = arrInputs[i]; if (oInput.type == "file") { var sFileName = oInput.value; ///////หากพบตัวอัพโหลดไฟล์ตัวใดที่ยังไม่ได้ทำการเลือกไฟล์ไว้ จะทำการแสดงข้อความแจ้งเตือนให้ทราบ if (sFileName.length == 0) { blnValid = false; alert("ขออภัย ไม่สามารถอัพโหลดไฟล์ได้ เนื่องจากพบว่ามีบางไฟล์ไม่ได้ถูกเลือก กรุณาลองใหม่อีกครั้ง"); return false; } } } return true; }
2.5) ฟังก์ชั่นที่ใช้ในการลบคอนโทรลที่ใช้ในการอัพโหลดไฟล์ โดยใช้ชื่อฟังก์ชั่นว่า DelFileUpload(dv) ซึ่งจะส่งพารามิเตอร์เป็น id ของ div ตัวที่ต้องการให้ลบ และถูกเรียกใช้เมื่อมีการกดปุ่ม “Remove”
function DelFileUpload(dv) { ////ค้นหา div ตาม id ที่ส่งเข้ามา var elem = document.getElementById(dv); ///ทำการลบ div นั้นออกจากหน้าจอและลดค่าของ AddMoreFiles.lastAssignedId ลง 1 เพื่อใช้ในการคำนวณค่าสูงสุดและกำหนด tag ของ id และ name ของคอนโทรลที่สร้างใหม่ต่อไป elem.parentNode.removeChild(elem); AddMoreFiles.lastAssignedId = AddMoreFiles.lastAssignedId - 1; }
3) ในฝั่งเซฺิร์ฟเวอร์ (C#)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; /////เป็น namespace ที่ต้องอ้างอิงเพิ่มเพื่อใช้ในการจัดการข้อมูลกับ datatable using System.Data; /////เป็น namespace ที่ต้องอ้างอิงเพิ่มเพื่อใช้ในการจัดการเกี่ยวกับการอัพโหลดไฟล์ using System.IO; public partial class MultipleUpload : System.Web.UI.Page { protected void BtnUpload_Click(object sender, EventArgs e) { try { //////สมมุติเพื่อนำไปประยุกต์ใช้กับการบันทึกลงฐานข้อมูลต่อไป โดยสร้างโครงสร้าง datatable ที่ชื่อว่า dtFiles DataTable dtFiles = new DataTable(); dtFiles.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)), new DataColumn("Name", typeof(string)), new DataColumn("FileSize",typeof(string)) }); ////เป็นการดึงคอนโทรลในการอัพโหลดไฟล์ที่ถูกสร้างขึ้นและวนรอบในการบันทึกไฟล์ดังกล่าว HttpFileCollection hfc = Request.Files; for (int i = 0; i < hfc.Count; i++) { HttpPostedFile hpf = hfc[i]; if (hpf.ContentLength > 0) { //////บันทึกไฟล์ตามที่ระบุไว้ hpf.SaveAs(Server.MapPath("~/uploads/") + System.IO.Path.GetFileName(hpf.FileName)); ////เพิ่มข้อมูลลงไปใน datatable ที่สร้างไว้ สำหรับการใช้งานจริงอาจเป็นการติดต่อเพื่อบันทึกลงฐานข้อมูล dtFiles.Rows.Add(i,hpf.FileName, hpf.ContentLength / 1024); } } if (dtFiles.Rows.Count > 0) { //////ดึงข้อมูลจาก datatable มาแสดงในกริดวิว gvResult.DataSource = dtFiles; gvResult.DataBind(); } } } catch (Exception) { throw; } } }
เพิ่มเติม :
หากต้องการตกแต่งเพื่อความสวยงามสามารถใส่ StyleSheet เพิ่มเติมได้ ดังตัวอย่างต่อไปนี้
<style type="text/css"> .fileUpload { width:255px; font-size:11px; color:#000000; border:solid; border-width:1px; border-color:#7f9db9; height:17px; } .Divborder { border: 2px solid; border-radius: 5px; padding:10px; width:390px; } </style>
ตัวอย่างผลลัพธ์ที่ได้
1) แสดงหน้าจอ โดยแรกเริ่มมีอัพโหลดไฟล์ตั้งต้น 1 ตัว
2) แสดงหน้าจอเมื่อมีการกดปุ่ม “Add more files” 
3) แสดงผลลัพธ์หลังจากบันทึกข้อมูลเรียบร้อยแล้ว
2. การอัพโหลดไฟล์คราวละหลายๆไฟล์โดยใช้ .Net Framework เวอร์ชั่น 4.5 ซึ่งในบทความนี้จะไม่ลงรายละเอียดมากนัก ผู้อ่านสามารถนำไปประยุกต์เพิ่มเติมได้ โดยจะอธิบายทีละขั้นตอนคร่าวๆ ดังนี้
<body> <form id="form1" runat="server"> <div> <asp:FileUpload ID="file_upload" runat="server" AllowMultiple="true" /> <asp:Button ID="btnFileUpload" runat="server" Text="Upload" OnClick="btnFileUpload_Click" /> <asp:Label ID="lblUploadStatus" runat="server"></asp:Label><br /> <asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="410px"> <AlternatingRowStyle BackColor="White" /> <Columns> <asp:BoundField DataField="Name" HeaderText="ชื่อไฟล์"> <ItemStyle Width="300px" /> </asp:BoundField> <asp:BoundField DataField="filesize" HeaderText="ขนาดไฟล์(KB)"> <ItemStyle HorizontalAlign="Right" Width="110px" /> </asp:BoundField> </Columns> <EditRowStyle BackColor="#2461BF" /> <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#EFF3FB" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#F5F7FB" /> <SortedAscendingHeaderStyle BackColor="#6D95E1" /> <SortedDescendingCellStyle BackColor="#E9EBEF" /> <SortedDescendingHeaderStyle BackColor="#4870BE" /> </asp:GridView> </div> </form> </body>
2) การพัฒนาในฝั่งเซิร์ฟเวอร์(C#)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; using System.Data; namespace WebAppTest { public partial class MultipleUpload : System.Web.UI.Page { protected void btnFileUpload_Click(object sender, EventArgs e) { try { ///////การตรวจสอบขนาดไฟล์และไฟล์ต้องเป็นชนิด image/jpeg เท่านั้น if (file_upload.HasFile && file_upload.PostedFiles.All(x => x.ContentType == "image/jpeg" && x.ContentLength < 102400)) { ///////ประกาศตัวแปร และกำหนดโครงสร้างของ datatable int i = 1; DataTable dtFiles = new DataTable(); dtFiles.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)), new DataColumn("Name", typeof(string)), new DataColumn("FileSize",typeof(string)) }); foreach (var file in file_upload.PostedFiles) { //////บันทึกไฟล์ที่เลือก file_upload.SaveAs(Server.MapPath("~/Fileupload/") + Path.GetFileName(file.FileName)); ////วนบันทึกข้อมูลไฟล์ที่อัพโหลดลงใน datatable dtFiles.Rows.Add(i, file.FileName, file.ContentLength / 1024); } ////แสดงข้อความเมื่อการอัพโหลดเสร็จสมบูรณ์ lblUploadStatus.Text = "บันทึกสำเร็จ"; ////แสดงค่าที่ได้ลงในกริดวิว if (dtFiles.Rows.Count > 0) { gvResult.DataSource = dtFiles; gvResult.DataBind(); } } else { ////แสดงข้อความแจ้งเตือนกรณีเกิดปัญหาไฟล์มีขนาดใหญ๋เกินกว่าที่กำหนดและไม่ใช่ชนิด image/jpeg lblUploadStatus.Text = "กรุณาเลือกไฟล์ที่ต้องการอัพโหลดให้เหมาะสม"; } } catch (Exception ex) { ////แสดงข้อความแจ้งเตือนกรณีเกิดปัญหาในการอัพโหลดไฟล์ lblUploadStatus.Text = "เกิดข้อผิดพลาดในการอัพโหลดไฟล์ :" + ex.Message; } } } }
ตัวอย่างผลลัพธ์ที่ได้
1) ก่อนทำการอัพโหลดไฟล์
2) หลังอัพโหลดไฟล์ทั้งหมดเรียบร้อยแล้ว
หมายเหตุ : หากกำหนดค่าให้กับ Properties ที่ชื่อว่า AllowMultiple=”false“ ตอนเลือกไฟล์ที่จะอัพโหลดจะสามารถเลือกได้เพียงไฟล์เดียวเท่านั้น
จากบทความและตัวอย่างข้างต้น จะเห็นว่า ลักษณะผลลัพธ์ที่ได้จะคล้ายคลึงกัน แต่จะแตกต่างกันในส่วนของความซับซ้อนในการตรวจสอบความถูกต้องของข้อมูลไฟล์แนบที่รับเข้ามา ซึ่งผู้พัฒนาเองสามารถเลือกใช้วิธีที่ตนถนัดและขึ้นกับเวอร์ชั่นของ .NET Framework ที่กำลังพัฒนา รวมถึงเงื่อนไขของการตรวจสอบให้ตรงตามความต้องการของผู้ใช้มากที่สุด โดยเนื้อหาในบทความนี้เป็นเพียงแนวทางหนึ่งให้กับท่านในเบื้องต้นเท่านั้น ท่านสามารถนำไปประยุกต์ต่อยอดเพิ่มเติมได้ และผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้จะเป็นประโยชน์กับผู้พัฒนาที่กำลังค้นหาวิธีการอัพโหลดไฟล์คราวละหลายไฟล์นี้อยู่เช่นกัน หากมีเนื้อหาส่วนใดผิดพลาด ผู้เขียนขออภัยไว้ ณ ที่นี้ด้วย ขอบคุณค่ะ ^^
แหล่งข้อมูลอ้างอิง :
http://www.aspsnippets.com/Articles/Uploading-Multiple-Files-using-JavaScript-Dynamic-FileUpload-Controls-in-ASP.Net.aspx
http://www.codeproject.com/Articles/667604/Upload-multiple-files-in-asp-net
http://www.c-sharpcorner.com/UploadFile/99bb20/upload-multiple-files-using-fileupload-control-in-Asp-Net-4/
Entity Framework (EF) คือ data access technology ที่เริ่มเปิดตัวครั้งแรกเป็นส่วนหนึ่งของ .NET Framework 3.5 SP1 โดยตัว EF จะทำหน้าที่เป็น object-relational mapper ที่ทำให้ผู้พัฒนาไม่จำเป็นต้องเขียน code ในส่วน data access ก็สามารถใช้ข้อมูลจาก relational database โดยผ่าน object model
การพัฒนาโปรแกรมโดยใช้ EF นั้นจำเป็นต้องมี Entity Data Model เป็น model ที่กำหนดรายละเอียดเกี่ยวกับ entity และ relationship ระหว่าง entity นั้นๆ การสร้าง Entity Data Model สามารถแยกออกเป็น 2 แนวทางคือ “Code First” เป็นการกำหนดรูปร่างของ model โดยการสร้าง class (เขียน code) จะมี database หรือไม่มีอยู่ก่อนก็ได้ และ “Database First” ที่จะทำการสร้าง model ( reverse engineer) จาก database ที่มีอยู่โดย EF Designer ซึ่ง model ที่ได้จะเก็บอยู่ใน EDMX file (.edmx) สามารถเปิดหรือแก้ไขเพิ่มเติมได้ด้วย EF Designer สำหรับ class ที่ใช้ในโปรแกรมจะถูกสร้างโดยอัตโนมัติจาก EDMX file
ข้อมูล Entity Data Model ใน EDMX file อยู่ในรูปแบบ xml สามารถแบ่งออกเป็น 3 ส่วนคือ Storage model, Conceptual model และ Mapping ซึ่งในส่วนของ Storage model จะเป็นข้อมูลรายละเอียดของ entity จาก database เช่น
ข้อมูล EntityType ที่ให้รายละเอียดของชื่อของ entity (table ใน database), ชื่อและประเภทของ property (column ของ table ใน database)
<EntityType Name="VF_CONFIG_REPORT">
<Key>
<PropertyRef Name="ID" />
</Key>
<Property Name="ID" Type="number" Precision="38" Scale="0" Nullable="false" />
<Property Name="REPORT_NAME" Type="varchar2" MaxLength="512" />
<Property Name="REPORT_PATH" Type="varchar2" MaxLength="512" />
<Property Name="GROUP_TYPE" Type="number" Precision="38" Scale="0" />
<Property Name="SIGN_NUM" Type="number" Precision="38" Scale="0" />
<Property Name="SIGNS" Type="varchar2" MaxLength="128" />
</EntityType>
ข้อมูล EntitySet ที่ประกอบด้วย ชื่อ,ประเภทของ entity, schema และ query ที่ใช้ดึงข้อมูล
<EntitySet Name="VF_CONFIG_REPORT" EntityType="Self.VF_CONFIG_REPORT" store:Type="Views" store:Schema="FINANCE"> <DefiningQuery> SELECT "VF_CONFIG_REPORT"."ID" AS "ID", "VF_CONFIG_REPORT"."REPORT_NAME" AS "REPORT_NAME", "VF_CONFIG_REPORT"."REPORT_PATH" AS "REPORT_PATH", "VF_CONFIG_REPORT"."GROUP_TYPE" AS "GROUP_TYPE", "VF_CONFIG_REPORT"."SIGN_NUM" AS "SIGN_NUM", "VF_CONFIG_REPORT"."SIGNS" AS "SIGNS" FROM "FINANCE"."VF_CONFIG_REPORT" "VF_CONFIG_REPORT" </DefiningQuery> </EntitySet>
เมื่อมีการระบุ schema ของ entityใน EDMX file นั่นทำให้การ deploy ระบบ(โปรแกรมและ database) จำเป็นต้องมี database ที่มี schema ชื่อเดียวกับที่กำหนดใน EDMX file เท่านั้น(schema ได้มาจากการ generate ของ EF Designer ในขั้นตอนการพัฒนาระบบ) ถ้าต้องการให้ EF ทำงานกับ database schema อื่นจะต้องแก้ไข schema ใน EDMX file ให้ตรงกัน หรือไม่ระบุ schema โดยลบส่วนที่ระบุ schema ออก ซึ่งการแก้ไขจะต้องทำการแก้ไขโดยตรงไปที่ EDMX file แล้วทำการ build ใหม่ (ในกรณีที่ไม่ได้เลือก build EDMX file เป็นแบบ embeded resource สามารถแก้ไขที่ .ssdl file ได้โดยไม่ต้อง build ใหม่)
ในการเปลี่ยน schema ใน EDMX file นั้นจะต้องแก้ทุก EntitySet ที่มี ทำให้มีความเสี่ยงที่จะเกิดความผิดพลาดในการแก้ไข ทำให้ระบบไม่สามารถทำงานได้ และถ้ามีความจำเป็นต้องปรับ Entity Data Model เพื่อเพิ่ม, แก้ไข หรือลบ entity ใดๆ EF Designer จะทำการ update .EDMX file ใหม่ ทำให้ schema ที่แก้ไขไปแล้วกลับมาเหมือนเดิม ต้องเปลี่ยน schema ใหม่อีกครั้ง ก็ยิ่งจะเพิ่มความเสี่ยงที่จะเกิดความผิดพลาด และยุ่งยากในการบริการจัดการ source code
เราสามารถทำให้กระบวนการแก้ไขหรือลบ schema ใน EDMX file เป็นไปโดยอัตโนมัติ โดยการแก้ใข .csproj เพิ่มกระบวนการแก้ไขหรือลบ schema เข้าไปในขั้นตอนการ build ของ MsBuild หลังจากกระบวนการ “EntityDeployEmbededResource” ของ EF ดังนี้
<Target Name="RemoveSchemaEntityDeployEmbeddedResources" AfterTargets="EntityDeployEmbeddedResources" Condition="'@(EntityDeployEmbeddingItems)' != ''">
<PropertyGroup>
<RemoveSchemaEmbeddedResources>"Libs\EFRemoveSchema" $(EntityDeployIntermediateResourcePath)%(EntityDeployEmbeddedResources.EntityDeployRelativeDir)</RemoveSchemaEmbeddedResources>
</PropertyGroup>
<Exec WorkingDirectory="$(MSBuildProjectDirectory)" Command="$(RemoveSchemaEmbeddedResources)" />
</Target>
“Libs\EFRomoveSchema” เป็นโปรแกรมเล็กๆที่พัฒนาเพื่อลบ schema ใน Entity Data Model ที่อยู่ใน folder $(EntityDeployIntermediateResourcePath)%(EntityDeployEmbeddedResources.EntityDeployRelativeDir) โดยใช้ เทคนิคการค้นหา attribute ของ node ที่ต้องการใน XML file (EDMX file) เพื่อลบ และบันทึกกลับลงไปที่ XML file นั้นๆ
อ้างอิง : https://msdn.microsoft.com/en-us/data/ee712907