如何在base64編碼圖像後發送json格式

Question

在這裏，我爲base64轉換兩個圖像，這個工作正常後，我想做一個json格式，所以我想這樣，但我無法得到答案。我收到錯誤，如「消息」：「未捕獲的ReferenceError：floor_image沒有定義」，如何解決這個問題，併發送JSON格式

$(document).ready(function(){ 
 
$('#submit').click(function(){ 
 

 
var filesSelected = document.getElementById("inputFileToLoad").files; 
 
if (filesSelected.length > 0) { 
 
    var fileToLoad = filesSelected[0]; 
 

 
    var fileReader = new FileReader(); 
 

 
    fileReader.onload = function(fileLoadedEvent) { 
 
\t var floor_image = fileLoadedEvent.target.result; // <--- data: base64 
 
\t console.log("Converted Base64 version 1 " + floor_image); // i am getting answer here 
 
    } 
 
    fileReader.readAsDataURL(fileToLoad); 
 
} 
 

 

 
var filesSelected = document.getElementById("inputFileToLoad1").files; 
 
if (filesSelected.length > 0) { 
 
    var fileToLoad = filesSelected[0]; 
 

 
    var fileReader = new FileReader(); 
 

 
    fileReader.onload = function(fileLoadedEvent) { 
 
\t var property_image = fileLoadedEvent.target.result; // <--- data: base64 
 
\t //console.log("Converted Base64 version 2 " + property_image); // i am getting answer here 
 
    } 
 
    fileReader.readAsDataURL(fileToLoad); 
 
} 
 

 
var json = { 
 
\t "FloorImage" :floor_image, 
 
\t "PropertyImage" : property_image 
 
} 
 

 
console.log(json); 
 

 

 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<form id="idname"> 
 
<input id="inputFileToLoad" type="file" /><br><br> 
 
<input id="inputFileToLoad1" type="file" /> 
 
<br><br><br><br> 
 

 
<input type="button" value="Submit" id="submit"> 
 
</form>

Answer 1

您不必在floor_image全球範圍。嘗試在方法之外編寫var floor_image;，然後將floor_image設置爲您的結果，但刪除方法中的var關鍵字。這同樣適用於property_image和json

像這樣：

$(document).ready(function(){ 
 
    var json={FloorImage:"not loaded yet",PropertyImage:"not loaded yet"}; 
 
    var floor_image; 
 
    var property_image; 
 
$('#submit').click(function(){ 
 

 

 
var filesSelected = document.getElementById("inputFileToLoad").files; 
 
if (filesSelected.length > 0) { 
 
    var fileToLoad = filesSelected[0]; 
 

 
    var fileReader = new FileReader(); 
 

 
    fileReader.onload = function(fileLoadedEvent) { 
 
\t floor_image = fileLoadedEvent.target.result; 
 
    json.FloorImage=floor_image; 
 
    } 
 
    fileReader.readAsDataURL(fileToLoad); 
 
} 
 

 

 
var filesSelected = document.getElementById("inputFileToLoad1").files; 
 
if (filesSelected.length > 0) { 
 
    var fileToLoad = filesSelected[0]; 
 
    var fileReader = new FileReader(); 
 
    fileReader.onload = function(fileLoadedEvent) { 
 
\t property_image = fileLoadedEvent.target.result; 
 
    json.PropertyImage=property_image; 
 
    } 
 
    fileReader.readAsDataURL(fileToLoad); 
 
} 
 

 
console.log(json); // you are logging the json before the images are loaded, because this code is executed before the code inside onLoad. 
 

 

 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="idname"> 
 
<input id="inputFileToLoad" type="file" /><br><br> 
 
<input id="inputFileToLoad1" type="file" /> 
 
<br><br><br><br> 
 

 
<input type="button" value="Submit" id="submit"> 
 
</form>

方案 試圖加載FloorImage首先，你將看到的文字："not loaded yet"中的兩個屬性json -object。然後嘗試加載PropertyImage，您將在json對象內搜索FloorImage的base64，但在PropertyImage上顯示文本"not loaded yet"。這是因爲打印json對象時圖像未完成加載。但是在onload-方法完成後，圖像就在那裏。

Answer 2

有2個問題：

1. floor_image和property_image在局部範圍內。您應該將 移動到click功能的範圍
2. onload只是一個回調。這意味着可以在加載文件之前創建對象json對象 。您應該只後函數調用創建它（例如，使用標誌來確定 onload叫與否，只有創造json當他們兩人都是 true）