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

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

 

 

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

2 نظر

2 پاسخ

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=