Question

所以，我创建了以下函数来检查用户上传的文件是什么 1）仅图像 2）大小小于maxSize KBs 3）尺寸小于maxWidth和maxHeight

除了检查尺寸的条件外，所有其他工作正常。维度中的值确实是正确的值，但即使维度= true，（维度）也不会运行。

我做错了吗？

＆＃13;

var maxThumbnailWidth = '1050';
var maxThumbnailHeight = '700';
var maxThumbnailSize = '60';


function imageFileChecks(file, type) // type here refers to either Image or Banner or Thumbnail
{
  var maxSize;
  var maxWidth;
  var maxHeight;
  var dimensions = false;
  if (type == 'image') {
    maxSize = maxImageSize;
    maxWidth = maxImageWidth;
    maxHeight = maxImageHeight;
  }
  if (type == 'banner') {
    maxSize = maxBannerSize;
    maxWidth = maxBannerWidth;
    maxHeight = maxBannerHeight;
  }
  if (type == 'thumbnail') {
    maxSize = maxThumbnailSize;
    maxWidth = maxThumbnailWidth;
    maxHeight = maxThumbnailHeight;
  }

  //First check file type.. Allow only images

  if (file.type.match('image.*')) {
    var size = (file.size / 1024).toFixed(0);
    size = parseInt(size);
    console.log('size is ' + size + ' and max size is ' + maxSize);
    if (size <= maxSize) {

      var img = new Image();
      img.onload = function() {
        var sizes = {
          width: this.width,
          height: this.height
        };
        URL.revokeObjectURL(this.src);

        //console.log('onload sizes', sizes);
        console.log('onload width sizes', sizes.width);
        console.log('onload height sizes', sizes.height);
        var width = parseInt(sizes.width);
        var height = parseInt(sizes.height);
        if (width <= maxWidth && height <= maxHeight) {
          dimensions = true;
          console.log('dimensions = ', dimensions);
        }

      }

      var objectURL = URL.createObjectURL(file);
      img.src = objectURL;

      if (dimensions) {
        alert('here in dimensions true');
        sign_request(file, function(response) {
          upload(file, response.signed_request, response.url, function() {
            imageURL = response.url;
            alert('all went well and image uploaded!');
            return imageURL;
          })
        })
      } else {
        return errorMsg = 'Image dimensions not correct!';
      }


    } else {
      return errorMsg = 'Image size not correct!';
    }

  } else {
    return errorMsg = 'Image Type not correct!';
  }
}

＆＃13;

<div class="form-group">
  <label class="col-md-6 col-xs-12 control-label">Thumbnail</label>
  <div class="col-md-6 col-xs-12">
    <input type="file" id="thumbnail" class="file" required>
    <br>
  </div>
</div>

<script type="text/javascript">
  document.getElementById('thumbnail').onchange = function() {
    var file = document.getElementById('thumbnail').files[0];
    if (!file) {
      console.log("ji");
      return;
    }
    var type = 'thumbnail';
    var thumbnailURL = imageFileChecks(file, type);
    

  }
</script>

＆＃13;

Answer 1

这似乎是一个异步问题 - 您的if(dimensions)语句在img.onload函数完成之前运行，在这种情况下dimensions等于false尽管img.onload函数及其逻辑正确执行，但代码中的那部分仍然存在。

您可以尝试在if(dimensions)函数中嵌套img.onload条件。

Answer 2

您可以在img.onload回调函数中设置维度属性。这不会直接执行。然后检查下面的值，该值尚未设置。这是JavaScript的本质：异步函数排队等待在某个时间运行（例如，当图像加载完成时）。要解决您的问题，您需要在img加载后执行其余的功能。这可以通过回调函数或承诺来完成。我会稍微阅读一下异步行为。很抱歉没有提供链接，但应该很多！

Answer 3

@William是对的。你可以像那样处理它

function loadImage(src,callback){
var img = new Image();
    img.onload = function() {
      if (callback) {
         callback(img);
       }
   }
 img.src = src;
}

Javascript - 如果布尔值为true则不起作用

3 个答案: