บทความ

Uploading Files Using the File Field Control

เรตติ้ง
เขียนโดย admin เมื่อวันที่ 08 April 2008 ตอน 11:44

ใช้ได้กับ

Microsoft ASP.NET

สรุป:

เรียนรู้วิธีการใช้คอนโทรล File Field ของ Microsoft ASP.NET เพื่อช่วยให้ผู้ใช้อัพโหลดไฟล์ตั้งแต่หนึ่งไฟล์ไปไว้ในเซิร์ฟเวอร์

คำนำ

Web Forms ของ Microsoft ASP.NET เกี่ยวข้องกับการสื่อสารกับผู้ใช้เพื่อดึงข้อมูลที่ต้องการมาจากผู้ใช้เหล่านี้โดยใช้เซอร์วิส ถ้าหากพูดถึง Web Forms ส่วนมากแล้ว การกรอกและจัดเก็บข้อมูลที่เป็นข้อความมักทำได้ง่ายมาก อย่างไรก็ตามมีอีกหลายกรณีที่คุณไม่ได้ต้องการแค่ข้อมูลแบบง่ายๆเท่านั้น คุณอาจต้องการให้ผู้ใช้อัพโหลดไฟล์ไปยังเซิร์ฟเวอร์ด้วย

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

ไม่ว่าจะเป็นกรณีใดก็ตาม ASP.NET จะช่วยให้คุณมีความสามารถง่ายๆที่จะอัพโหลดเอกสารไปเก็บเอาไว้ในเซิร์ฟเวอร์ได้ โดยที่คุณต้องลงมือทำงานบางอย่างเพียงเล็กน้อยเท่านั้นเอง บทความนี้จะอธิบายวิธีการใช้คอนโทรล File Field เพื่ออัพโหลดเอสการไปไว้ในเว็บเซิร์ฟเวอร์

ศึกษาคอนโทรล File Field อย่างละเอียด

คอนโทรล File Field พึ่งพาคลาส HtmlInputFile เป็นหลัก โดยที่ File Field ถือเป็นคอนโทรลชั้นยอดตัวหนึ่งเนื่องจากก่อนหน้าที่จะมี ASP.NET งานเหล่านี้เป็นงานที่ยุ่งยากอย่างมาก (คุณต้องซื้อคอมโพเน้นต์จากบริษัทอื่นๆมาทำงานนี้แทน) แต่คอนโทรล File Field สามารถอัพโหลดไฟล์จากไคล์เอ็นต์ไปยังเซิร์ฟเวอร์ได้

สิ่งสำคัญที่ต้องแจ้งให้ทราบก่อนก็คือคอนโทรลตัวนี้มีชื่อว่า File Field ใน Microsoft Visual Studio .NET ทุกเวอร์ชัน แต่ถ้าหากอยู่ใน ASP.NET Web Matrix แล้วคอนโทรลตัวนี้จะใช้ชื่อว่า FileUpload ซึ่งในทั้งสองกรณีคุณจะเจอคอนโทรลตัวนี้อยู่ในหัวข้อ HTML ของ Toolbox

คอนโทรล File Field ยอมให้มีการเรียกใช้โปรแกรมใน HTML <input type = "file> tag ได้ โดยที่ tag ตัวนี้มักใช้ทำงานกับข้อมูลไฟล์ที่อยู่ภายในฟอร์ม HTML เป็นหลัก ในอดีตถ้าหากคุณใช้ ASP รุ่นเก่า (ASP 3.0 หรือรุ่นก่อนหน้านั้) โปรแกรมมักต้องใช้คอมโพเน้นต์ของบริษัทซอฟต์แวร์อื่นๆ เพื่ออัพโหลดไฟล์จากไคล์เอ็นต์ไปยังเซิร์ฟเวอร์ แต่ในปัจจุบัน .NET และคอนโทรลตัวใหม่จะมาช่วยจัดการกับการอัพโหลดให้คุณเอง ซึ่งงานของคุณไม่มีทางที่จะง่ายดายไปกว่านี้อีกแล้ว ตัวอย่างโค้ดที่ 1 แสดงวิธีการใช้คอนโทรล File Field เพื่ออัพโหลดไฟล์ไปยังเซิร์ฟเวอร์

