JavaScript：调用load_files前清理外部upload变量并保留外部访问性

嘿，这个问题很好解决！核心问题就是你每次调用load_files时，只是把新文件追加到upload数组里，没有先清空之前的内容，而且页面上的文件名也会一直累加，这应该也是你不想看到的对吧？

修复方案 #

我们只需要做两个关键调整：

1. 在load_files函数开头，把upload数组重置为空，这样每次选新文件都会从头开始存储
2. 清空.choose-el的内容，避免重复显示旧文件名

修改后的完整代码 #

$(document).ready(function() {
    $('.choose-input').on('change', load_files);
    // 这个变量在外部作用域定义，确保函数内外都能访问
    var upload = [];

    function load_files(e) {
        // 关键：每次加载新文件前清空upload数组
        upload = [];
        var files = e.target.files;
        var arr = Array.prototype.slice.call(files);
        
        // 先清空DOM元素里的旧内容
        $('.choose-el').empty();

        arr.forEach(function(file) {
            upload.push(file);
            $('.choose-el').append(file.name + ' '); // 加个空格分隔文件名
        });

        if (upload.length > 0) {
            $('.choose-el').append('<span class="start-upload">Start upload</span>');
        }

        $('.choose-input').val('');
    }
});

为什么这样有效？ #

• upload是在$(document).ready()的作用域下定义的，属于该作用域的变量，所以load_files函数可以直接修改它，同时外部（只要在这个作用域内）也能访问到它的最新内容
• 每次触发文件选择事件时，先执行upload = []，彻底清空之前的文件记录，再添加新选中的文件
• 清空.choose-el的内容，保证页面上只显示当前选中的文件，不会堆积旧内容

这样调整后，你每次重新选择文件，upload里就只会保留最新选中的文件，同时变量的可访问性也不受影响啦！

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