آموزش طراحی سایتنکات و ترفندهای Asp.Net MVC

اعتبارسنجی اندازه فایل در سمت کلاینت در 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 سوالی داشتید حتما در نظرات میزفا مطرح کنید.

 

 

برچسب ها

آرزو ابراهیمی

بیش از 4 سال است که زمینه طراحی و توسعه سایت فعالیت می‌کنم، طراح و برنامه نویس انواع سامانه‌های تخصصی پزشکی، مناقصات، فروشگاهی و ... بودم و هستم و هدفم در سایت میزفا ارائه اطلاعات بروز و ناب در زمینه طراحی سایت است. تا از این طریق بتونم تجربیات و دانسته های خودم را با تمامی علاقمندان به مباحث طراحی سایت به اشتراک بزارم .

نوشته های مشابه

‫2 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. سلام
    اگر دکمه ثبت ما داخل usingبه دلایلی نباشه اعتبار سنجشی را چگونه انجام دهیم

    1. سلام … منظورتون از داخل using رو متوجه نشدم … اگر منظورتون خارج از تگ Form هست می تونید با استفاده از جی کوئری اعتبارسنجی رو انجام بدید و اگر اطلاعات فرم Valid بود فرم رو Submit کنید.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر