اعتبار سنجی پسوند فایل ها قبل از آپلود با استفاده از عبارات منظم در Jquery در Asp.net

در این مقاله میخواهیم زمانی که کاربر فایلی را انتخاب کرد با استفاده از عبارات منظم در jquery صحیح بودن فایل را بررسی کنیم

اعتبار سنجی پسوند فایل ها قبل از آپلود با استفاده از عبارات منظم در Jquery در Asp.net

پسوند فایل های انتخاب شده با استفاده از عبارا ت منظم بررسی میشود و در صورتی که فایل نامعتبر باشد پیام میدهد

چند نمونه از عبارا منظم به  شکل زیر میباشد:

1- برای فایل word و pdf:

([a-zA-Z0-9\s_\\.\-:])+(.doc|.docx|.pdf)$

2- برای تصویر:

([a-zA-Z0-9\s_\\.\-:])+(.png|.jpg|.gif)$

3-برای فایل های متنی :

([a-zA-Z0-9\s_\\.\-:])+(.txt)$

4-برای فایل های اکسل:

([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$

ابتدا یک پروژه از نوع وب فرم ایجاد کنید سپس روی نام پروژه در پنجره Solution Explorer  کلیک راست کرده و گزینه Add New Item  را انتخاب کنید و یک صفحه جدید به پروژه خود اضافه کنید در این صفحه نیاز به یک فایل آپلود و یک دکمه و یک تگ span برای نمایش پیام ها داریم  :

<form action="" method="post">
<input id="fileUpload" type="file" />
<br />
<span id="lblError" style="color: red;"></span>
<br />
<input type="submit" id="btnUpload" value="Upload" onclick="return ValidateExtension()" />
</form>

حالا نیاز به یک تابع داریم تا عمل اعتبار سنجی را انجام دهد و در صورت معتبر نبودن پیام دهد اسکریپت را هم به صورت دستورات جاوا و هم به صورت jquery گزاشته میشود:

 <script type="text/javascript">
    function ValidateExtension() {
        var allowedFiles = [".doc", ".docx", ".pdf"];
        var fileUpload = document.getElementById("fileUpload");
        var lblError = document.getElementById("lblError");
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
        if (!regex.test(fileUpload.value.toLowerCase())) {
            lblError.innerHTML = "Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.";
            return false;
        }
        lblError.innerHTML = "";
        return true;
    }
</script>

در jquery در رویداد کلیک body تابع خود را مینویسیم عناصر html مانند بالا استفاده میشود:


<form action="" method="post">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $("body").on("click", "#btnUpload", function () {
        var allowedFiles = [".doc", ".docx", ".pdf"];
        var fileUpload = $("#fileUpload");
        var lblError = $("#lblError");
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
        if (!regex.test(fileUpload.val().toLowerCase())) {
            lblError.html("Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.");
            return false;
        }
        lblError.html('');
        return true;
    });
</script>
<input id="fileUpload" type="file" />
<br />
<span id="lblError" style="color: red;"></span>
<br />
<input type="submit" id="btnUpload" value="Upload" />
</form>

حالا میتونید برنامه خود را اجرا کنید

فایل های ضمیمه