根据文件扩展名显示文件图标

Question

我正在制作一个上传文件的表格：文件名、名称、扩展名（使用PHP并连接到MS SQL Server）。

我想为每个文件添加一个图标，根据它们的扩展名。我认为有三种方法可以实现这一点：

1.最佳方案-以某种方式加载用户默认图标，并将其与我的文件连接起来。 2.较好方案-从某个网页列表中加载图标，并将其与我的文件连接起来。 3.较差方案-将一些图标放入我的文件夹中，并从该文件中加载它们。

我知道如何执行第三个选项，但我不能只搜索10个图标，因为总会有一个扩展名不在我的文件夹中（例如，JPEG与JPG不同）。

请告诉我如何执行比第三个选项更好的解决方案？它可以是PHP或JS / jQuery，都没有关系。

- Koshi

---

由于现在许多网站设计都非常简约，另一种方法是使用一个简约的SVG来代表一个通用文件，然后使用CSS在其上方以伪元素的形式写入最多4个字符的扩展名，以任何你想要的样式。已知的扩展名可以按颜色分类，而未知的扩展名可以使用默认颜色。这将是一个完整的解决方案，适用于任何和所有的扩展名，无论是已知还是未知，而不需要为它们中的任何一个设计特定的图标。 - undefined

Answer 1

您需要使用默认图标来处理未知类型的文件。

例如，您可以在表格中显示文件。

HTML

<tr>
<td class="fm fm_file">
<a  target="_blank" href="./download.php?f=something">yourfile.jpg</a>
</td>
</tr>

以下是我代码的一部分，实现了这个功能（作为一个更大的库的一部分）

PHP

if ($handle = opendir($directory)) {
            while (false !== ($entry = readdir($handle))) {
                if ($entry != "." && $entry != "..") {
                    if (!is_dir($directory . DIRECTORY_SEPARATOR . $entry)) {
                        $md = rand(0, 9) . substr(md5('download' . $entry), 1, 10) . rand(1000, 9999);
                        $dlink = '<a  target="_blank" href="./download.php?f=' . $entry . '&c=' . $md . '" >' . $entry . '</a>';
                        $editlink='';
                        $a=explode('.', $entry);

                        if(in_array(strtolower(array_pop($a)),array('ini','txt','xml','bin','sql')))
                        $editlink='<a  href="filemanager-edit?dir=' . $subdir.'&f=' . $entry . '&c=' . $md . '" >' . $ledit . '</a>';
                        $filelist.='<tr>' . '<td class="fm fm_file">' . $dlink . '</td>' . '<td class="edit">'.$editlink.'</td>' . '<td class="delete"><a  href="filemanager?action=delete&dir=' . $subdir.'&f=' . $entry . '&c=' . $md . '" >' . $ldelete . '</a></td>' . '</tr>';
                    } else
                        $filelist.='<tr>' . '<td class="fm ft_folder"><a  href="filemanager?action=view&dir=' . $subdir . $entry . '&c=' . md5($entry) . '" >' . $entry . '</a></td>' . '<td class="edit"></td>' . '<td class="edit"><a  href="filemanager?action=view&dir=' . $subdir . $entry . '&c=' . md5($entry) . '" >' . $lchoose . '</a></td>' . '</tr>';
                }
            }
            closedir($handle);
        }

需要使用JavaScript来分配图标。

JavaScript

$('.fm_file').each(function(){
       var name=$(this).find('a').html().split('.').pop();
     $(this).addClass('ft_'+name);
   });

快捷方式指向CSS中的图标文件

CSS

.fm_file{
    background-image:url(../../images/filemanager/page_white.png);
}

.ft_folder{
    background-image:url(../../images/filemanager/folder.png);
}

.ft_pdf{
    background-image:url(../../images/filemanager/page_white_acrobat.png);
}

.ft_cs{
    background-image:url(../../images/filemanager/page_white_csharp.png);
}

.ft_xls{
    background-image:url(../../images/filemanager/page_white_excel.png);
}

.ft_php{
    background-image:url(../../images/filemanager/page_white_php.png);
}
.ft_dll{
    background-image:url(../../images/filemanager/page_white_dll.png);
}
.ft_exe,.ft_msi{
    background-image:url(../../images/filemanager/page_white_exe.png);
}
.ft_db,.ft_sql{
    background-image:url(../../images/filemanager/page_white_db.png);
}
.ft_png,
.ft_jpg,
.ft_bmp,
.ft_gif{
    background-image:url(../../images/filemanager/page_white_picture.png);
}

.ft_txt,
.ft_js,
.ft_ini,
.ft_bat,
.ft_css{
    background-image:url(../../images/filemanager/page_white_text.png);
}

.ft_htm,
.ft_xml,
.ft_html{
    background-image:url(../../images/filemanager/page_white_code.png);
}

.ft_rar,
.ft_zip{
    background-image:url(../../images/filemanager/page_white_compressed.png);
}

结果：

如果使用未知类型，则使用类fm_file的图像。 你可以随时准备一组图标。

- Darek MST

Answer 2

很遗憾，我认为没有简单的方法可以解决这个问题，选项3是唯一真正可行的解决方案。

我使用了类似于@MayankPandeyz的解决方案，但是使用FontAwesome作为我们的图标库，并使用switch语句来选择文件扩展名。我发现switch更易于阅读和维护。

PHP

function getFileType(string $url):string{
    $filename=explode('.',$url);
    $extension=end($filename);

    switch($extension){
        case 'pdf':
            $type=$extension;
            break;
        case 'docx':
        case 'doc':
            $type='word';
            break;
        case 'xls':
        case 'xlsx':
            $type='excel';
            break;
        case 'mp3':
        case 'ogg':
        case 'wav':
            $type='audio';
            break;
        case 'mp4':
        case 'mov':
            $type='video';
            break;
        case 'zip':
        case '7z':
        case 'rar':
            $type='archive';
            break;
        case 'jpg':
        case 'jpeg':
        case 'png':
            $type='image';
            break;
        default:
            $type='alt';
    }

    return $type;
}

HTML

<?php $url='http://example.com/downloads/file.pdf'; ?>
<div class="card blogLink-bottom download-wrapper">
    <div class="card-img-top img-fluid"> <i class="fas fa-file-<?php echo getFileType($url); ?>"></i></div>
    <div class="card-body blue-bg">
        <h4 class="card-title bold"><?php the_title(); ?></h4>
        <a href="<?php echo $url; ?>" class="btn btn-primary" download><span>Download</span></a>
    </div>
</div>

这是我们输出的一个示例：

- Burgi

Answer 3

尝试像这样做一些事情：

if(ext == 'jpg' || ext == 'jpeg')
{
    $image_name = 'image.jpg';  
}
if(ext == 'doc' || ext == 'docx')
{
    $image_name = 'doc.jpg';    
}

并为未知图标添加一个else条件

- Mayank Pandeyz

---

这样做需要太多的扩展，所以我认为第三个解决方案是不好的解决方案:/ - Koshi

Answer 4

既然您已经在数据库表中拥有了扩展名，下一个合乎逻辑的步骤是将所有常见文件扩展名加载到数组中，并附带适当图标的引用。

然后使用in_array测试扩展名并加载正确的图标。

您可以获得许多不同风格的文件类型图标集。

- Trialsman