複数のBase64イメージがの私はアヤックスに2枚の画像をアップロードしたいとしましょう

Question

を上書きする原因と、私はそう

{ "base64StringName:" : "[ {"1": "base64_1"}, {"2" : "base64_2"} ]"} 

の配列が含まれ、そのオブジェクトをこのフォーマットを使用してそれらを送信しますbase64文字列のオブジェクト これを行うには、配列を作成し、この配列内にjsonオブジェクトを挿入する必要があります。ここで

は、このために私のコードです：

 <script> 
     var test =''; 
     var imageArray =[]; 
     var imageObject ={}; 
$('#inputFileToLoad').on('change', function(){  
    imageArray.length = 0; 
fileCount = this.files.length; 
    for(i = 0; i < fileCount; i++){ 
    var file = document.querySelector('#inputFileToLoad').files[i]; 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function() { 
    test = reader.result.split(',')[1]; 
    console.log(test); 
    imageObject[i] = test; 
    imageArray.push(imageObject); 
    }; 
    reader.onerror = function (error) { 
    alert('Error: ', error); 
    }; 
} 

}); 
$('#inputFileToLoadButton').on('click', function(){ 
    console.log(imageArray); 
$.ajax({ 

       url:"some url", 
       method:"POST", 
       data: { 
        "base64String": imageArray 
       } 
        ,success: function() { 
         swal("Success!","Upload Finished!","success"); 
         //add redirect! 
        }, 
        error: function (jqXHR) { 
         swal("Error",jqXHR.responseText, "error"); 
         }      
      }); 
});  
    </script> 

しかし、私は問題が発生し、配列内の私の第一の目的は、何らかの形で上書きされます。 iはconsole.log(test);で第1のBASE64符号化されたファイルをプリントアウトする際 が

{ "base64StringName:" : "[ {"1": "base64_2"}, {"2" : "base64_2"} ]"} 

なるまた、それは未定義であるが、私は第二BASE64符号化されたファイルをプリントアウトするとき、それだけで第二のファイルを印刷します。

Answer 1

はこれを試してください：

あなたが同じ "imageObject" オブジェクトへの変更を行っているためである

var test = ''; 
 
var imageArray = []; 
 
var imageObject; 
 
$('#inputFileToLoad').on('change', function() { 
 
    imageArray.length = 0; 
 
    fileCount = this.files.length; 
 
    for (i = 0; i < fileCount; i++) { 
 
    debugger; 
 
    var file = document.querySelector('#inputFileToLoad').files[i]; 
 
    var reader = new FileReader(); 
 
    reader.readAsDataURL(file); 
 
    reader.onload = function() { 
 
     test = this.result.split(',')[1]; 
 
     imageObject = {}; 
 
     imageObject[index] = test; 
 
     imageArray.push(imageObject); 
 
    }.bind({ 
 
     index: i 
 
    }); 
 
    reader.onerror = function(error) { 
 
     alert('Error: ', error); 
 
    }; 
 
    } 
 

 
});