در این مقاله نحوه اعتبارسنجی فایل قبل از آپلود با استفاده از Regular Expression شرح داده میشود .

اعتبار سنجی پسوند فایل و نمایش پیغام خطا در صورت معتبر نبودن فایل آپلود شده توسط کاربر با استفاده از دستورات Regular Expression می توانیم کنترل مورد نظر را اعتبارسنجی کنیم :

Regular Expression برای فایل های  pdf و word Document :

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

Regular Expression برای تصاویر :

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

Regular Expression برای متن :

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

Regular Expression برای فایل Exel :

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

تگ های Html مربوط  که شامل یک کنترل FileUpload , span , و یک دکمه Submit میباشد را به صفحه اضافه می کنیم و زمانی که دکمه Submit کلیک شد یک آرایه توسط JavaScript ساخته میشود که مقدار کنترل FileUploader در آن قرار میگیرد و اعتبار سنجی میشود .مانند کد زیر :

<form action="" method="post">
<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>
<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 نیز به صورت زیر میباشد :

<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>