easyui 多文件选择框选择文件后，将文件显示在页面上。demo

news2024/9/9 0:37:45

EasyUI 的 filebox 默认是单文件选择，如果要实现多文件选择功能，可以通过原生的 HTML 文件输入元素来实现。同时，使用 jQuery 和 EasyUI 将多文件选择后的文件名显示在页面上。

以下是一个示例代码，展示如何使用 EasyUI 和 jQuery 实现多文件选择，并在选择文件后将文件名显示在页面上：

HTML 部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI Multiple Filebox - Show Selected Files</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.9.13/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui@1.9.13/themes/icon.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui@1.9.13/jquery.easyui.min.js"></script>
</head>
<body>
    <input id="filebox" type="file" multiple style="width:300px">
    <div id="selectedFiles" style="margin-top:20px;"></div>

    <script type="text/javascript">
        $(function(){
            // 监听文件输入框的变化事件
            $('#filebox').on('change', function(){
                var files = this.files;
                
                // 检查是否选择了文件
                if (files.length > 0) {
                    var fileList = $('<ul></ul>');
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        var listItem = $('<li></li>').text(file.name);
                        fileList.append(listItem);
                    }
                    $('#selectedFiles').html(fileList);
                } else {
                    $('#selectedFiles').html('No file selected.');
                }
            });
        });
    </script>
</body>
</html>

关键点解释：

file 输入元素：使用原生 HTML 文件输入元素，并添加 multiple 属性以允许选择多个文件。
change 事件：监听文件输入框的变化事件，当用户选择文件后触发。
获取文件列表：通过 this.files 获取选中的文件列表。
显示文件列表：创建一个新的 ul 元素，并遍历文件列表，将每个文件名添加为 li 元素并插入到 ul 中。最后将 ul 元素插入到页面上的 #selectedFiles 容器中。如果没有选中文件，则显示 "No file selected."。