Сайк Павел

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

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

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

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

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

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

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

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

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