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

Материал из Umicms
Перейти к:навигация, поиск

Актуально для версии 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>.