Cách phát hiện kích thước của tệp bằng cách sử dụng API tệp và Dropzone.js

Question

Sử dụng Dropzone.js, tôi cần phát hiện các dấu chấm của hình ảnh khi thêm tệp và áp dụng chúng cho div cha .details div. Mã mã sau hoạt động và trả về một cảnh báo với chiều rộng hình ảnh được thêm vào.

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

Cái này là tôi không có ý tưởng làm thế nào để gán chiều rộng đến yếu tố phụ huynh .details của nó mà thiết lập chiều rộng bản xem trước của hình xem trước.

Tôi thử thay thế cảnh báo cho mã này nhưng nó không làm gì cả.

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

Tôi bị mất một chút về cách liên kết giá trị bên trong hàm onload để áp dụng giá trị đó cho lớp cha mẹ.

Answer 1

Với phiên bản dropzone mới nhất, bạn không phải tự viết mã này.

Chỉ cần đọc các thuộc tính file.width và file.height được đặt trên đối tượng file khi hình thu nhỏ được tạo.

Vấn đề, tại sao CSS của bạn không ảnh hưởng đến yếu tố này, là do bạn không chỉ định đơn vị, px trong trường hợp này. Vì vậy, mã của bạn có thể là:

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