FileReader加载图片后无法按文件名排序问题求助

我尝试使用FileReader API将图片加载到HTML文档中，并按文件名字母顺序排序。当前代码可正常将图片加载至指定div，但图片并未按预期的字母顺序排列，而是呈现随机顺序。我已尝试使用代码files.sort((a, b) => a.name.localeCompare(b.name));进行排序，但没有效果。

原代码 #

HTML

<input type="file" id="imageInput" accept="image/*" multiple style="display: none;">
<button id="loadImageButton">Import Images</button>
<div id="imageContainer"></div>

CSS

#imageContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 100px;
}
#imageContainer img {
    width: 150px;
    height: auto;
}

JavaScript

document.getElementById('loadImageButton').addEventListener('click', () => {
    document.getElementById('imageInput').click(); 
});

document.getElementById('imageInput').addEventListener('change', (event) => {
    let files = Array.from(event.target.files);
    const imageContainer = document.getElementById('imageContainer');
    imageContainer.innerHTML = '';
    
    console.log('Before Sort: ', files);
    
  // Sort files alphabetically by name
    files.sort((a, b) => a.name.localeCompare(b.name));
    
    
    console.log('After Sort: ', files);
    

    files.forEach(file => {
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();

            reader.onload = (e) => {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.alt = file.name; // Use file name as alt text
                imageContainer.appendChild(img);
            console.log('Image as appended: ', img);
            };

            reader.readAsDataURL(file);
        }
    });
});

问题原因 #

你对文件数组的排序逻辑是正确的，但FileReader的onload是异步回调——当你遍历排序后的文件数组启动读取操作时，每个文件的读取速度取决于文件大小、浏览器处理速度等因素，谁先读取完成，对应的onload就会先执行，先把图片插入容器，最终导致显示顺序和排序后的数组顺序不一致。

解决方案 #

提供两种可靠的解决思路：

方案1：用Promise.all等待所有图片读取完成，按排序顺序插入

把每个文件的读取操作包装成Promise，等待所有Promise完成后，再按排序后的顺序将图片插入容器。

修改后的JavaScript代码：

document.getElementById('loadImageButton').addEventListener('click', () => {
    document.getElementById('imageInput').click(); 
});

document.getElementById('imageInput').addEventListener('change', async (event) => {
    let files = Array.from(event.target.files);
    const imageContainer = document.getElementById('imageContainer');
    imageContainer.innerHTML = '';
    
    // 按文件名排序
    files.sort((a, b) => a.name.localeCompare(b.name));
    
    // 将每个文件的读取操作包装为Promise
    const imagePromises = files.map(file => {
        if (!file.type.startsWith('image/')) return Promise.resolve(null);
        
        return new Promise((resolve) => {
            const reader = new FileReader();
            reader.onload = (e) => {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.alt = file.name;
                resolve(img);
            };
            reader.readAsDataURL(file);
        });
    });
    
    // 等待所有图片读取完成
    const images = await Promise.all(imagePromises);
    
    // 按排序后的顺序插入容器
    images.forEach(img => {
        if (img) imageContainer.appendChild(img);
    });
});

方案2：先按排序顺序插入空img元素，再设置src

先创建所有img元素并按排序后的顺序插入容器，再逐个设置src属性。这样容器里的元素顺序已经是正确的，图片加载完成后会直接显示在对应的位置。

修改后的JavaScript代码：

document.getElementById('loadImageButton').addEventListener('click', () => {
    document.getElementById('imageInput').click(); 
});

document.getElementById('imageInput').addEventListener('change', (event) => {
    let files = Array.from(event.target.files);
    const imageContainer = document.getElementById('imageContainer');
    imageContainer.innerHTML = '';
    
    // 按文件名排序
    files.sort((a, b) => a.name.localeCompare(b.name));
    
    files.forEach(file => {
        if (file.type.startsWith('image/')) {
            // 先创建img元素并插入容器（此时顺序是排序后的）
            const img = document.createElement('img');
            img.alt = file.name;
            imageContainer.appendChild(img);
            
            // 再读取文件设置src
            const reader = new FileReader();
            reader.onload = (e) => {
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
});

说明：方案2无需等待所有图片加载完成，图片会陆续显示但位置始终保持排序后的顺序；方案1会等所有图片加载完再一次性展示，适合需要统一呈现的场景。

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