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

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

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

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>

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