ตัวอย่างโค้ด 1 การอัพโหลดไฟล์ไปยังเซิร์ฟเวอร์โดยใช้คอนโทรล File Field

VB.NET

<%@ Page Language="VB" %>
<script runat="server">

    Sub SubmitButton_Click(Source As Object, e As EventArgs)
       If Not (File1.PostedFile Is Nothing) Then
          Try
             File1.PostedFile.SaveAs("C:\Uploads\uploadedfile.txt")
             Span1.InnerHtml = "Upload Successful!"
          Catch ex As Exception
             Span1.InnerHtml = "Error saving file <b>C:\\" & _
                File1.Value & "</b><br>" & ex.ToString()
          End Try
       End If
    End Sub

</script>
<html>
<head>
</head>
<body>
    <form runat="server" enctype="multipart/form-data">
        Select a file to upload:<br />
        <input type="file" id="File1" runat="Server">
        <p>
        <input type="submit" id="Submit1" runat="Server" 
         value="Upload File" OnServerClick="SubmitButton_Click">
        <p>
        <span id="Span1" runat="Server" />
    </form>
</body>
</html>

C#

<%@ Page Language="C#" %>
<script runat="server">

    void SubmitButton_Click(Object sender, EventArgs e) {
       if (File1.PostedFile != null) {
          try {
             File1.PostedFile.SaveAs("C:\\Uploads\\uploadedfile.txt");
             Span1.InnerHtml = "Upload Successful!";
          }
          catch (Exception ex) {
             Span1.InnerHtml = "Error saving file <b>C:\\" +
                File1.Value + "</b><br>" + ex.ToString();
          }
       }
    } 

</script>
<html>
<head>
</head>
<body>
    <form runat="server" enctype="multipart/form-data">
        Select a file to upload:<br />
        <input type="file" id="File1" runat="Server">
        <p>
        <input type="submit" id="Submit1" runat="Server" 
         value="Upload File" OnServerClick="SubmitButton_Click">
        <p>
        <span id="Span1" runat="Server" />
    </form>
</body>
</html>

เมื่อเพจของตัวอย่างโค้ดที่ 1 เริ่มทำงาน คุณสามารถเลือกไฟล์แล้วอัพโหลดไปยังเซิร์ฟเวอร์ได้ โดยการคลิกที่ปุ่ม Upload File ในเพจ คุณสมบัตินี้จัดเป็นคุณสมบัติชั้นยอดที่โปรแกรมเมอร์ ASP 3.0 รอคอยมานานแล้ว ในตอนนี้คุณเพียงแค่เขียนโค้ดเพียงไม่กี่บรรทัด คุณก็สามารถโหลดไฟล์ทุกชนิดไปยังเซิร์ฟเวอร์ได้โดยง่ายแล้ว

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

ถ้าหากคุณคิดว่ายังไม่ได้มีการเปิดให้บัญชีชื่อ ASP.NET บันทึกข้อมูลลงไปในโฟลเดอร์ที่คุณต้องการแล้วละก็ ให้คุณเรียก Microsoft Windows Explorer ขึ้นมา จากนั้นเข้าไปยังโฟลเดอร์ที่คุณต้องการเพิ่มสิทธิบันทึกข้อมูลลงไป ให้คุณคลิกเม้าส์ปุ่มขวาที่โฟลเดอร์ (ในตัวอย่างก็คือโฟลเดอร์ Uploads) แล้วเลือก Properties เมื่อกรอบ Properties โผล่ขึ้นมาให้คลิกที่ข้อ Security แล้วตรวจสอบให้แน่ใจว่ามี ASP.NET Machine Account อยู่ในรายการและมีสิทธิเหมาะสมที่จะบันทึกข้อมูลลงไปได้หรือยัง

ถ้าหากคุณไม่เห็น ASP.NET Machine Account อยู่ในหัวข้อ Security คุณสามารถเพิ่มบัญชีชื่อดังกล่าวลงไปโดยการคลิกที่ปุ่ม Add แล้วกรอก ASPNET ลงไป (ไม่ต้องใส่จุด) ในช่องข้อความเหมือนอย่างที่แสดงเอาไว้ในภาพที่ 2

คลิก OK เพื่อเพิ่ม ASP.NET Machine Account ลงไปในรายการ ซึ่งจากจุดนี้ตรวจสอบให้แน่ใจว่าคุณได้กำหนดสิทธิที่เหมาะสมให้แก่บัญชีชื่อนี้แล้ว จากนั้นคลิก OK คุณก็พร้อมที่จะทำงานต่อแล้ว

เมื่อพิจารณาโค้ดตัวอย่างที่ 1 คุณอาจสังเกตเห็นสิ่งที่มีความสำคัญบางอย่าง เรื่องแรก <form> tag ถูกแก้ไขให้มีการเพิ่ม attribute อีกอันหนึ่งลงไปแล้ว ถ้าหากต้องการอัพโหลดไฟล์ไปยังเซิร์ฟเวอร์แล้วละก็ <form> tag ของคุณต้องมี attribute เป็น enctype="multipart/form-data" ถ้าหากไม่มี attribute ดังกล่าว เว็บฟอร์มจะไม่สามารถอัพโหลดไฟล์ได้

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

การใช้ <input type = "file"> tag ทำให้บราวเซอร์จะใส่ปุ่ม Browse ต่อจากฟิลด์ข้อความของเพจ ASP.NET ให้โดยอัตโนมัติ คุณไม่จำเป็นต้องเขียนโปรแกรมเพื่อทำให้องค์ประกอบดังกล่าวโผล่ขึ้นมา ถ้าหากผู้ใช้คลิกที่ปุ่ม Browse เขาจะสามารถค้นหาไฟล์ในพีซีของตนเองเพื่ออัพโหลดไปยังเซิร์ฟเวอร์ได้ การคลิกที่ Open จะใส่ชื่อไฟล์และจุดเก็บไฟล์เอาไว้ในฟิลด์ข้อความ

การทำงานกับข้อจำกัดเรื่องขนาดของไฟล์

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

อย่างไรก็ตามข้อดีของ .NET ก็คือโดยปกติแล้วมันได้เตรียมช่องทางที่ใช้หลีกเลี่ยงข้อจำกัดดังกล่าวเอาไว้แล้ว นั่นก็คือคุณเพียงแต่เปลี่ยนแปลงตัวแปรเริ่มต้นที่มีอยู่เท่านั้น โดยวิธีการแก้ไขข้อจำกัดดังกล่าว ให้คุณทำการแก้ไขไฟล์ machine.config หรือ web.config ก็ได้

ในไฟล์ machine.config ให้ค้นหาโหนดชื่อ <httpRuntime> ที่มีหน้าตาแบบนี้

โหนดเพียงโหนดเดียวนี้มีงานเกิดขึ้นมากมาย แต่ตัวแปรที่เอาไว้คอยจัดการเรื่องขนาดของไฟล์ที่จะอัพโหลดก็คือ maxRequestLength attribute ซึ่งโดยปกติแล้ว ค่าจะกำหนดเป็น 4096 กิโลไบต์ (KB) ให้คุณแก้ไขค่านี้เพื่อเพิ่มขนาดของไฟล์ที่ต้องการอัพโหลดไปยังเซิร์ฟเวอร์ได้ ถ้าหากคุณต้องการอัพโหลดไฟล์ 10 เมกาไบต์ (MB) ไปยังเซิร์ฟเวอร์ได้ ให้กำหนดค่า maxRequestLength เป็น 11264 ซึ่งนั่นหมายความว่าแอพพลิเคชันยอมให้มีการอัพโหลดไฟล์ 11000 KB ไปยังเซิร์ฟเวอร์ได้

