با عرض سلام خدمت تمامی دوستداران مباحث آموزشی طراحی سایت ، با یکی دیگر از مقالات آموزشی 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 سوالی داشتید حتما در نظرات میزفا مطرح کنید.
2 پاسخ
سلام
اگر دکمه ثبت ما داخل usingبه دلایلی نباشه اعتبار سنجشی را چگونه انجام دهیم
سلام … منظورتون از داخل using رو متوجه نشدم … اگر منظورتون خارج از تگ Form هست می تونید با استفاده از جی کوئری اعتبارسنجی رو انجام بدید و اگر اطلاعات فرم Valid بود فرم رو Submit کنید.