Javascriptファイルリーダーが配列に格納されない

Question

複数の画像をアップロードしようとしています。だから、私は一時的なURLを生成し、AJAXでそれらを送ることができることを読んだ。

アイデアはfilereaderで作成したURLを配列にプッシュし、ajaxで送信しますが、URLは正しくプッシュされません。私は空の配列のように得た結果を参照する場合：

をしかし、私は、私が見ることができるの矢印をクリックすると、URLの内部

しかし、それらにアクセスできないようです。

これは私のコードです：

$('form').on('submit',function(e) { 

     e.preventDefault(); 

     var filesToUpload = document.getElementById("myFile"); 
     var files = filesToUpload.files; 
     var fd = new FormData(); 
     var arr = []; 

     if (FileReader && files && files.length) { 

      for (i=0; i< files.length; i++){ 


       (function(file) { 

        var name = file.name; 
        var fr = new FileReader(); 


        fr.onload = function() { 

          arr.push(fr.result); 

        } 

        fr.readAsDataURL(file); 

       })(files[i]); 

      } 

      console.log(arr); 

     } 


    }); 

最終的アイデアは、文字列JSON.stringify(arr)に変換して、PHP json_decode($_POST['arr'])で解析しています。

JSON.stringify(arr)が空になるため、もちろんこれは機能しません。

Answer 1

次の簡単な解決策が役立つかもしれませんか？検索結果の配列は、すべての値で埋められた後、私は、fr.onload()方法にあなたのconsole.log()とあなたのAJAX呼び出しを置くだけで、それを発射：

$('form').on('submit',function(e) { 
     e.preventDefault(); 
     var filesToUpload = document.getElementById("myFile"); 
     var files = filesToUpload.files; 
     var fd = new FormData(); 
     var arr = []; 
     if (FileReader && files && files.length) { 
      for (var i=0; i< files.length; i++){ 
       (function(file) { 
        var name = file.name; 
        var fr = new FileReader(); 
        fr.onload = function() { 
          arr.push(fr.result); 

          if(arr.length==files.length) { 
           console.log(arr); 
           // place your ajax call here! 
          } 
         } 
         fr.readAsDataURL(file); 
       })(files[i]); 
      } 
     } 
});