Question

我一直试图创建一个片段以上传多个文件。下面的代码有效，但是当用户删除图像时，我需要获取图像ID以便清除我的filesCollection变量。

由于事件监听器完全加载了所有文件，因此变量file.name始终为我动态创建的图像显示相同的值。

有什么能帮助我的见识吗？

预先感谢

    for (var i = 0; i < files.length; i++) {
         var file = files[i];   
         var picReader = new FileReader();

              picReader.addEventListener("load", function (event) {
              var picFile = event.target;
              var div = document.getElementById("uploadboard");

              div.innerHTML = div.innerHTML + "<span class='preview'>
              <img id='"+ file.name +"' src='"+ picFile.result +" '/>
              <button class='remover'></button></span>";
              }

              picReader.readAsDataURL(file);
              filesCollection[file.name] = file;

     }

Answer 1

由于语句var

用var声明的变量的范围是其当前的执行上下文，它是封闭的函数，或者对于任何函数外部声明的变量，都是全局的。

您可以使用带有IIFE (Immediately Invoked Function Expression)的方法来创建函数

for (var i = 0; i < files.length; i++) {
    var f = files[i];   
    var picReader = new FileReader();

    picReader.addEventListener("load", (function (file) {
            return function(event) {
                var picFile = event.target;
                var div = document.getElementById("uploadboard");

                div.innerHTML = div.innerHTML + "<span class='preview'>
                <img id='"+ file.name +"' src='"+ picFile.result +" '/>
                <button class='remover'></button></span>";
            }
        )(f);
    }

    picReader.readAsDataURL(f);
    filesCollection[f.name] = f;
}

另一种替代方法是使用语句let

let语句声明一个块范围局部变量，可以选择将其初始化为一个值。

for (let i = 0; i < files.length; i++) {
    let file = files[i];   
    let picReader = new FileReader();

    picReader.addEventListener("load", function (event) {           
        let picFile = event.target;
        let div = document.getElementById("uploadboard");

        div.innerHTML = div.innerHTML + "<span class='preview'>
        <img id='"+ file.name +"' src='"+ picFile.result +" '/>
        <button class='remover'></button></span>";
    }

    picReader.readAsDataURL(file);
    filesCollection[f.name] = file;
}

访问事件侦听器中的循环数据

1 个答案: