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

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

ליאור זמיר ,‏ ג'ון ברייס הדרכה‏ ‏/‏ 6 יולי, 2010
F+
F-
בדוגמה הקודמת, איפשרנו למשתמשים להעלות קובץ אחד. אבל נוכל להשתמש helper FileUpload להעלות יותר מקובץ אחד בכל פעם. זה שימושי עבור תרחישים כמו העלאת תמונות, שבהם העלאת קובץ אחד בכל פעם היא פעולה מייגעת. דוגמה זו מראה כיצד לאפשר למשתמשים להעלות שני קבצים בכל פעם, אם כי ניתן להשתמש באותה פונקציה כדי להעלות יותר מזה.
  1. הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Libraryבמידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה _Admin . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
  2. צור דף חדש בשם FileUploadMultiple.cshtml
  3. החלף את הקוד בדף החדש בקוד הנ"ל:
    @{
        var message = "";
        if (IsPost) 
        {
            var fileName = "";
            var fileSavePath = "";
            int numFiles = Request.Files.Count;
            message = "File upload complete. Total files uploaded: " + 
              numFiles.ToString();
        
            for(int i =0; i < numFiles; i++) 
            {
                var uploadedFile = Request.Files[i];
                fileName = Path.GetFileName(uploadedFile.FileName); 
                fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" + 
                  fileName);
                uploadedFile.SaveAs(fileSavePath);
            }
        }
    }
     
    <html>
        <head><title>FileUpload - Multiple File Example</title></head>
    <body>
        <form id="myForm" method="post" 
           enctype="multipart/form-data" 
           action="">
        <div>
            <h1>File Upload - Multiple-File Example</h1>
            @if (!IsPost) 
            {
                @FileUpload.GetHtml(
                    initialNumberOfFiles:2, 
                    allowMoreFilesToBeAdded:true, 
                    includeFormTag:true, 
                    addText:"Add another file", 
                    uploadText:"Upload")
            }
            <span>@message</span>
        </div>
        </form>
    </body>
    </html>

    בדוגמה זו, העוזר FileUpload שבתוך תגית ה- Body, מוגדר לאפשר למשתמשים להעלות שני קבצים כברירת מחדל. מאחר ו- allowMoreFilesToBeAdded מוגדר כ- True, העוזר מייצר קישור דרכו ניתן לייצר עוד תיבת טקסט וכפתור איתם נבחר קובץ נוסף שיועלה לאתר:

    image
    כדי לעבד את הקבצים שנוספו, הקוד משתמש בטכניקה הבסיסית בה השתמשנו בדוגמה הקודמת – קבלת קובץ דרך Request.Files ולאחר מכן שומר אותו (כמובן במקביל לכל הפעולות שיש לעשות כדי לקבל את שם הקובץ ואת הנתיב הנכון). החידוש הפעם הוא שהמשתמש עשוי להעלות כמות מרובה של קבצים ואחנו לא יודעים כמה. כדי לברר, נשתמש במאפיין Request.Files.Count.

    אחרי שחילצנו את מס' הקבצים, נוכל לרוץ בלולאה על Request.Files, לקחת כל קובץ בתורו, ולשמור אותו. אם נרצה ליישם לולאה שרצה מספר ידוע של פעמים על אוסף נתונים, נוכל להשתמש בלולאה כדוגמאת זו:

    for(int i =0; i < numFiles; i++) 
    {
        var uploadedFile = Request.Files[i];
        fileName = Path.GetFileName(uploadedFile.FileName); 
        ...
    }

    המשתנה i הוא משתנה זמני שמתחיל מאפס ומקודם בהדרגה עד לגבול העליון שהצבנו לו. במקרה הזה, הגבול העליון הוא מספר הקבצים. בגלל שאתחול המשתנה מתחיל מאפס, אופייני עבור תרחישים ב- CSHTML, הגבול העליון הוא למעשה אחד פחות ממספר הקבצים בפועל. (אם שלושה הקבצים הועלו, המספור הוא מ- 0 עד 2)

  4. הצג את הדף בדפדפן. הדפדפן מציג את הדף ושתי תיבות להעלאת קבצים.

  5. בחר שני קבצים להעלאה.

  6. לחץ על “Add another file” והעמוד יתעדכן ויוסיף תיבת העלאה נוספת.

    image


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

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

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

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

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

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

    תגובות למאמר



    עוד במדריך

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

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