اعتبارسنجی اندازه فایل در سمت کلاینت در ASP.NET MVC

با عرض سلام خدمت تمامی دوستداران مباحث آموزشی طراحی سایت ، با یکی دیگر از مقالات آموزشی ASP.NET MVC در خدمت شما عزیزان هستیم در این مقاله آموزشی قصد داریم تا شما را با نحوه اعتبارسنجی اندازه فایل در سمت کلاینت با Custom Validation آشنا نماییم پس با ما همراه باشید .

اعتبارسنجی اندازه فایل در سمت Client با Custom Validation

برای شروع کار ابتدا یک پروژه از نوع MVC  ایجاد کنید سپس یک class به نام FileSizeAttribute و یا هر نام دلخواهی به پروژه خود اضافه نمایید برای این منظور ابتدا بر روی پروژه خود راست کلیک کرده و سپس پس از انتخاب گزینه add بر روی Class کلیک نمایید و سپس کدهای زیر را درون کلاس FileSizeAttribute کپی کنید.

کلاس FileSizeAttribute از دو کلاس ValidationAttribute, IClientValidatable ارث بری می کند و از کلاس IClientValidatable برای اعتبارسنجی اندازه فایل در سمت کلاینت استفاده شده است .

سازنده این کلاس ماکسیمم اندازه فایل را بر حسب Byte به عنوان پارامتر ورودی دریافت می‌کند و متد IsValid فایل را به عنوان ورودی دریافت کرده و بررسی میکند که آیا اندازه فایل از ماکسیسم اندازه فایل بیشتر است یا خیر ، و در صورتی که اندازه فایل ورودی از ماکسیمم اندازه فایل بیشتر بود false را بر می گرداند.

کدهای مربوط به کلاس FizeSizeAttribute

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace FileUploadValidation.CustomValidation
{
    [AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
    public class FileSizeAttribute : ValidationAttribute, IClientValidatable
    {
        public int? MaxBytes { get; set; }

        public FileSizeAttribute(int maxBytes)
            : base("Please upload a supported file.")
        {
            MaxBytes = maxBytes;
            if (MaxBytes.HasValue)
            {
                ErrorMessage = "Please upload a file of less than " + MaxBytes.Value/1048576 + " MB";
            }
        }

        public override bool IsValid(object value)
        {
            HttpPostedFileBase file = value as HttpPostedFileBase;
            if (file != null)
            {
                bool result = true;

                if (MaxBytes.HasValue)
                {
                    result &= (file.ContentLength < MaxBytes.Value);
                }

                return result;
            }

            return true;
        }

        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metaData, ControllerContext context)
        {
            var rule = new ModelClientValidationRule
            {
                ValidationType = "filesize",
                ErrorMessage = FormatErrorMessage(metaData.DisplayName)
            };
            rule.ValidationParameters["maxbytes"] = MaxBytes;
            yield return rule;
        }
    }
}

حال یک یک فایل جاوا اسکریپت به نام FileSize.js درون پوشه Scripts ایجاد نمایید و سپس کدهای زیر را که جهت اعتبارسنجی نوع فایل در سمت کلاینت نوشته شده است درون این فایل کپی کنید.

کدهای مربوط به فایل FileSize.js

$(function () {
    jQuery.validator.unobtrusive.adapters.add('filesize', ['maxbytes'], function (options) {
        // Set up test parameters
        var params = {
            maxbytes: options.params.maxbytes
        };

        options.rules['filesize'] = params;
        if (options.message) {
            options.messages['filesize'] = options.message;
        }
    });

    jQuery.validator.addMethod("filesize", function (value, element, param) {
        if (value === "") {
            // no file supplied
            return true;
        }

        var maxBytes = parseInt(param.maxbytes);
        if (element.files != undefined && element.files[0] != undefined && element.files[0].size != undefined) {
            var filesize = parseInt(element.files[0].size);

            return filesize <= maxBytes;
        }

        return true;
    });
}(jQuery));

حال فقط کافی است که در Model و یا ViewModel خود ویژگی [ ()FileSize ] را به پراپرتی فایل که از نوع HttpPostedFileBase است  اضافه نمایید توجه داشته باشید که اتربیت FileSize ماکسیمم اندازه فایل را بر حسب بایت به عنوان پارامتر ورودی می پذیرد و درصورتی که اندازه فایل آپلود شده از اندازه ماکسیسم بیشتر بود  یک پیام خطا به کاربر نمایش می شود .

کدهای مربوط به ViewModel

  public class MyViewModel
  {  
        [FileSizeAttribute(1048576)] // Bytes ورودی اتربیت ماکسیسم سایز فایل بر حسب   
        public HttpPostedFileBase Photo { get; set; }
  }

حال یک View ایجاد نموده و کدهای زیر را در آن بنویسید و سپس پروژه خود را اجرا نمایید. توجه داشته باشید که حتما باید فایل  FileSize.js را در View فراخوانی کنید.

کدهای مربوط به View

@{
    ViewBag.Title = "Home Page";
}

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.TextBoxFor(m => m.Photo, new { type = "file" })
    @Html.ValidationMessageFor(m => m.Photo,null, new { id = "validationTxt" })
    <input type="submit" value="upload" />
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/FileSize.js")
}

این جلسه آموزشی هم به پایان رسید امیدوارم که مطالب مطرح شده در این مقاله آموزشی برای شما عزیزان مفید واقع شده باشد درصورتی در اتباط با این مقاله و سایر مقالات ASP.NET MVC سوالی داشتید حتما در نظرات میزفا مطرح کنید.