Проблема, пытаясь сортировать изображения в алфавитном порядке с помощью имени файла, которые были загружены в DIV через ⇐ Javascript

[Anonymous]

Я пытаюсь загрузить изображения в HTML -документ, используя API считывателя файлов, а затем сортирую их в алфавитном порядке. Код, который я написал, загружает изображения в Div просто хорошо, однако он не сортирует изображения в алфавитном порядке, вместо этого он загружает их в документ, казалось бы, случайно. Я пытался использовать следующий код для сортировки изображений, но безрезультатно: files.sort ((a, b) => amem.localecompare (b.name)); < /code> оценит любую помощь, которую вы можете предоставить. PrettyPrint-Override ">

Код: Выделить всё

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);
}
});
});< /code>
#imageContainer {
display: flex;
flex-wrap: wrap;
gap: 10px;
border: 1px solid #ccc;
padding: 10px;
min-height: 100px;
}
#imageContainer img {
width: 150px;
height: auto;
}< /code>

Import Images

написал вышеуказанный код, ожидая, что изображения будут загружены в Div ImageContainer в алфавитном порядке, вместо этого они, кажется, загружаются в случайном порядке.

Подробнее здесь: https://stackoverflow.com/questions/797 ... een-loaded