php - Javascript foreach 每次都给我相同的值

Question

我在 javascript 中有一个 foreach 函数，可以一次上传多个文件，并将它们显示在 div 中以及上传的百分比。我的问题我现在只是测试，我创建了一个变量来获取输入中每个文件的名称，但一个输入中有多个文件，所以我提醒我为获取文件名而创建的变量，但我收到了提醒每次都是最后一个文件。下面是我的代码。

$('#File').change(function(event) {
        for(I = 0; I < this.files.length; I++)
        {
            var Name = this.files[I].name;
            var Type = this.files[I].type;
            var Size = this.files[I].size;

            var Add = '';
            Add += '<div class="UploadLabel" style="width:60%;">'+Name+'</div>';
            Add += '<div id="UpPer" class="UploadLabel" style="width:10%;">0%</div>';
            Add += '<div class="UploadLabel" style="width:15%;">N/A</div>';
            Add += '<div class="UploadLabel" style="width:15%;">'+Type+'</div>';
            $('#UploadContent').append(Add);

            var Data = new FormData();
            Data.append('File[]', this.files[I]);
            var Request = new XMLHttpRequest();

            Request.upload.addEventListener('progress', function(event) {
                if(event.lengthComputable)
                {
                    var Percent = event.loaded / event.total;
                    alert(Name);
                }
            });

            Request.open('POST', 'Upload/Upload.php');
            Request.setRequestHeader('Cache-Control', 'no-cache');
            Request.send(Data);
            $('#UploadModal').fadeIn('fast');
        }
    });

查看进度函数，我提醒了 Name 变量。

Answer 1

这是因为调用回调时，变量 Name 的值为循环结束。

您可以使用立即调用的函数来保护此变量:

(function(Name){
    Request.upload.addEventListener('progress', function(event) {
         if(event.lengthComputable){
               var Percent = event.loaded / event.total;
               alert(Name);
         }
    });
})(Name);

此中间函数创建一个范围，新的 Name 变量在其中受到保护。

或者，如果您需要其他变量，您可以声明一个函数，该函数采用 I 来处理循环的整个内容。

您也可以使用 jQuery each :

$.each(this.files, function(I) {
      // the content of your loop
});

使用 each 调用的函数也会为所需的 Name 值创建一个范围。