การแก้ไขไฟล์ machine.config จะส่งผลต่อแอพพลิเคชันทุกชนิดที่ผู้ในเซิร์ฟเวอร์ ถ้าหากคุณต้องการแก้ไขข้อจำกัดเรื่องขนาดไฟล์ให้แก่แอพพลิเคชันที่คุณทำงานอยู่เท่านั้น ให้คุณใส่โหนดนี้ในไฟล์ web.config ของแอพพลิเคชันของคุณเอง ซึ่งจะเป็นการแทนที่สิ่งที่กำหนดเอาไว้ในไฟล์ machine.config คุณต้องตรวจสอบให้แน่ใจว่าโหนดนี้อยู่ระหว่างโหนด <system.web> ในไฟล์ตัวแปรด้วย

การแก้ไขอีกอย่างหนึ่งที่เกี่ยวข้องกับข้อจำกัดขนาดของไฟล์ที่จะอัพโหลดก็คือค่าของ executionTimeout attribute ที่อยู่ในโหนด <httpRuntime>

ค่าที่กำหนดให้ executionTimeout attribute เป็นจำนวนวินาทีของการอัพโหลดที่ยอมให้เกิดขึ้นก่อนที่ ASP.NET จะปิดการทำงาน ถ้าหากคุณต้องการให้มีการอัพโหลดไฟล์ขนาดใหญ่ไปยังเซิร์ฟเวอร์ คุณจำเป็นต้องเพิ่มค่าดังกล่าวรวมทั้งค่า maxRequestLength ด้วย

ข้อเสียของการเพิ่มขนาดของไฟล์ที่จะอัพโหลดก็คือ มีแฮกเกอร์ที่จะคอยโจมตีเซิร์ฟเวอร์โดยการส่งคำสั่งจำนวนมากเข้ามา ถ้าหากต้องการป้องกันปัญหาเรื่องนี้ คุณจำเป็นต้องลดขนาดของไฟล์ที่จะยอมให้อัพโหลดได้ มิฉะนั้นแล้วคุณจะเจอกับไฟล์ขนาด 10 MB เป็นร้อยเป็นพันไฟล์ส่งมายังเซิร์เวอร์ของคุณ

การควบคุมประเภทของไฟล์ที่จะอัพโหลด

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

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

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

หมายเหตุ: เราจะไม่อธิบายวิธีการใช้คอนโทรลตรวจสอบความถูกต้องในบทความนี้ คุณควรอ่านบทความ "ตรวจสอบความถูกต้องเซิร์ฟเวอร์คอนโทรลของ ASP.NET" ซึ่งจะช่วยให้คุณเข้าใจคอนโทรลตรวจสอบความถูกต้องได้มากขึ้น รวมทั้งวิธีการใช้คอนโทรลเหล่านี้ในเพจ ASP.NET ด้วย

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

VB.NET

<%@ Page Language="VB" %>
<script runat="server">

    Sub SubmitButton_Click(Source As Object, e As EventArgs)
       If Not (File1.PostedFile Is Nothing) Then
          Try
             File1.PostedFile.SaveAs("C:\Uploads\uploadedfile.txt")
             Span1.InnerHtml = "Upload Successful!"
          Catch ex As Exception
             Span1.InnerHtml = "Error saving file <b>C:\\" & _
                File1.Value & "</b><br>" & ex.ToString()
          End Try
       End If
    End Sub

