ASP.NET: رفع الملفات إلى الموقع

في الدروس السابقة قمنا بدراسة الأدوات القياسية والتي لابد من استخدامها في معظم تطبيقات ASP.Net، سنتناول في الدروس القادمة أدوات تحكم أكثر تخصصا وتعرف مجموعة الأدوات هذه باسم Rich controls.

في هذا الدرس ستتعلم كيف تسمح للمتصفحين بأن يرفعوا ملفاتهم على الموقع، كأن يقوموا مثلا برفع صور، ملفات فيديو ... إلخ.

رفع الملفات إلى الموقع

نستخدم أداة التحكم FileUpload لرفع الملفات إلى الموقع، ونقوم بتحديد المكان الذي سيتم تخزين ملفات المستخدمين فيه، إما مجلد داخل الموقع أو ضمن قاعدة بيانات الموقع وسنستعرض كلا الحالتين.

خصائص أداة التحكم FileUpload

Enabled: تفعيل أو إلغاء تفعيل هذه الأداة.
FileBytes: للحصول على محتويات الملف كمصفوفة بايتات.
FileContent: للحصول على محتويات الملف كمجرى stream.
FileName: الحصول على اسم الملف.
HasFile: تعيد True عندما يتم رفع الملف.
PostedFile: تعيد الملف المرفوع مغلف بغرض من الصف HttpPostedFile.

كما أن أداة التحكم FileUpload تدعم الطرائق التالية:

Focus: تسمح بوضع التركيز على هذه الأداة.
SaveAs: تقوم بتخزين الملف (المراد رفعه) على الموقع.

تقوم الخاصية PostedFile بتغليف الملف المرفوع بغرض HttpPostedFile، هذا الأمر يسمح بالحصول على معلومات إضافية حول الملف.

خصائص الصف HttpPostedFile

ContentLenght: لمعرفة حجم الملف بالبايتات.
ContentType: لمعرفة نوع الملف ( اللاحقة).
FileName: لمعرفة اسم الملف.
InputStream: الحصول على الملف كمجرى stream.

كما أن الصف HttpPostedFile يدعم الطريقة SaveAs والتي تقوم بتخزين الملف على الموقع.

لاحظ أن الصف HttpPostedFile يقدم بعض الخصائص المتوفرة مسبقا مع أداة التحكم FileUpload والتي يمكن التعامل معها دون الحاجة للصف HttpPostedFile، على سبيل المثال للحصول على اسم الملف يمكن اتباع أحد الأسلوبين:

FileUpload.FileName
HttpPostedFile.FileName

كما أن الطريقة SaveAs موجودة في الصف HttpPostedFile على الرغم من توافرها مع أداة التحكم FileUpload بشكل صريح.

مثال:

أنشئ صفحة جديدة وأضف عليها الأدوات FileUpload1 ،Button1 ،Label1. أنشئ مجلد جديد داخل ملفات الموقع باسم uploads لنقوم برفع الملفات إليه، في حدث الضغط على الزر اكتب الكود التالي:

كود #C

    protected void Button1_Click(object sender, EventArgs e)
    {
        try
        {
            if (FileUpload1.HasFile)
            {
                string path = "~/uploads/" + FileUpload1.FileName;
                FileUpload1.SaveAs(MapPath(path));
                Label1.Text = "File Uploaded successfuly...";
            }
        }
        catch (Exception ex) { }
    }

كود VB

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As  
    System.EventArgs) Handles Button1.Click

        If (FileUpload1.HasFile) Then
            Dim filePath As String = "~/uploads/" & FileUpload1.FileName
            FileUpload1.SaveAs(MapPath(filePath))
        End If
    End Sub

كود الصفحة يجب أن يكون كالتالي:

كود ASP.net

    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Upload" 
                    onclick="Button1_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""/>
    </div>

نفذ التطبيق السابق وحاول رفع ملف ما ( صورة مثلا)، أغلق التنفيذ. يجب أن يكون الملف قد أضيف للمجلد Upload، إن لم تره اضغط على تحديث ملفات الموقع كالتالي:

في المثال السابق يستطيع المستخدم أن يرفع أي نوع كان من الملفات، سنقوم في المثال التالي بتحديد الأنماط التي نسمح للمستخدم بأن يقوم برفعها ( فقط بعض أنواع الصور).

