Jak wykryć wymiary pliku za pomocą File API i Dropzone.js

Question

Używając Dropzone.js, muszę wykryć dimesions obrazu po dodaniu plików i zastosować je do jego rodzica .details div. Poniższy kod działa i zwraca alert z dodaną szerokością obrazu.

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

Chodzi o to, że nie mam pojęcia, jak przypisać szerokość jego rodzic .details elementu, który ustawić szerokość podglądu podglądu.

Próbuję zastąpić alert dla tego kodu, ale nie robi nic.

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

Jestem trochę zagubiony, jak powiązać wartość wewnątrz funkcji onload, aby zastosować ją do jej klasy nadrzędnej.

Answer 1

Najnowsza wersja programu Dropzone nie wymaga samodzielnego pisania tego kodu.

Po prostu odczytaj właściwości file.width i file.height ustawionych w obiekcie file podczas generowania miniatury.

Problem, dlaczego Twój CSS nie ma wpływu na element, polega na tym, że w tym przypadku nie określono jednostki, px. Twój kod może być:

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