php获取到服务器的文件列表并且将名字不包括文件扩展名以html的列表输出输出的html列表用css美化成卡片而卡片的最左边是输出的文件名称不包括文件扩展名最右边是一个删除按钮删除按钮可以删除该文件

以下是一个实现该功能的示例代码：

<?php
// 获取文件列表
$files = glob("*");

// 输出 HTML 列表
echo '<ul class="file-list">';
foreach ($files as $file) {
    // 获取文件名（不包括扩展名）
    $filename = pathinfo($file, PATHINFO_FILENAME);

    // 输出 HTML 卡片
    echo '<li class="file-card">';
    echo '<span class="filename">' . $filename . '</span>';
    echo '<button class="delete-button" onclick="deleteFile(\'' . $file . '\')">删除</button>';
    echo '</li>';
}
echo '</ul>';
?>

<style>
/* CSS 样式 */
.file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.file-card {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filename {
    font-size: 18px;
    font-weight: bold;
}

.delete-button {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}
</style>

<script>
// JavaScript 代码
function deleteFile(filename) {
    // 发送 AJAX 请求删除文件
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'delete.php');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        // 删除成功后移除该卡片
        if (xhr.status === 200 && xhr.responseText === 'success') {
            var card = document.querySelector('.file-card span.filename[title="' + filename + '"]').parentNode;
            card.parentNode.removeChild(card);
        }
    };
    xhr.send('filename=' + encodeURIComponent(filename));
}
</script>

需要注意的几点：

• 该代码中使用了 glob 函数获取当前目录下的文件列表，如果需要获取其他目录的文件列表可以修改参数；
• 为了安全考虑，删除文件的操作需要通过 AJAX 请求发送到后端 PHP 脚本来执行，这里使用了 XMLHttpRequest 实现；
• 在删除文件时，需要注意文件名中可能包含特殊字符，需要使用 encodeURIComponent 函数进行编码；
• 在删除成功后，需要通过 JavaScript 移除对应的 HTML 卡片，这里使用了 querySelector 和 parentNode 函数来查找和删除对应的卡片。