העלאת - הורדת קבצים עם kendo ui upload

    • Home
    • Blog
    • העלאת - הורדת קבצים עם kendo ui upload

    העלאת קבצים

    העלאות קבצים מתבצעת באמצעות input מסוג file,

    בדוגמא הבא נשתמש ב-kendo-upload של kendo ui

    Code Snippet
    <input type=”file”
            name=”files”
            kendo-upload
            k-async=”{ saveUrl: ‘save’, autoUpload: false }” />

    הפרמטר “saveUrl” מקבל את הכתובת לאן לשלוח את הקובץ,

    והפרמטר “autoUpload” אם מוגדר true,  הקובץ שנבחר ישלח מיד לשרת. ואם מוגדר false,  הקבצים ישלחו רק כשנלחץ על הכפתור “העלה קבצים שבחרת”, (הכפתור “העלה קבצים שבחרת” מוצג רק אם נבחר autoUpload” = false”)

    כך זה נראה בדפדפן:

    upload

     

    יש שני אפשרויות לשמירת קבצים,

    1. הדרך הפשוטה יותר לשמור את הקובץ במחשב ככל הקבצים, ולשמור ב-DATABASE את מיקום הקובץ.
      הבעיה בשיטה זו, שאם נעתיק את הקובץ למיקום אחר, או נשנה את שמו, ה-DATABASE לא יתעדכן וימשיך להפנות למיקום הקודם.
    2. לשמור את קובץ עצמו ב-DATABASE,
      ובכך נחסוך את הבעיה באפשרות הקודמת ,

    כרגע נבחר באפשרות השניה.

    Code Snippet
    public JsonResult save(HttpPostedFileBase files)
    {
        byte[] data = new byte[files.ContentLength];
        files.InputStream.Read(data, 0, files.ContentLength);

        Documents file = new Documents()
        {
            FileName = files.FileName,
            ContentType = files.ContentType,
            Contents = data
        };
        DB.Documents.Add(file);
        return Json(DB.SaveChanges() > 0);
    }

    הפרמטר שמתקבל הוא מסוג  HttpPostedFileBase, שמכיל את הקובץ ומידע עליו

    כדי לשמור את הקובץ ב-DATABASE צריך להמיר אותו למערך מסוג byte 

    ההמרה מתבצעת בעמצאות InputStream.read שמקבל את הפרמטרים הבאים: מערך, התחלה, וסיום,

    Documents הוא שם האוביקט של ה-EntityFramework שבו נשמור את המערך, שם הקובץ, וסוג הקובץ.

     

    הורדת קבצים

    JavaScripe 

    Code Snippet
    angular.module(‘myApp’, [“kendo.directives”])
            .controller(‘fileCtrl’, function fileCtrl($scope, $http) {

                $http.post(‘/Home/listFils’).success(function (res) {
                    $scope.files = res;
                });

            });

    קיבלנו את רשימת הקבצים מהשרת, ושמרנו את הרשימה ב-files.

    HTML 

    Code Snippet
    <div class=”panel panel-default”>
        <div class=”panel-heading”>קבצים להורדה</div>
        <div class=”panel-body”>
            <ul class=”list-group”>
                <li class=”list-group-item” ng-repeat=”file in files”>
                    <a target=”_blank” href=”/Home/Download/{{file.Id}}“>{{file.FileName}}</a>
                </li>
            </ul>
        </div>
    </div>

    יצרנו link לכל הקבצים באמצעות ng-repeat, שעובר על files,

    ושרשרנו ב-href את ה-id של הקובץ.

    עטפנו את ה-link בכמה classים של bootstrap,

    כך נראה הרשימה בדפדפן

    download

    בלחיצה על link נגיע ל-Download.

    Code Snippet
    public ActionResult Download(int id)
    {
        var Document = DB.Documents.FirstOrDefault(x => x.Id == id);
        Byte[] data = Document.Contents;
        var file = File(data, Document.ContentType);
        return file;
    }

    כאן שלפנו את המידע מה-DATABASE, המירנו אותו בחזרה בעזרת File שמקבל מערך של byte, ואת סוג הקובץ .

    ושלחנו את הקובץ לדפדפן.

    חיפוש

    פוסטים אחרונים

    Import files from git using CSharp
    MVC Actions and Object Oriented
    Upload file using angularjs with some data

    תגיות

    הרב דוטנט

    החברה מספקת שירותי ייעוץ פיתוח והדרכה.

    מפתחי החברה עומדים בחזית הטכנולוגיה, חלק גדול מזמן העבודה מושקע בלמידה על הטכנולוגיות החדשות, אנחנו רואים במפתחים שלנו את מהות החברה, אם אתם רוצים לקבל שירות בין אם זה ייעוץ בין אם תרצו שנפתח עבורכם, וכמובן אם אתם רוצים ללמוד, אתם מוזמנים לפנות אלינו.

    פוסטים אחרונים

    דף הבית

    צור קשר

    רבי שמעון בן שטח 8
    אלעד, ישראל
    טלפון: 052-624-9139
    פקס: 077-444-7864
    Email: info@haravdotnet.co.il