JavaScript函数img.onload不返回任何值（true或false）

Question

 function getMeta() { var img = new Image(); var verif = true; img.onload = function() { if (this.width != 468 && this.height != 60) { alert('error : only these image sizes are accepted : 468x60'); return false; } else alert('loaded successfully'); }; img.onerror = function() { alert('error : this is not a valid image'); return false; }; img.src = document.getElementById('t1').value; return true; } 

 <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="form1" onsubmit="return getMeta();"> 

函数img.onload不会返回任何东西，我需要返回true或false的值。

我想在表单的onsubmit中使用返回值。 有人可以帮我吗？

Answer 1

作为一般参考，您应该阅读如何从异步调用返回响应？ 。 这描述了获得异步结果的一般问题。 阅读完这些内容后，您将希望理解为什么不能只从.onload()返回值， getMeta()希望它是getMeta()的返回值。 但是，这个答案本身并不能为您的特定问题提供完整的解决方案。

因此，现在让我们更详细地描述代码中发生了什么，然后讨论修复它的选项。

img.onload是异步的。 这意味着它会在getMeta()返回很久之后的getMeta()时间完成。

同时，您正在尝试执行以下操作：

onsubmit="return getMeta();"

这看起来就像您尝试使用异步结果来确定是否应提交表单。 那根本不可能那样做。 异步结果尚不清楚，您的getMeta()函数始终返回true 。

您可以重组代码，使其永远不会同步提交。 加载图像，并且仅在加载图像时，才向用户显示错误或手动提交表单。 这有潜在的用户界面问题，因为用户单击了“提交”按钮并且没有立即发生任何事情（因为您正在加载图像进行验证）。 这使用户想知道正在发生什么。 他们通常会认为它不起作用，或者再次按下提交按钮，或者认为它已损坏。 因此，通常您需要在此周围使用一堆UI来禁用该按钮，提供反馈以确认您现在正在验证图像，然后在图像无法验证时提供适当的错误消息，并且在您使用该功能时通常应禁用其他UI控件正在验证图片，以使用户在尝试确定是否要提交此表单时不会离开并执行其他操作。

因此，要修复提交：

在onsubmit处理程序中，您将始终返回false因此表单永远不会立即提交。 然后，在onload()处理程序中（加载图像后），您将手动提交表单或显示错误。

Answer 2

最终，我找到了一种解决方案，就像jfriend00一样，它在成功加载图像后手动提交表单，并在“ onsubmit”中添加return false以阻止错误提交表单。 谢谢大家

 <script> function getMeta(){ var img = new Image(); img.onload = function(){ if (this.width != 468 && this.height != 60) {alert( 'error : only these image sizes are accepted : 468x60' ); return false;} else alert( 'loaded successfully' ); document.getElementById('form1').submit(); }; img.onerror = function() {alert( 'error : this is not a valid image'); return false; }; img.src = document.getElementById('t1').value; return true; } </script> 

 <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="form1" onsubmit="getMeta(); return false;">