javascript - 如何使用 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.height属性。file

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

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