Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
3 г. назад

Как опредилить тип файла с помощью 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;
   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 в документе.

Добавить комментарий

Наверх