</script>
<html>
<head>
</head>
<body>
    <form enctype="multipart/form-data" runat="server">
        <input id="File1" type="file" runat="Server" />
        <p>
            <input id="Submit1" type="submit" value="Upload File" 
             runat="Server" onserverclick="SubmitButton_Click" />
        </p>
        <span id="Span1" runat="Server" /> 
        <p>
            <asp:RegularExpressionValidator 
             id="RegularExpressionValidator1" runat="server" 
             ErrorMessage="Only mp3, m3u or mpeg files are 
             allowed!" ValidationExpression="^(([a-zA-
             Z]:)|(\\{2}\w+)\$?)(\\(\w[\w
             ].*))+(.mp3|.MP3|.mpeg|.MPEG|.m3u|.M3U)$" 
             ControlToValidate="File1">
            </asp:RegularExpressionValidator>
            <br />
            <asp:RequiredFieldValidator 
             id="RequiredFieldValidator1" runat="server" 
             ErrorMessage="This is a required field!" 
             ControlToValidate="File1">
            </asp:RequiredFieldValidator>
        </p>        
    </form>
</body>
</html>

C#

<%@ Page Language="C#" %>
<script runat="server">

    void SubmitButton_Click(Object sender, EventArgs e) {
       if (File1.PostedFile != null) {
          try {
             File1.PostedFile.SaveAs("C:\\Uploads\\uploadedfile.txt");
             Span1.InnerHtml = "Upload Successful!";
          }
          catch (Exception ex) {
             Span1.InnerHtml = "Error saving file <b>C:\\" +
                File1.Value + "</b><br>" + ex.ToString();
          }
       }
    }

</script>
<html>
<head>
</head>
<body>
    <form enctype="multipart/form-data" runat="server">
        <input id="File1" type="file" runat="Server" />
        <p>
            <input id="Submit1" type="submit" value="Upload File" 
             runat="Server" onserverclick="SubmitButton_Click" />
        </p>
        <span id="Span1" runat="Server" /> 
        <p>
            <asp:RegularExpressionValidator 
             id="RegularExpressionValidator1" runat="server" 
             ErrorMessage="Only mp3, m3u or mpeg files are 
             allowed!" ValidationExpression="^(([a-zA-
             Z]:)|(\\{2}\w+)\$?)(\\(\w[\w
             ].*))+(.mp3|.MP3|.mpeg|.MPEG|.m3u|.M3U)$" 
             ControlToValidate="File1">
            </asp:RegularExpressionValidator>
            <br />
            <asp:RequiredFieldValidator 
             id="RequiredFieldValidator1" runat="server" 
             ErrorMessage="This is a required field!" 
             ControlToValidate="File1">
            </asp:RequiredFieldValidator>
        </p>        
    </form>
</body>
</html>

เพจ ASP.NET แบบง่ายๆเพจนี้ใช้คอนโทรลตรวจสอบความถูกต้อง เพื่อที่ผู้ใช้จะสามารถอัพโหลดไฟล์ .mp3, mpeg หรือ m3u ไปยังเซิร์ฟเวอร์ได้เท่านั้น ถ้าหากประเภทของไฟล์ไม่ได้อยู่ใน 3 ประเภทนี้ คอนโทรลตรวจสอบความถูกต้องจะแสดงข้อความเตือนบนหน้าจอ เหมือนอย่างที่แสดงเอาไว้ในภาพที่ 4

ภาพที่ 4: การตรวจสอบประเภทของไฟล์โดยใช้คอนโทรลตรวจสอบความถูกต้อง

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

การอัพโหลดไฟล์จำนวนมากในเวลาเดียวกัน

เท่าที่ผ่านมาคุณเห็นตัวอย่างของการอัพโหลดไฟล์หนึ่งไฟล์ไปยังเซิร์ฟเวอร์โดยไม่มีปัญหาแล้ว ในตอนนี้เราลองมาดูกันว่าจะอัพโหลดไฟล์จำนวนมากไปยังเซิร์ฟเวอร์จากเพจเพียงเพจเดียวได้อย่างไร

Microsoft .NET Framework ไม่มีคุณสมบัติในตัวที่ช่วยให้คุณอัพโหลดไฟล์จำนวนมากจากเพจ ASP.NET เพียงเพจเดียวได้ อย่างไรก็ตามการเขียนโค้ดเพียงเล็กน้อยก็จะช่วยให้คุณทำงานนี้ได้

