<table class="files-table table">
                <thead>
                    <th>Filename</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th onclick="sortTableByDate()">
                        Date
                        <i
                            class="fa-solid fa-angle-down"
                            ,
                            style="
                                font-size: 12px;
                                color: white;
                                height: 0;
                                margin-top: 0 !important;
                            "
                        ></i>
                    </th>
                    <th></th>
                </thead>
                <tbody></tbody>
            </table>
            <div class="add-table-row d-flex justify-content-end">
                <label for="tableFiles" class="choose-file-btn">
                    <span>Add Files</span>
                </label>
                <input
                    type="file"
                    id="tableFiles"
                    style="display: none"
                    multiple
                    onchange="handleFiles(this.files)"
                />
            </div>

字符串
我在这里创建了一个表格，并在添加文件按钮的帮助下打印了相关的信息。

<script>
    function handleFiles(files) {
        const tbody = document.querySelector(".files-table tbody");

        for (const file of files) {
            const fileName = file.name;

            const isDuplicate = Array.from(tbody.rows).some(
                (row) => row.cells[0].textContent === fileName
            );

            if (!isDuplicate) {
                const row = tbody.insertRow();
                const filenameCell = row.insertCell(0);
                const typeCell = row.insertCell(1);
                const statusCell = row.insertCell(2);
                const dateCell = row.insertCell(3);
                const deleteCell = row.insertCell(4);

                filenameCell.textContent = fileName;
                typeCell.textContent = getFileType(file.type);
                statusCell.textContent = "Pending";

                const currentDate = new Date();
                const formattedDate = currentDate.toISOString().split("T")[0];
                dateCell.textContent = formattedDate; // Only the date

                // Add delete icon to the last cell
                const deleteIcon = document.createElement("i");
                deleteIcon.className = "fa-regular fa-trash-can";
                deleteIcon.style.color = "#d90000";
                deleteIcon.addEventListener("click", function () {
                    deleteRow(this);
                });
                deleteCell.appendChild(deleteIcon);
            }
        }

        checkIconVisibility();
    }

    function getFileType(fileType) {
        return fileType || "Unknown Type";
    }

    function handleDragOver(event) {
        event.preventDefault();
        const dragContainer = document.getElementById("drag-drop-container");
    }

    function handleDrop(event) {
        event.preventDefault();
        const dragContainer = document.getElementById("drag-drop-container");

        const files = event.dataTransfer.files;
        handleFiles(files);
    }

    function deleteRow(icon) {
        const row = icon.closest("tr");
        row.parentNode.removeChild(row);
        checkIconVisibility();
    }
</script>

型
使用这个脚本，我在文件名下添加了所选文件的名称，在日期下添加了上传日期，在类型下添加了文件类型。我在创建的表行的末尾添加了一个删除图标。
所有功能都正常，但有一个问题，比如我上传了一个名为x.png的文件，然后删除了，就不能再加载x.png了，如果我上传了一个名为z.png的文件，那么我就可以上传x.png了，为什么我不能直接上传我删除的文件呢？我不能重新添加上次删除的文件。