函数在执行Jquery Image加载之前返回值
if (DataService.Validation(file)) { //angularjs call to api controller }; //DataService Validation: function (file) { var Url = URL.createObjectURL(file); var img = new Image(); $(img).load(function () { var imgwidth = this.width; var imgheight = this.height; if (imgheight > 400) { viewModel.ErrorMessage = 'The Image height cannot be more then 400 px.'; return false; } }); img.src = Url; if (file == null) { viewModel.ErrorMessage = 'Please select a file to upload.'; return false; } if (viewModel.Name == null) { viewModel.ErrorMessage = 'Name is a required field.'; return false; } return true; } 上面的validation函数正在完成执行并返回true，而不检查img load函数中的代码。这意味着即使图像大于400px，validation返回true，因为加载中的代码在很长一段时间后运行Jquery ajax调用被发送到api控制器..我想要实现的是Validation不应该返回值，直到执行图像加载中的代码。
行为是正确的，因为您的函数将始终返回“true”值。 IMG加载函数只有在浏览器完全加载图像后才会执行，因为它的异步函数不会等待它执行。 此外，如果要检查正在加载的图像的宽度/高度，请使用naturalWidth / naturalHeight，因为这将给出正确的值，而不是通过css分配给图像的值。
您可以做的是内部图像加载function，您可以使用true / false值作为参数调用您的函数。
在检查图像尺寸时我遇到了同样的问题，因为图像加载是异步的。 另外正如@Abhinandan所说“只有在你的图像被浏览器完全加载后才能执行IMG加载function，因为它的异步你的function不会等待它执行”
我使用了以下方法。 希望它会有所帮助。
如下所示在更改文件时在图像标记中设置一个额外属性
$('input[type=file]').on('change',function(){ element = $(this); var files = this.files; var _URL = window.URL || window.webkitURL; var image, file; image = new Image(); image.src = _URL.createObjectURL(files[0]); image.onload = function() { element.attr('uploadWidth',this.width); element.attr('uploadHeigth',this.width); } });
现在你可以修改你的function到下面
$.validator.addMethod('checkDim', function (value, element, param) { var image = new Image(); var file = element.files[0]; var _URL = window.URL || window.webkitURL; image.src = _URL.createObjectURL(file); if(element.uploadWidth== param[0] element.uploadHeigth== param[1]){ return true; } else{ return false; } }, 'Image dimension must be as specified');
它对我有用