Question

这里我正在为base64转换两个图像，这个工作正常后我想制作一个json格式，所以我尝试这样但我无法得到答案。我收到错误，如“message”：“未捕获的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) {
	var floor_image = fileLoadedEvent.target.result; // <--- data: base64
	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) {
	var property_image = fileLoadedEvent.target.result; // <--- data: base64
	//console.log("Converted Base64 version 2 " + property_image);  // i am getting answer here
  }
  fileReader.readAsDataURL(fileToLoad);
}

var json = {
	"FloorImage" :floor_image,
	"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

也是如此

像这样：

＆＃13;

$(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) {
	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) {
	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.


});
});

＆＃13;

<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>

＆＃13;

<强>方案首先尝试加载FloorImage，您会在"not loaded yet" - 对象的两个属性中看到文本：json。然后尝试加载PropertyImage，您将在FloorImage - 对象中找到json的base64，但在PropertyImage上找到文本"not loaded yet"。这是因为打印json对象时图像未完成加载。然而，在onload - 方法完成后，图像就在那里。

Answer 2

有两个问题：

floor_image和property_image位于本地范围内。你应该将它们移至click功能的范围
onload只是一个回调。这意味着json对象可以在加载文件之前创建。你应该只在之后创建它调用了2个onload函数（例如，使用flag来确定 onload是否已调用，只有在json完成时才会创建true &）

如何在生成base64编码图像后发送json格式

2 个答案: