• Главная  
• Вредные советы  
• Как определить тип файла с помощью Jquery

Как определить тип файла с помощью Jquery

Разберем на примере. Есть вот примерно такая HTML конструкция

<p>Пожалуйста, ознакомьтесь с <a href="/files/lenobl_delivery.pdf">тарифами</a>.</p>

Задача: надо определить тип файла с JQuery в ссылке, и подставить иконку, что бы визуально было понятно, что это за ссылка.

Используем для этого актуальную версию JQuery. Код довольно простой. Логика такова: перебираем все ссылки в блоке, и вставляем строчный элемент <i class="b_icons"></i> с необоходимым классом перед ссылкой.

$('.b_article-full a').each(function () {
    if (/.*\.pdf/.test($(this).attr('href'))) {
        $(this).before('<i class="b_icons pdf"></i> ');
    }
    if (/.*\.zip/.test($(this).attr('href'))) {
        $(this).before('<i class="b_icons zip"></i> ');
    }
    if (/.*\.doc/.test($(this).attr('href'))) {
        $(this).before('<i class="b_icons doc"></i> ');
    }
    if (/.*\.docx/.test($(this).attr('href'))) {
        $(this).before('<i class="b_icons doc"></i> ');
    }
});

Далее немного чудо SCSS кода:

.b_icons {
    display  : inline-block;
    width    : 16px;
    height   : 16px;
    position : relative;
    top      : 3px;
    &.pdf {
        background : url(путь к иконке)
    }
    &.doc {
        background : url(путь к иконке)
    }
    &.zip {
        background : url(путь к иконке)
    }
}

Вот так просто можно определить тип файла с JQuery в документе.