مثال:

أنشئ صفحة جديدة وأضف عليها الأدوات FileUpload1 ،Button1 ،Label1. أنشئ مجلد جديد داخل ملفات الموقع باسم uploads لنقوم برفع الملفات إليه. في حدث الضغط على الزر اكتب الكود التالي:

كود #C

    protected void Button1_Click(object sender, EventArgs e)
    {
        try
        {
            if (FileUpload1.HasFile)
            {
                if (CheckFileType(FileUpload1.FileName))
                {
                    string path = "~/uploads/" + FileUpload1.FileName;
                    FileUpload1.SaveAs(MapPath(path));
                    Label1.Text = "File Uploaded successfuly...";
                }
            }
        }
        catch (Exception ex) { }
    }

كود VB

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As 
    System.EventArgs) Handles Button1.Click

        If (FileUpload1.HasFile) Then
            If (CheckFileType(FileUpload1.FileName)) Then
                Dim filePath As String = "~/uploads/" & FileUpload1.FileName
                FileUpload1.SaveAs(MapPath(filePath))
            End If
        End If
    End Sub

قم باستدعاء فضاء الأسماء الخاص بالدخل والخرج IO، حيث نضيف الكود التالي أعلى الصفحة:

كود #C

using System.IO;

كود VB

Imports System.IO

أما الدالة CheckFileType المسؤولة عن فحص نوع الملف فهي:

كود #C

    bool CheckFileType(string fileName)
    {
        string ext = Path.GetExtension(fileName);
        switch (ext.ToLower())
        {
            case ".gif":
                return true;
            case ".png":
                return true;
            case ".jpg":
                return true;
            case ".jpeg":
                return true;
            default:
                return false;
        }
    }

كود VB

    Function CheckFileType(ByVal fileName As String) As Boolean
        Dim ext As String = Path.GetExtension(fileName)
        Select Case ext.ToLower()
            Case ".gif"
                Return True
            Case ".png"
                Return True
            Case ".jpg"
                Return True
            Case ".jpeg"
                Return True
            Case Else
                Return False
        End Select
    End Function

كود الصفحة السابقة:

كود ASP.net

    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Upload" 
                    onclick="Button1_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""/>
    </div>

نفذ التطبيق السابق وحاول أن ترفع ملف ما مغاير للأنواع المحددة، ستلاحظ عدم رفع الملف، أعد التجربة مع أحد أنواع الصور السابقة لترى قبول عملية الرفع.

رفع الملفات إلى قاعدة بيانات

حيث نقوم بتخزين الملفات في قاعدة بيانات عوضا عن مجلد عادي، هذا الأسلوب يسبب كبر هائل بحجم قاعدة البيانات وبالتالي صعوبة وبطء في نقلها والتعامل معها، كما أننا نحتاج لتحويل الملفات إلى بيانات ثنائية (0,1) لنتمكن من تخزينها في الجدول، الأسلوب الأفضل والمتبع في المواقع هو رفع الملفات إلى مجلد عادي وتخزين أسماء الملفات المرفوعة ضمن قاعدة البيانات مع تخزين معلومات أخرى عنها كتاريخ الرفع مثلا. على العموم لن ندخل بهذه التفاصيل الآن على اعتبار أننا لم نتطرق لموضوع قواعد البيانات، سيكون لنا عودة لمناقشة كيفية رفع الملفات بأسلوب احترافي في الدروس المتقدمة.

ملاحظة: يتم قبول رفع الملفات ذات الأحجام أصغر من 4 ميغابايت ( عد للمثال الأول وحاول رفع ملف أكبر من هذا الحجم لترى عدم قبول العملية )، ولتغيير الحجم الأقصى المسموح به لكل ملف، نفتح الملف Web.config ونضيف كود السطر الرابع:

كود XML

<configuration>
	<system.web>
		<compilation debug="true" targetFramework="4.0"/>
              <httpRuntime maxRequestLength="10240"/>
	</system.web>
</configuration>

حيث تم تحديد الحجم الأعظمي بـ 10240 كيلو بايت ( أي 10 ميغا بايت ).