如何通过图片点击事件移除jQuery+HTML上传的图片及输入文件信息？

嘿，我来帮你搞定这个需求！你现在要实现的是：通过文件选择控件加载多张图片后，点击图片就能把它从页面上移除，同时还要同步删掉对应文件的记录对吧？我先帮你修正现有代码里的小问题，再加上删除功能。

首先，修正现有代码的闭包问题 #

你原来的循环里，i变量在reader.onload回调里会因为作用域问题，导致所有图片的id都是最后一个循环的数值。咱们可以用let来声明循环变量，或者用立即执行函数绑定作用域，这里用let更简洁。

然后实现删除功能 #

因为原生的input[type="file"]的files对象是只读的，没法直接删除其中的文件，所以咱们需要维护一个自定义的文件数组来跟踪用户选中的文件，删除的时候同步更新这个数组。同时给每个图片容器加上删除按钮（或者直接绑定图片的点击事件）来触发移除操作。

完整代码示例 #

HTML部分

<input type="file" id="UploadIMG" multiple>
<div id="DivImagens" class="row"></div>

jQuery部分

$(document).ready(function() {
    // 维护选中的文件数组，替代原生只读的files对象
    let selectedFiles = [];

    $(document).on("change", "#UploadIMG", function(e) {
        // 把新选中的文件合并到数组里
        selectedFiles = [...selectedFiles, ...Array.from(this.files)];
        showThumbnail(selectedFiles);
        // 重置input的value，避免重复选择相同文件时不触发change事件
        this.value = '';
    });

    // 渲染图片缩略图及删除按钮
    function showThumbnail(files) {
        $('#DivImagens').html('');
        files.forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = function(event) {
                // 构建带删除按钮的图片容器，绑定对应的数组索引
                const imgContainer = `
                    <div class="col-md-3 mb-3" data-index="${index}">
                        <img src="${event.target.result}" class="img-thumbnail" style="width:150px; cursor:pointer;">
                        <button class="btn btn-sm btn-danger mt-1 remove-img">删除</button>
                    </div>
                `;
                $('#DivImagens').append(imgContainer);
            };
            reader.readAsDataURL(file);
        });
    }

    // 绑定删除事件：点击图片或删除按钮都能触发
    $(document).on("click", ".remove-img, .img-thumbnail", function() {
        // 获取当前图片对应的数组索引
        const container = $(this).closest('[data-index]');
        const index = parseInt(container.data('index'));
        
        // 从文件数组中移除对应文件
        selectedFiles.splice(index, 1);
        // 移除页面上的图片容器
        container.remove();
        
        // 重新渲染剩余图片，确保索引和数组同步
        showThumbnail(selectedFiles);
    });
});

关键细节说明 #

• selectedFiles数组：用来存储用户选中的所有文件，方便我们进行增删操作，后续提交文件时直接用这个数组即可。
• 重置input的value：解决了用户重复选择相同文件时，change事件不触发的问题。
• data-index属性：给每个图片容器绑定对应的数组索引，删除时能精准定位要移除的文件。
• 双触发删除：同时绑定了图片和删除按钮的点击事件，用户操作更灵活。
• 重新渲染：删除后重新渲染剩余图片，保证每个容器的索引和数组完全匹配，避免后续删除出错。

这样你就能实现点击图片（或删除按钮）移除图片，同时同步删除对应文件记录的需求啦！

内容的提问来源于stack exchange，提问作者Bruno Aparecido da Silva