اعتبار سنجی فایل آپلود شده با استفاده از Regular Expression در Java Script و JQuery

شنبه 1 فروردین 1394

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

اعتبار سنجی فایل آپلود شده با استفاده از Regular Expression در Java Script و JQuery

اعتبار سنجی پسوند فایل و نمایش پیغام خطا در صورت معتبر نبودن فایل آپلود شده توسط کاربر با استفاده از دستورات 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>

 

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید