ExtJS FileField多选文件时无法按选择顺序返回文件列表的解决方法

核心问题在于部分浏览器会自动对<input type="file" multiple>的文件列表按文件名排序，而非保留用户选择的原始顺序，ExtJS的filefield默认取值逻辑会沿用这个排序后的结果。要获取选择顺序的文件列表，需直接操作原生文件输入框的事件：

修改后的代码实现 #

xtype: 'filefield',
id: 'figureFileUpload',
buttonText: 'Browse Files From Device',
handler: 'onBrowseFiles',
buttonOnly: true,
multiple: true,
height: 45,
listeners: {
    render: function (me, eOpts) {
        const fileInput = me.fileInputEl.dom;
        fileInput.multiple = true;

        // 绑定原生change事件捕获原始选择顺序的文件列表
        fileInput.addEventListener('change', function(e) {
            // 将FileList转为数组，方便后续处理
            const selectedFiles = Array.from(e.target.files);
            // 获取按选择顺序排列的文件名列表
            const orderedFileNames = selectedFiles.map(file => file.name);
            
            // 将原始文件数组存储到组件自定义属性，供其他逻辑调用
            me.orderedSelectedFiles = selectedFiles;
            console.log('按选择顺序排列的文件名:', orderedFileNames);

            // 可触发自定义事件，通知业务逻辑处理
            me.fireEvent('orderedfileschange', me, selectedFiles);
        });
    },
    change: function(me, value) {
        // 放弃使用默认的value（已被浏览器排序），改用自定义属性中的文件数组
        if (me.orderedSelectedFiles) {
            const orderedNames = me.orderedSelectedFiles.map(f => f.name);
            // 这里加入你的业务处理逻辑
        }
    }
}

关键说明 #

• 直接操作原生元素：使用me.fileInputEl.dom获取组件对应的原生文件输入框，比通过document.getElementById更可靠，避免组件ID变化导致的问题。
• 原生事件捕获：通过原生change事件的e.target.files获取的FileList，在现代主流浏览器（Chrome、Firefox、Edge）中会严格保留用户选择文件的顺序，不会自动排序。
• 兼容处理：如果需要兼容IE11等旧浏览器，将Array.from(e.target.files)替换为[].slice.call(e.target.files)即可。
• 自定义属性与事件：将原始文件数组存储到组件的自定义属性中，或触发自定义事件，方便其他业务逻辑获取按选择顺序排列的文件数据。

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