Can'；t发布对象的javascript数组

我试图在ajax调用中发布对象的javascript数组，但得到字符串值“[]”。当我尝试console.log数组长度时，它显示为零

下面是我正在使用的代码

var masterFileArray = [];  // where I will store the contents
function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;
if (files) {
    for (var i = 0, f; f = files[i]; i++) {
        var r = new FileReader();
        r.onload = (function (f) {
            return function (e) {
                var contents = e.target.result;
                masterFileArray.push({name:f.name, contents: contents, type:f.type, size:f.size}); // storing as object

            };
        })(f);
        r.readAsText(f);
    }
    console.log(masterFileArray);
    new Ajax.Request('fileupload.php', {
    method: 'post',
    parameters: {files: JSON.stringify(masterFileArray)},
    onSuccess: function(transport){
        var response = transport.responseText;
        console.log(response);
    }
});

} else {
    alert('Failed to load files');
   }
}
 document.getElementById('upfiles').addEventListener('change', readMultipleFiles, false);

这就是检查时的情况

---

我做错了什么？任何帮助都将不胜感激，谢谢

您可以在阅读完成后发布， 这里介绍了

left\u loaded\u count

以获取读取状态。 像这样试试

var masterFileArray = [];  // where I will store the contents
var left_loaded_count = 0;
function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;
if (files) {
    for (var i = 0, f; f = files[i]; i++) {
        var r = new FileReader();
        r.onload = (function (f) {
            return function (e) {
                var contents = e.target.result;
                masterFileArray.push({name:f.name, contents: contents, type:f.type, size:f.size}); // storing as object
                left_loaded_count -= 1;
                if(left_loaded_count == 0)
                {
                 console.log(masterFileArray);
                 new Ajax.Request('fileupload.php', {
                  method: 'post',
                  parameters: {files: JSON.stringify(masterFileArray)},
                  onSuccess: function(transport){
                     var response = transport.responseText;
                     console.log(response);
                   }
                  });
                }
            };
        })(f);
        left_loaded_count += 1;
        r.readAsText(f);
    }    
} else {
    alert('Failed to load files');
   }
}
 document.getElementById('upfiles').addEventListener('change', readMultipleFiles, false);

readAsText（）

是一个异步操作，但是您可以立即执行AJAX调用，而不是等待读取操作完成。这就是为什么

console.log（masterFileArray）

在运行所有操作都未完成且阵列仍然为空时打印空阵列的原因

解决此问题的最佳方法是将每个文件读取操作包装在一个承诺中，然后在所有这些承诺解决后继续进行AJAX调用。
摆脱

var masterFileArray=[]

并将

if（files）{…}

块中的代码更改为：

  Promise.all(files.map(function(f) {
    return new Promise(function(resolve) {
      var r = new FileReader();
      r.onload = function (e) {
        var contents = e.target.result;
        resolve({name:f.name, contents: contents, type:f.type, size:f.size}); // resolve promise with object
      };
      r.readAsText(f);
    });
  })).then(function(masterFileArray) {
    // All promises have resolved and their results have been collected in masterFileArray
    console.log(masterFileArray);
    new Ajax.Request('fileupload.php', {
      method: 'post',
      parameters: {files: JSON.stringify(masterFileArray)},
      onSuccess: function(transport){
        var response = transport.responseText;
        console.log(response);
      }
    );
  });

---

因为您基本上是在

onload

函数中异步添加元素

readAsText

不会阻塞并等待文件被读取，因此您的代码只会在填充数组之前立即发出请求。您在文件读取器读取文件之前执行Ajax请求。是否触发r.onload？把Console.log放在里面知道：）可能读过这个问题及其答案：@RômuloM.Farias是的，它开火了。我测试了两个图像，得到了两个日志。