2014-09-19 78 views
6

我似乎無法訪問我的對象的寬度或高度鍵。訪問File對象的一些列出的屬性時返回「undefined」

我使用dropzone.js,它有一個用於addedFile的事件,它返回文件和第一個參數。

這樣:

var myDropzone = new Dropzone('#dropzone', {url: '/'}); 

myDropzone.on('addedFile', function(file) { 
    console.log(file); 
}); 

回調工作得很好,在我的控制檯我看到: enter image description here

正如你可以看到,有明確的高度&寬度鍵可用。

myDropzone.on('addedFile', function(file) { 
    console.log(file.name); // returns the whole strong 
    console.log(file.width); // returns undefined 
    console.log(file['width']); // returns undefined 
}); 

繼承人的截圖:

enter image description here

我的問題是,爲什麼是可用的名字,但沒有寬度或高度?是因爲它們是隻讀還是其他?如果是這樣的話,是否有可能訪問它?

+0

啊,那做的,100miliseconds就能夠訪問它:)是有可能的是,雖然有時它不會被定義? – 2014-09-19 06:16:28

回答

5

File.width屬性是DropzoneJS擴展名,不是核心部分File API;它後面加了

Dropzone adds data to the file object you can use when events fire. You can access file.width and file.height if it's an image..

如果適用圖像尺寸信息由的"thumbnail"事件發生時提供。這是而不是保證在此事件之前設置。

該文檔是未在此僅暗指「當已經生成的縮略圖」很清楚,但是這種behavior of the source(見createThumbnail /調整功能) - 圖像尺寸被收集縮略圖是產生。


最初的行爲被認爲是因爲console.log(在瀏覽器中,例如,Chrome中,把它類似於console.dir)顯示「活」的對象。這反過來給予異步縮略圖生成和關聯的圖像維度收集足夠的時間,以在瀏覽器在控制檯中顯示對象的現在分類的屬性之前完成。 (這也解釋了爲什麼使用超時讀取屬性值的作品 - 儘管這樣是一個可靠的方法)

在另一方面,直接訪問仍然沒有設定的file.width部隊立即評估財產,導致"addedFile"回撥中的undefined

+0

您是否認爲創建具有限制的回覆回調會是獲取此數據的更好解決方案? – 2014-09-21 22:11:23

+0

@ShannonHochkins否。獲取信息的唯一正確方法是* wait *,以便觸發'thumbnail'事件。如果成功,將在'addedFile'事件之後的某個時刻調用。 – user2864740 2014-09-22 02:27:16

0

從你寫的代碼看沒有錯,也許文件類型不是對象而是字符串,可以試試JSON.parse(文件)方法,然後獲取寬度的關鍵字。

+1

它肯定是一個對象 – 2014-09-21 22:10:42

1

添加髒超時不會每次都有效,您將在發送大文件或多個文件時收到一些不確定的信息。

我得到了同樣的頭痛,並且personnaly在上傳和檢查服務器端之前放棄了檢查寬度和高度。事實上,你可以通過返回一個頭錯誤顯示懸浮窗的錯誤:

$size = getimagesize(current($_FILES['value']['tmp_name'])); 

if($size[0] == 840 && $size[1] == 570){ 
    //perfect 
} 
else{ 
    header("HTTP/1.0 406 Not Acceptable"); 
    echo 'Your image must be 840x570px'; 
    exit(); 
} 
2

所以只是爲了把事情說清楚。正如user2864740所說的,你需要等待「縮略圖」事件。這將導致該代碼:

myDropzone.on('addedFile', function(file) { 
    myDropzone.on("thumbnail", function(file){    
    console.log(file); 
    console.log(file.width); // returns width 
    console.log(file['width']); // returns width 
    }); 
}); 

你甚至可以用它在accept方法是這樣的:

myDropzone.on('accept', function(file, done){ 
    myDropzone.on("thumbnail", function(file){ 
    if(file.width != 728 && file.height != 90){ 
     done("Resolution is not correct (Super Banner (728x90))"); 
    } else { 
     done(); 
    } 
    }); 
}