Question

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

如果其中一个图像较大，最好在上传其余图像之前将其从FileList中删除。读一下就告诉我这是不可能的，因为FileList是只读的？（可能的解决方法是创建一个单独的数组，但我正在使用Rails和gem s3_direct_upload构建于jquery-fileupload，所以我不完全确定如何去做）。

因此，至少我想清除FileList并提醒用户，以便他可以在没有太大图像的情况下再次选择所有图像。

我的问题是我使用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;
}

Answer 1

不好。 Javascript是不安全的。使用PHP代替或任何其他服务器端语言。

Answer 2

我会这样做。默认设置upload按钮disabled。添加图像后，将其设为disabled，检查宽度并保留新图像或将其删除（将其标记为无效）。之后enable upload按钮。这样，当upload按钮为enabled时，您就会知道所有图片都可以上传。

JS多图像上传宽度验证

2 个答案: