不搭配CKEditor使用CKFinder上传多图无法获取全部URL如何修改代码

解决方案 #

你已经定位到问题根源是仅调用first()方法获取了首个选中文件。evt.data.files是CKFinder提供的文件集合对象，支持forEach方法遍历所有选中文件，你可以通过遍历操作把所有文件URL存入数组，修改后的代码如下：

window.CKFinder = {
        _popupOptions: {
            'popup-1-config': { // 第一个弹窗的配置ID
                chooseFiles: true,
                onInit: function( finder ) {
                    finder.on( 'files:choose', function( evt ) {
                        var selectedFiles = evt.data.files;
                        var selectedUrls = []; // 存储所有选中文件URL的数组
                        var output = document.getElementById( 'output' );
                        var outputHtml = '弹窗1选中的文件：<br>';

                        // 遍历所有选中文件
                        selectedFiles.forEach(function(file) {
                            // 将文件URL存入数组
                            selectedUrls.push(file.getUrl());
                            // 拼接页面展示内容，可根据需求调整
                            outputHtml += `文件名：${file.get('name')}<br>URL：<img src="${file.getUrl()}" style="max-width: 200px; margin: 8px 0;"><br>`;
                        });

                        output.innerHTML = outputHtml;
                        // 后续可直接使用selectedUrls数组完成表单赋值等业务逻辑
                        console.log('所有选中文件URL数组：', selectedUrls);
                    } );
                }
            },
            
        }
    };

    var popupWindowOptions = [
        'location=no',
        'menubar=no',
        'toolbar=no',
        'dependent=yes',
        'minimizable=no',
        'modal=yes',
        'alwaysRaised=yes',
        'resizable=yes',
        'scrollbars=yes',
        'width=800',
        'height=600'
    ].join( ',' );

    document.getElementById( 'popup-1-button' ).onclick = function() {
        // 注意配置ID通过configId参数传递
        window.open( 'http://foxhills.localhost/admin/ckfinder/ckfinder.html?popup=1&amp;configId=popup-1-config', 'CKFinderPopup1', popupWindowOptions );
    };

如果不需要在页面展示选中文件，只保留数组存储逻辑即可。

内容的提问来源于stack exchange，提问作者user2468312