וובמאסטר - תיכנות ובניית אתרים

מדריך CSHTML - עבודה עם קבצים: העלאת קבצים ע"י משתמשים

ליאור זמיר ,‏ ג'ון ברייס הדרכה‏ ‏/‏ 6 יולי, 2010
F+
F-

ב- CSHTML קיים עוזר בשם FileUpload המאפשר למשתמשים להעלות קבצים אל אתר האינטרנט שלנו. הדוגמא הבאה מציגה כיצד לעשות זאת.

  1. הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Libraryבמידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה _Admin . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
  2. בתוך תיקיית ה- App_Data צור תיקיה חדשה בשם UploadedFiles
  3. בתיקייה הראשית של האתר צור קובץ בשם FileUpload.cshtml
  4. החלף את הקוד בדף, בקוד הבא:

    @{  
        var fileName = "";
        if (IsPost) 
        {
            var fileSavePath = "";
            var uploadedFile = Request.Files[0];
            fileName = Path.GetFileName(uploadedFile.FileName);
            fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" + fileName);
            uploadedFile.SaveAs(fileSavePath);
        } 
    }
    
    <html>
        <head>
        <title>FileUpload - Single-File Example</title>
        </head>
        <body>
        <h1>FileUpload - Single-File Example</h1>
        @FileUpload.GetHtml(
            initialNumberOfFiles: 1, 
            allowMoreFilesToBeAdded: false, 
            includeFormTag: true, 
            uploadText: "Upload")
        @if (IsPost) 
        {
            <span>File uploaded!</span><br/>
        }   
        </body>
    </html>

    החלק שבתוך תג ה- body משתמש בעוזר FileUpload  כדי ליצור את פקד בחירת הקובץ ובנוסף לו כפתור העלאה שנראה כך:

    image


    המאפיינים שהגדרנו עבור FileUpload helper מציינים כי ברצוננו תיבה אחת עבור הקובץ המיועד להעלאה וכי המלל שיופיע על כפתור השליחה יהיה upload (נלמד להוסיף תיבות נוספות בהמשך הפרק).

    כאשר המשתמש לוחץ על Upload הקוד בראש הדף מקבל את הקובץ ושומר אותו. אובייקט Request, שבדרך כלל אנחנו משתמשים בו כדי לקבל ערכים משדות הטופס מכיל גם מערך קבצים המכיל את הקובץ (או הקבצים) שנטענו. אנחנו יכולים לקבל קבצים בודדים מתוך עמדות ספציפיות של המערך. למשל, כדי לקבל את הקובץ שהועלה קודם, נבקש Request.Files [0], כדי לקבל את הקובץ השני, נבקש Request.Files [1], וכן הלאה . (יש לזכור כי הספרור מתחיל ב- 0)

    כאשר אנחנו מנתחים קובץ שהועלה, נשים אותו במשתנה כלשהו (במקרה הזה, uploadedFile), כך שניתן לבצע עליו מניפולציות. כדי לקבוע את השם של הקובץ שהועלה, פשוט ניגש למאפיין FileName שלו. עם זאת, כאשר המשתמש מעלה קובץ, FileName מכיל את השם והמיקום המקורי של הקובץ, אשר כולל את הנתיב כולו. זה יכול להיראות כך:
    C:\Users\Public\Sample.txt

    אנחנו לא רוצים את כל המידע הזה בגלל שזה הנתיב במחשב של המשתמש ולא על השרת. אבל נרצה רק את שם הקובץ בפועל (Sample.txt). ניתן לבודד את שם הקובץ מתוך הנתיב המלא ע"י שימוש בפונקציה Path.GetFileName, כמו בדוגמא:
    Path.GetFileName(uploadedFile.FileName)

    אובייקט Path (נתיב) הוא כלי עזר שיש לו מספר פונקציות כגון זו המאפשרת לבודד/לחלץ שם קובץ ספציפי, לשלב נתיבים וכדומה. ברגע שהצלחנו לבודד את שם הקובץ שהועלה, נבנה נתיב חדש שבו נרצה לאחסן את הקובץ שהועלה. במקרה הזה, נשלב דרך Server.MapPath את שמות התיקיות (App_Data/UploadedFiles), ואת שם הקובץ החדש שמצאנו קודם בכדי ליצור נתיב חדש. לאחר מכן נוכל להפעיל את הפונקציה SaveAs בכדי לשמור את הקובץ בפועל.

  5. הצג את הדף בדפדפן .

    image


  6. לחץ על Browse ואז בחר קובץ להעלאה

    לחץ להגדלה

    תיבת הטקסט הסמוכה לכפתור ה- Browse תכיל את הנתיב המלא לקובץ שבחרנו.

    image


  7. לחץ על כפתור ה- Upload

  8. בעץ הקבצים של האתר, לחץ על הכפתור הימני ואז Refresh

  9. פתח את התיקייה UploadedFiles, שם נמצא הקובץ שהעלינו.

    image


ליאור זמיר, ג'ון ברייס הדרכה

כיום אני ה- Webmaster של תוכנית החדשנות של HPE Software.
לפני כן, הייתי מנהל תחום Webmaster ומרצה בכיר בג'ון-ברייס (במשך 9 שנים) בקורסים לפיתוח ותיכנות באמצעות Microsoft .NET, מולטימדיה, בניית אתרי אינטרנט ואינטראנט. פיתוח הדרכה ומתן ייעוץ טכנולוגי.
תגיות: ASP.NET‏  /  CSHTML‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות