文件上传，允许用户选择多个文件并显示已选择文件的信息，同时提供删除文件的功能创建一个包含文件上传功能的页面，允许用户选择

创建一个包含文件上传功能的页面，允许用户选择多个文件，并在页面上显示已选择文件的信息。用户还可以通过点击删除按钮来删除已选择的文件。最终，用户可以点击"上传"按钮以完成文件上传操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <th:block th:include="include :: header('上传文件')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <style>
        #fileText {
            position: absolute;
            left: 110px;
            top: 25px;
            width: 200px;
            height: 24px;
            z-index: 1;
            background: #fff;
        }
    </style>
</head>
<body>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<div>
    <label>上传附件</label>
    <input onclick="upload()">
</div>
<!-- S 上传文件模态框 -->
<div class="modal inmodal fade" id="uploadDiv" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3>上传文件</h3>
            </div>
            <div class="modal-body">
                <form id="uploadForm" class="form-control">
                    <input id="mutipleFile" name="files" type="file" multiple accept="image/*,application/pdf">
                    <span id="fileText"></span>
                    <div class="col-sm-12" id="fileNameDiv"></div>
                </form>
            </div>
            <div class="modal-footer">
                <a class="btn btn-default" onclick="closeUpload()">关闭</a>
                <a class="btn btn-primary" onclick="uploadHandler()">上传</a>
            </div>
        </div>
    </div>
</div>
<!-- E 上传文件模态框 -->

<script>
    function upload(){
        $("#uploadDiv").modal('show');
    }

    var updatedFiles = []
    $("#fileText").text('未选择任何文件');
    $("#mutipleFile").on('change',function (){
        // 将新选择的文件追加到已更新的文件列表
        updatedFiles = updatedFiles.concat(Array.from($("#mutipleFile")[0].files));
        var files = updatedFiles;
        // 清空文件名显示区域
        $("#fileNameDiv").empty();

        // 已选文件数量统计
        function lengthCount(){
            if (updatedFiles.length === 0){
                $("#fileText").text('未选择任何文件');
            }else{
                $("#fileText").text('已选择'+updatedFiles.length+'个文件');
            }
        }
        lengthCount();

        // 遍历文件列表，为每个文件创建显示元素
        for(var i =0 ;i < files.length; i++){
            var file = files[i];
            var fileName = file.name;

            // 创建文件项元素
            var fileItem = $(`<div class="file-item${i}"></div>`);
            // 创建文件名链接元素，包含索引、文件名和删除按钮
            var fileNameLink = $(`<a data-index="${i}">${fileName} &nbsp;&times;</a>`);

            // 为文件名链接添加点击事件监听器，用于删除对应的文件
            fileNameLink.on('click',function(){
                var index = $(this).data("index");
                var list = $("#fileNameDiv div");
                var selectedIndex = -1;
                var selector = "file-item" + index;

                // 查找要删除的文件在列表中的索引
                for(var i = 0;i < list.length;i++){
                    if(list[i].className == selector){
                        selectedIndex = i;
                        break;
                    }
                }

                // 从更新的文件列表中删除文件
                updatedFiles.splice(selectedIndex,1);
                // 从显示区域中删除文件名元素
                $(this).parent().remove();
                lengthCount();
            })
            // 将文件名链接添加到文件项中
            fileItem.append(fileNameLink);
            // 将文件项添加到文件名显示区域
            $("#fileNameDiv").append(fileItem);
        }
    })
    
    function uploadHandler() {
        console.log('上传');
        // 上传逻辑...
    }

    function closeUpload(){
        $.form.reset("uploadForm");
        $("#fileNameDiv").text('')
        $("#fileText").text('未选择任何文件')
        updatedFiles = []
        $("#uploadDiv").modal("hide")
    }
</script>
</body>
</html>