jQuery动态创建图片标签功能异常：多文件上传预览重复ID及onloadend执行问题修复咨询

Looks like you're hitting a classic closure issue with asynchronous code in loops! Here's what's going wrong and how to fix it:

The Root Problem #

Your for loop uses var index—since var has function-level scope, every iteration shares the same index variable. When the reader3.onloadend callback fires (which happens asynchronously after the file is read), the loop has already finished running, so index is stuck at input.files.length for all callbacks. That's why all your preview elements end up with the same (incorrect) ID, and it looks like the callback only runs once (it actually runs multiple times, but it's trying to target the same non-existent ID every time).

Quick Fix: Use let Instead of var #

Changing var index to let index in your loop creates a separate index variable for each iteration, so each callback captures the correct value for that file:

function readURL(input) { 
    if (input.files && input.files.length > 0) { 
        // Use let to get block-scoped index variable
        for (let index = 0; index < input.files.length; index++) { 
            const file = input.files[index]; 
            console.log(file); 
            if (!!file.type.match(/image.*/)) { 
                if (window.FileReader) { 
                    const reader3 = new FileReader(); 
                    reader3.onloadend = function (e) { 
                        $('#floor_plan_preview').append( 
                            `<div class="col-12 ubw-outer">
                                <div class="upload-btn-wrapper">
                                    <button class="btn" style="pointer-events: none;">
                                        <img src="" alt="">
                                    </button>
                                    <img alt="" id="preview${index}" class="preview">
                                </div>
                            </div>`
                        ); 
                        $('#preview' + index).attr('src', e.target.result); 
                    }; 
                    reader3.readAsDataURL(file); 
                    console.log(index); 
                } 
            } 
        } 
    } 
}

Alternative: Use forEach for Cleaner Code #

Another approach is to convert the FileList to an array and use forEach, which gives you a dedicated index parameter for each iteration without closure headaches:

function readURL(input) { 
    if (input.files && input.files.length > 0) { 
        // Convert FileList to array and iterate with forEach
        Array.from(input.files).forEach((file, index) => {
            console.log(file); 
            if (!!file.type.match(/image.*/)) { 
                if (window.FileReader) { 
                    const reader3 = new FileReader(); 
                    reader3.onloadend = function (e) { 
                        $('#floor_plan_preview').append( 
                            `<div class="col-12 ubw-outer">
                                <div class="upload-btn-wrapper">
                                    <button class="btn" style="pointer-events: none;">
                                        <img src="" alt="">
                                    </button>
                                    <img alt="" id="preview${index}" class="preview">
                                </div>
                            </div>`
                        ); 
                        $('#preview' + index).attr('src', e.target.result); 
                    }; 
                    reader3.readAsDataURL(file); 
                    console.log(index); 
                } 
            }
        });
    } 
}

Bonus: Avoid IDs Entirely (More Robust) #

Instead of relying on IDs to set the image source, you can create the preview element directly and set its src immediately—this eliminates the risk of ID conflicts and is more efficient:

function readURL(input) { 
    if (input.files && input.files.length > 0) { 
        Array.from(input.files).forEach((file) => {
            console.log(file); 
            if (!!file.type.match(/image.*/)) { 
                if (window.FileReader) { 
                    const reader3 = new FileReader(); 
                    reader3.onloadend = function (e) { 
                        // Build the preview elements in one go
                        const previewContent = $(`
                            <div class="col-12 ubw-outer">
                                <div class="upload-btn-wrapper">
                                    <button class="btn" style="pointer-events: none;">
                                        <img src="" alt="">
                                    </button>
                                    <img alt="" class="preview" src="${e.target.result}">
                                </div>
                            </div>
                        `);
                        $('#floor_plan_preview').append(previewContent);
                    }; 
                    reader3.readAsDataURL(file); 
                } 
            }
        });
    } 
}

All these fixes will ensure each image gets its own preview element with the correct source, no duplicate IDs, and every onloadend callback works as expected.

内容的提问来源于stack exchange，提问作者pl-jay