javascript - How to detect dimensions of file using File API and Dropzone.js - Stack Overflow

admin管理员组

文章数量:1382169

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.

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.

• javascript
• dropzone.js

Share Improve this question Follow asked Apr 15, 2013 at 8:52 MartinMartin 11.3k2323 gold badges8686 silver badges143143 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptHow to detect dimensions of file using File API and DropzonejsStack Overflow