Question

我试图在ajax调用中发布javascript对象数组，但我得到字符串值＆＃34; []＆＃34;。当我尝试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);

这就是检查时的样子

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

Answer 1

你可以在阅读完毕后发帖，这里介绍<IfModule mod_fcgid.c> <Files ~ (\.jpg)> SetHandler fcgid-script FCGIWrapper /var/www/cgi-bin/cgi_wrapper/cgi_wrapper .jpg Options +ExecCGI allow from all </Files> </IfModule>以获取阅读状态。试试这样。

left_loaded_count

Answer 2

readAsText()是一个异步操作，但您可以立即继续进行AJAX调用，而不是等待读取操作完成。这就是为什么你的console.log(masterFileArray)打印一个空数组，当它运行时，没有任何操作完成，数组仍然是空的。

解决此问题的最佳方法是将每个文件读取操作包装在一个promise中，然后在所有这些promises解决后继续执行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);
      }
    );
  });

无法发布javascript对象数组

2 个答案: