如何使用File API和Dropzone.js检测文件的大小

Question

使用Dropzone.js,我需要在添加文件时检测图像的尺寸,并将它们应用到其父.detailsdiv.以下代码代码可以工作并返回添加了图像宽度的警报.

myDropzone.on("addedfile", function(file, xhr) {
  var fr;
  fr = new FileReader;
  fr.onload = function() {
    var img;
    img = new Image;
    img.onload = function() {
      return alert(img.width);
    };
    return img.src = fr.result;
  };
  return fr.readAsDataURL(file);
});

问题是我不知道如何将宽度分配给其父.details元素,该元素设置预览的预览宽度.

我尝试替换此代码的警报,但它没有做任何事情.

$(this).parent('.details').css('height',img.height);

我有点迷失在如何将onload函数中的值与将其应用于其父类相关联.

Answer 1

使用最新版本的 dropzone，您不必自己编写此代码。

只需读取生成缩略图时在对象上设置的file.width和属性即可。file.heightfile

问题是，为什么你的 CSS 不影响元素，是因为你没有指定单位，px在这种情况下。所以你的代码可以是：

myDropzone.on("thumbnail", function(file) {
  $(this.element).parent('.details').css('height', file.height + 'px');
});