Set icon and display file name depending on file extension

Question

Ultimamento I’ve been fiddling with uploads of files, view them with PHP and etc... and came to me a question the head, I searched but I did not find something right.

How close I can get to making a preview of files or even play with the css on it, putting an image and the file name?

But depending on the extent of it, if the extension is DOCX displays a word icon and underneath the file name, etc....

Is there a library for this or some script?

The preview that I would like is this (gmail): obviously can be others too...

I’m already displaying my files normally, just want to put one preview in the display of each file...

How I display:

<?php

require('conexaobd.php');

$sql = "SELECT relatorio.*, pacientes.nome, pacientes.data_saida FROM relatorio,pacientes WHERE relatorio.paciente=pacientes.nome";

$resultado = mysqli_query($link, $sql);

$inc = 0;


while ($cont = mysqli_fetch_array($resultado)) {

    echo '
        <tr>



echo $cont['relatorio_educacao_fisica'] != "" ? "<td><a href='ver-arquivo.php?documento=uploads/uploadsed/{$cont['relatorio_educacao_fisica']}' title='{$cont['relatorio_educacao_fisica']}' target='_blank'><img src='images/icon/bola.png' style='width:40px; height:40px;cursor:pointer;'></a></td>" : "<td></td>";


echo $cont['relatorio_enfermagem'] != "" ? "<td><a href='ver-arquivo.php?documento=uploads/uploadsenf/{$cont['relatorio_enfermagem']}' title='{$cont['relatorio_enfermagem']}' target='_blank'><img src='images/icon/enf.png' style='width:40px; height:40px;cursor:pointer;'></a></td>" : "<td></td>";

';

?>          

Answer 1

This example I made with src and images (.jpg and .gif), but you can adapt to href and the extent you need (.doc and .pdf)

Here is an example, if the tag img has in src an image that ends with .gif or .jpg at the end of the picture she exibe a different icon in the tag <i>

img {
  width: 50px;
  height: auto;
}

[src*=".jpg"] + .jpg,
[src*=".gif"] + .gif {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-image: url(https://www.zamzar.com/images/filetypes/jpg.png);
}

[src*=".gif"] + .gif {
  background-image: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698352-icon-130-document-file-gif-512.png);
}


  

<img src="https://t2.uc.ltmcdn.com/pt/images/4/5/8/img_diferenca_entre_jpg_e_jpeg_8854_600_square.jpg"> <i class="jpg gif"></i>

<br>

<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Madeiraflag.gif"> <i class="jpg gif"></i>