Ограничение типов отправляемых файлов средствами JQuery

Актуально для версии 2.9.5

Если мы хотим задать список типов файлов, которые можно отправлять через форму обратной связи пользователям, то это можно сделать несколькими путями. В данной статье мы рассмотрим реализацию данного функционала с помощью JQuery.

Код можно расположить в новом файле, назовем его checkfile.js. В самом файле необходимо написать следующее -

$(document).ready(function() {

    $('.sendForm').click(function() {
        var extension = $('#download_file').val().trim().split(".").pop();
        var allowedFileTypes = [  "doc", "docx", "xls", "xlsx", "ppt", "pptx", "pps", "ppsx", "odt", "sxw", "ods", "odg", "pdf", 
"csv", "html", "js", "tpl", "xsl", "xml", "css", "zip", "rar", "7z", "tar", "gz", "exe", "msi", "rtf", "chm", "ico", "psd", 
"flv", "mp4", "swf", "mp3", "wav", "wma", "ogg", "aac", "jpg", "jpeg", "gif", "bmp", "png" ];
        if (extension == null || extension == "") {
            return
        } else {
            if ($.inArray( extension, allowedFileTypes ) >= 0) {
                return;
            }
            alert("Запрещено загружать файлы с расширением ." + extension);
            $('#our_form').removeAttr('action');
        }
    });       
});

В переменную allowedFileTypes мы передаем типы файлов, которые пользователю могут посылать через обратную связь.

Чтобы подключить этот файл, необходимо в шаблоне, который у Вас отвечает за вывод формы обратной связи, прописать следующий код:

<script type="text/javascript" charset="utf-8" src="/путь_до_вашего_файла/checkfile.js"></script>

Теперь осталось только добавить класс sendForm на кнопку отправки сообщения, id download_file на input type="file" и id our_form на тег <form>.