オブジェクトのjavascript配列を投稿できません

Question

私は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); 

ザッツをコード使用していますされて後？どんな助けもありがとうございます。

Answer 1

読み終えた後に投稿することができます。 ここにleft_loaded_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); 

Answer 2

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); 
     } 
    ); 
    });