Как определить размеры файла с помощью File API и Dropzone.js

Question

Используя Dropzone.js, мне нужно определить десятичные значения изображения при добавлении файлов и применить их к его родительскому .details div. Следующий код работает и возвращает предупреждение с добавленной шириной изображения.

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