Javascript 函数不是处理变量的最后一条语句吗？

我编写这段代码的目的是：检查是否是PNG，检查是否是256X256，并将img转换为base64以上载到服务器

所以，如果我选择了一个256 x 256的img，它将被加载，但是，如果我在选择了一个256 x 256的img之后加载了另一个不是256 x 256的img，它将被加载，我不知道为什么！ 我如何解决它？

函数isFileImage（文件）{
常量acceptedImageTypes=['image/png']；
返回文件（&acceptedImageTypes）。包括（文件['type']）
}
函数importFileandPreview（）{
var preview=document.querySelector（'img'）；
var file=document.querySelector（'input[type=file]'）。files[0]；
var reader=new FileReader（）；
如果（文件）{
//阅读img
reader.readAsDataURL（文件）；
//验证类型
var text=file.type；
如果（文本==“图像/png”）{
//加载img
reader.addEventListener（“加载”，函数（）{
//戴上img


tl；dr:您需要对预览的
加载事件处理程序中图像的自然尺寸执行检查


您所面临的问题是由于时间安排不当而非逻辑性差。更具体地说，它在于您设置预览的新
src
，然后同步检查加载图像的自然尺寸

这种方法是错误的，因为图像以异步方式加载，，因此，您的代码在继续检查之前不会等待加载。因此，当您选择了有效图像后，选择了无效图像时，您仍在检查前者的尺寸，因为后者尚未加载

要更正此错误，必须在处理程序中执行预览的
load
事件的检查，如下所示

工作片段：

（我重写了函数以使其更易于阅读）


函数isFileImage（文件）{
常量acceptedImageTypes=[“图像/png”]；
返回文件（&acceptedImageTypes）。包括（文件[“类型”]）
}
函数importFileandPreview（）{
var预览=document.querySelector（“img”）；
var file=document.querySelector（“输入[type=file]”）。文件[0]；
var reader=new FileReader（）；
/*如果文件不是图像，则提前终止函数*/
如果（！isFileImage（file））返回；
/*将文件加载到读卡器中*/
reader.readAsDataURL（文件）；
/*设置读卡器的“加载”事件*/
reader.addEventListener（“加载”，函数（）{
/*创建用于检查的临时图像以避免闪烁*/
var tempreview=新图像（）；
/*设置临时预览的“加载”事件*/
tempPreview.addEventListener（“加载”，函数（）{
/*检查所选图像是否不是256x256像素*/
如果（this.naturalHeight！=256 | | this.naturalWidth！=256）{
/*提醒用户*/
警报（“必须是PNG并且具有256px X 256px！”）；
/*将默认src恢复到预览*/
preview.src=preview.dataset.defaultSrc；
/*过早终止函数*/
返回；
}
/*将读取器的结果设置为预览源*/
preview.src=reader.result；
/*将图像保存到表单中*/
saveImageToInput（reader.result）；
});
/*将读取器的结果设置为图像源*/
tempreview.src=reader.result；
});
/*将默认图像保存在data-*属性中，以便在需要时再次使用*/
preview.dataset.defaultSrc=preview.dataset.defaultSrc | | preview.src；
}
函数saveImageToInput（图像）{
/*找到隐藏的输入*/
var输入=document.getElementById（“imga”）；
/*检查输入是否不存在*/
如果（！输入）{
/*创建一个新的隐藏输入*/
输入=document.createElement（“输入”）；
setAttribute（“id”、“imga”）；
输入.setAttribute（“名称”、“img”）；
setAttribute（“类型”、“隐藏”）；
/*将输入放入表单中*/
document.getElementById（“count”）.appendChild（输入）；
}
/*将图像另存为输入值*/
输入.setAttribute（“值”，图像）；
}


您想知道的
false
与事件是在冒泡（
false
）还是捕获（
true
）中捕获有关阶段。明白了，我会看到更多关于这个阶段的内容。检查我的，@Victor。我希望它能帮助@Angel，谢谢你解决了我的问题，还有一点谢谢你评论我的代码，我真的需要做得更多。我很高兴我能帮上忙，@Victor。你不必像我那样痴迷于评论，但我建议你确实要做得更多。否则，因为作为一名程序员，你在不断成长，很快就会在理解过去编写的一些代码时遇到困难。