如何使用File API和Dropzone.js检测文件的尺寸 [英] How to detect dimensions of file using File API and Dropzone.js

问题描述

使用Dropzone.js，我需要在添加文件时检测图像的三维并将其应用于其父级 .details div.以下代码可以正常工作，并返回带有增加的图像宽度的警报.

  myDropzone.on("addedfile"，function(file，xhr){var fr;fr =新的FileReader；fr.onload = function(){var img;img =新图片；img.onload = function(){返回警报(img.width);};返回img.src = fr.result;};返回fr.readAsDataURL(file);}); 

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

我尝试替换此代码的警报，但它没有任何作用.

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

我对如何将onload函数中的值应用于它的父类感到迷茫.

解决方案

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

仅读取生成缩略图时在 file 对象上设置的 file.width 和 file.height 属性.

问题(为什么CSS不影响元素)是因为您没有指定单位，在这种情况下为 px .因此您的代码可以是:

  myDropzone.on(缩略图"，函数(文件){$(this.element).parent('.details').css('height'，file.height +'px');}); 

Using Dropzone.js, I need to detect the dimesions of the image when added files and apply them to its parent .details div. The following code code works and return an alert with the added image width.

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);
});

The thing is that I have no idea how to assign the width to its parent .details element which set the preview width of the preview.

I try replacing the alert for this code but it doesn't do anything.

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

I'm a bit lost in how to relate the value inside the onload function to applying it to its parent class.

解决方案

With the latest version of dropzone you don't have to write this code yourself.

Simply read the file.width and file.height properties that are set on the file object when the thumbnail is generated.

The problem, why your CSS doesn't affect the element, is because you didn't specify the unit, px in this case. So your code can be:

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

这篇关于如何使用File API和Dropzone.js检测文件的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！