使用FileReader JS实现Bootstrap结构自定义图片预览遇阻

Hey there! I see exactly what's going on here—your issue boils down to the asynchronous nature of the FileReader API. Let me explain why that array is behaving weirdly and show you how to fix it to get your desired Bootstrap preview structure.

Why Your Array Isn't Working #

When you loop through the files and call readAsDataURL, each file read operation runs in the background (asynchronously). Your console.log lines execute right after the loop finishes—before any of the reader.onload callbacks have actually fired. That's why imagesArray.length shows 0 initially! The console's "live" array preview makes it look like the elements are there later, but by the time you check the length or try to access elements, the async operations haven't completed yet.

Solution 1: Render DOM Directly in onload (Simpler) #

Instead of trying to collect all image data first, you can build your Bootstrap structure as each file finishes loading. This avoids dealing with async array issues entirely:

$(document).on("change", "#file", function() {
    const files = $(this)[0].files;
    const imgPreview = $("#img-preview");
    
    // Clear existing preview to avoid duplicates
    imgPreview.empty();

    if (files.length === 0) return;

    // Handle the first image (large preview)
    const firstReader = new FileReader();
    firstReader.onload = function(e) {
        const largePreview = `
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="wraper-foto-grande d-flex justify-content-center">
                            <img class="img-fluid d-flex align-items-center" src="${e.target.result}">
                        </div>
                    </div>
                </div>
            </div>
        `;
        imgPreview.append(largePreview);

        // Handle remaining images (thumbnails)
        if (files.length > 1) {
            const thumbContainer = $('<div class="container"><div class="row"></div></div>');
            const thumbRow = thumbContainer.find('.row');

            for (let i = 1; i < files.length; i++) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const thumbnailCol = `
                        <div class="col-md-4">
                            <div class="wrapper-thumb d-flex justify-content-center">
                                <img class="img-fluid d-flex align-items-center" src="${e.target.result}">
                            </div>
                        </div>
                    `;
                    thumbRow.append(thumbnailCol);
                };
                reader.readAsDataURL(files[i]);
            }

            imgPreview.append(thumbContainer);
        }
    };
    firstReader.readAsDataURL(files[0]);
});

Solution 2: Use Promise.all to Collect All Images First (Cleaner) #

If you prefer to gather all image data before rendering, wrap each FileReader operation in a Promise and use Promise.all to wait for all reads to complete:

$(document).on("change", "#file", function() {
    const files = $(this)[0].files;
    const imgPreview = $("#img-preview");
    
    imgPreview.empty();
    if (files.length === 0) return;

    // Convert each FileReader to a Promise
    const fileReadPromises = Array.from(files).map(file => {
        return new Promise((resolve) => {
            const reader = new FileReader();
            reader.onload = (e) => resolve(e.target.result);
            reader.readAsDataURL(file);
        });
    });

    // Wait for all files to finish reading
    Promise.all(fileReadPromises).then(imagesArray => {
        // Now imagesArray is fully populated!
        console.log(imagesArray.length); // Shows correct count

        // Build large preview (first image)
        const largePreview = `
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="wraper-foto-grande d-flex justify-content-center">
                            <img class="img-fluid d-flex align-items-center" src="${imagesArray[0]}">
                        </div>
                    </div>
                </div>
            </div>
        `;
        imgPreview.append(largePreview);

        // Build thumbnails (remaining images)
        if (imagesArray.length > 1) {
            const thumbRow = $('<div class="row"></div>');
            imagesArray.slice(1).forEach(src => {
                const thumbnailCol = `
                    <div class="col-md-4">
                        <div class="wrapper-thumb d-flex justify-content-center">
                            <img class="img-fluid d-flex align-items-center" src="${src}">
                        </div>
                    </div>
                `;
                thumbRow.append(thumbnailCol);
            });
            imgPreview.append(`<div class="container">${thumbRow.prop('outerHTML')}</div>`);
        }
    });
});

Both approaches will generate the exact Bootstrap structure you need. The first method renders images as they load, while the second waits until all images are ready before building the entire preview.

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