เทคนิคอย่างหนึ่งก็คืออิมพอร์ตคลาส System.IO ไปไว้ในเพจ ASP.NET จากนั้นก็ใช้คลาส HttpFileCollection เพื่อรวบรวมไฟล์ทั้งหมดที่ถูกส่งเข้ามาโดยใช้ออปเจ็กต์ Request แนวทางนี้จะช่วยให้คุณอัพโหลดไฟล์จำนวนมากได้อย่างที่คุณต้องการจากเพจเพียงเพจเดียวได้

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

ตัวอย่างโค้ดที่ 3: การอัพโหลดไฟล์จำนวนมากไปยังเซิร์ฟเวอร์

VB.NET

<%@ Import Namespace="System.IO" %>
<%@ Page Language="VB" %>

<script runat="server">

    Sub SubmitButton_Click(Source As Object, e As EventArgs)
       Dim filepath As String = "C:\Uploads"
       Dim uploadedFiles As HttpFileCollection = Request.Files
       Dim i As Integer = 0
       
       Do Until i = uploadedFiles.Count
          Dim userPostedFile As HttpPostedFile = uploadedFiles(i)
          
          Try
             If (userPostedFile.ContentLength > 0) Then
                Span1.InnerHtml += "<u>File #" & (i+1) & "</u><br>"
                Span1.InnerHtml += "File Content Type: " & _
                   userPostedFile.ContentType & "<br>"
                Span1.InnerHtml += "File Size: " & _
                   userPostedFile.ContentLength & "kb<br>"
                Span1.InnerHtml += "File Name: " & _
                   userPostedFile.FileName & "<br>"
    
                userPostedFile.SaveAs(filepath & "\" & _
                   Path.GetFileName(userPostedFile.FileName))
    
                Span1.InnerHtml += "Location where saved: " & _
                   filepath & "\" & _
                   Path.GetFileName(userPostedFile.FileName) & _
                   "<p>"
             End If
          Catch ex As Exception
             Span1.InnerHtml += "Error:<br>" & ex.Message
          End Try
          i += 1
       Loop       
    End Sub

</script>

<html>
<head>
</head>
<body>
    <form enctype="multipart/form-data" runat="server">
        <p>
            Select File1:<br />
            <input id="File1" type="file" runat="Server" />
            <br />
            Select File2:<br />
            <input id="File2" type="file" runat="Server" />
            <br />
            Select File3:<br />
            <input id="File3" type="file" runat="Server" />
            <br />
            Select File4:<br />
            <input id="File4" type="file" runat="Server" />
        </p>
        <p>
            <input id="Submit1" type="submit" value="Upload Files" 
             runat="Server" onserverclick="SubmitButton_Click" />
            <br />
        </p>
        <span id="Span1" runat="Server"></span>
    </form>
</body>
</html>

C#

<%@ Import Namespace="System.IO" %>
<%@ Page Language="C#" %>

<script runat="server">

    protected void SubmitButton_Click(Object sender, EventArgs e){
       string filepath = "C:\\Uploads";
       HttpFileCollection uploadedFiles = Request.Files;
    
       for (int i = 0; i < uploadedFiles.Count; i++)
       {    
          HttpPostedFile userPostedFile = uploadedFiles;
    
          try
          {    
             if (userPostedFile.ContentLength > 0 )
             {
                Span1.InnerHtml += "<u>File #" + (i+1) + 
                   "</u><br>";
                Span1.InnerHtml += "File Content Type: " + 
                   userPostedFile.ContentType + "<br>";
                Span1.InnerHtml += "File Size: " + 
                   userPostedFile.ContentLength + "kb<br>";
                Span1.InnerHtml += "File Name: " + 
                   userPostedFile.FileName + "<br>";
    
                userPostedFile.SaveAs(filepath + "\\" + 
                   Path.GetFileName(userPostedFile.FileName));
    
                Span1.InnerHtml += "Location where saved: " + 
                   filepath + "\\" + 
                   Path.GetFileName(userPostedFile.FileName) + 
                   "<p>";
             }    
          } 
          catch (Exception Ex)
          {    
             Span1.InnerText += "Error: <br>" + Ex.Message;    
          }    
       }    
    }

