Javascript JS多图像上传宽度验证

我有一个图像的多文件上传字段，我想在上传之前验证每个图像的宽度，以确保它小于640px

如果其中一个图像较大，最好在上传其余图像之前将其从文件列表中删除。仔细阅读会发现这是不可能的，因为文件列表是只读的？（可能的解决方法是制作一个单独的数组，但我使用的是基于jquery fileupload的gem s3_direct_upload的Rails，所以我不完全确定如何去做）

因此，至少我希望清除文件列表并提醒用户，以便他下次可以选择所有图像，而不会选择太大的图像

我的问题是，我正在使用FileReader和image.onload（哪一种是异步的？）遍历所有图像以获得宽度，并且由于无效图像可能位于循环中的任何位置，因此我无法找到正确的方法将一个或多个图像标记为无效，请等待循环完全完成，然后再处理结果。在图像加载且宽度已知后设置“validated”似乎不起作用，因为它是异步的，因此该方法始终返回true

这是我的密码：

$('#fileUploadField').change(function (e) {
  if (window.FileReader) {
    if (this.files && this.files[0]) {
      var images = this.files;
      if(images && images[0]) {
        for (var i=0 ; i < images.length; i++) {
          var validated = validateImg(images[i]);
          if (validated = false) {
           //...do something
          }
        } 
      }
    }
  }
});

function validateImg(file) {
  var reader = new FileReader(),
      image = new Image(),
      validated = true;

  reader.readAsDataURL(file);

  image.src = _file.target.result;
  reader.onload = function(_file) {
    image.onload = function() {
        var w = this.width,
            n = file.name;
      if (w > 640) {
        validated = false;
      } else {
        $('.imgs-preview-wrap').append('<img src="'+ image.src +'">');
      }
    };
  };
  return validated;
}

$（'#fileUploadField'）。更改（函数（e）{
if（window.FileReader）{
if（this.files&&this.files[0]）{
var images=this.files；
如果（图像和图像[0]）{
对于（var i=0；i640）{
验证=假；
}否则{
$（'.imgs预览包装'）.append（''）；
}
};
};
返回验证；
}

不太好。Javascript是不安全的。请改用PHP或任何其他服务器端语言。

我会做如下操作。默认情况下，使

上传

按钮

处于禁用状态

。添加图像时，将其禁用，检查宽度，保留新图像或将其删除（将其标记为无效）。然后，

启用

上传按钮。这样，当

上传

按钮处于

启用状态时，您将知道所有图像都可以上传
 我同意他不应该只依赖JS，但我猜他的目标是通过跳过上传将在服务器上删除的图像来减少服务器的负载。是的，就像Ivaylo说的，我正试图用JS直接上传到Amazon S3，以避免请求击中我们的服务器，因此，服务器端验证是不可能的。这是针对内部控制面板/CRM的，因此用户不太可能试图绕过客户端验证；）不确定这将如何与我的当前设置工作。正如我在问题中解释的，这是一个多文件上传字段，所以用户可以一次选择多个图像。其次，宽度只有在图像被“读取”后才知道，这是异步的，因此目前我不知道所有图像何时被读取/验证…我的理解是，您需要允许用户只上传具有某些特征的图像。您可以异步地检查它。我的建议是在进行验证时禁止上传。此时将选择要验证的图像，但您仍然不知道它们是否有效。验证完成后，您将对其进行筛选并允许用户上传。感谢您为帮助Ivaylo所做的努力，我对此表示感谢；）上载已在稍后执行，它未连接到验证。但是我遇到的问题是知道何时检查了所有图像，并在那时执行一个功能…如果问题是如何知道启用
上传
按钮是安全的，即知道所有验证都准备好了，我将执行以下操作。我将向
validateImg
函数传递一个对象，该函数包含图像和验证结果之间的映射。完成给定图像的验证后，将修改此对象。当此贴图的大小等于要验证的图像数时，我将执行最后的操作。我将在每次图像验证结束时执行大小检查。因为JS应该是单线程的，所以所有的东西都应该工作…谢谢。我将尝试这种方法，看看效果如何；）