</script>

<html>
<head>
</head>
<body>
    <form enctype="multipart/form-data" runat="server">
        <p>
            Select File1:<br />
            <input id="File1" type="file" runat="Server" />
            <br />
            Select File2:<br />
            <input id="File2" type="file" runat="Server" />
            <br />
            Select File3:<br />
            <input id="File3" type="file" runat="Server" />
            <br />
            Select File4:<br />
            <input id="File4" type="file" runat="Server" />
        </p>
        <p>
            <input id="Submit1" type="submit" value="Upload Files" 
             runat="Server" onserverclick="SubmitButton_Click" />
            <br />
        </p>
        <span id="Span1" runat="Server"></span>
    </form>
</body>
</html>

ผู้ใช้สามารถเลือกไฟล์ได้มากถึง 4 ไฟล์ แล้วคลิกที่ปุ่ม Upload Files ซึ่งจะเป็นตัวเริ่มขั้นตอน SubmitButton_Click event การใช้คลาส HttpFileCollection ร่วมกับ Request Files property จะช่วยให้คุณควบคุมไฟล์ทั้งหมดที่ถูกอัพโหลดมาจากเพจนี้ได้ เมื่อไฟล์อยู่ในสภาพนี้ คุณสามารถทำอะไรกับไฟล์ก็ได้ ซึ่งในกรณีนี้จะมีการตรวจสอบคุณสมบัติของไฟล์และแจ้งกลับไปยังหน้าจอก็ได้ ซึ่งในที่สุดแล้วไฟล์จะถูกเซฟเอาไว้ในโฟลเดอร์ Uploads ในรูทไดเรกทอรีของเซิร์ฟเวอร์ ผลลัพธ์ของขั้นตอนนี้จะเป็นดังนี้

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

สรุป

คอนโทรล File Field ใน ASP.NET จัดเป็นคอนโทรลประสิทธิภาพสูงที่ก่อนหน้านี้ในยุค Active Serve Pages 3.0 จัดเป็นงานที่ยากมาก แต่ในตอนนี้คุณสมบัติใหม่ดังกล่าวช่วยให้ผู้ใช้อัพโหลดไฟล์มากกว่าหนึ่งไฟล์ไปยังเซิร์ฟเวอร์ได้ แต่คุณต้องจำเอาไว้ว่าคุณสามารถควบคุมขนาดของไฟล์ที่จะอัพโหลดไปได้โดยการทำงานกับตัวแปรทั้งที่อยู่ในไฟล์ machine.config หรือ web.config ก็ได้

Filed under: asp.net, file upload

	"Sunny" The Programmer said: บทความนี้มีประโยชน์มากๆเลยครับ ช่วยได้เยอะเลย ผมกำลังติดปัญหาการ upload file อยู่พอดี โชคดีได้อ่านไม่อย่างนั้นปิดโปรเจกไม่ได้แน่ๆ ขอบคุณมากครับ May 10, 2008 1:50 AM
	zero said: thank for good tip May 11, 2009 3:56 PM
	nok said: sddddsdsdsdsds May 13, 2009 11:48 AM
	Herudoy said: Very Good Thank June 29, 2009 2:31 AM

Name (required)

Your URL (optional)

Comments (required)

Remember Me?

Add

เพื่อนบ้าน

ดูจากแท็ก

เดือนก่อนๆ

โพสอื่นๆ

บทความ

Uploading Files Using the File Field Control

"Sunny" The Programmer said:

zero said:

nok said:

Herudoy said:

Leave a Comment