访问File对象的某些列出属性时返回“undefined”

我似乎无法访问我的对象的宽度或高度键。

我正在使用dropzone.js,它有一个addFile事件,它返回文件和第一个参数。

所以:

var myDropzone = new Dropzone('#dropzone', {url: '/'}); myDropzone.on('addedFile', function(file) { console.log(file); }); 

回调工作得很好,在我的控制台中我看到: 在此处输入图像描述

如您所见,显然有高度和宽度键可用。

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

inheritance人截图:

在此处输入图像描述

我的问题是,为什么名称可用,但不是宽度或高度? 是因为他们是只读还是什么? 如果是这样的话,甚至可以访问它吗?

File.width属性是DropzoneJS扩展,不是核心File API的一部分; 它会在以后添加

Dropzone将数据添加到事件触发可以使用的文件对象。 你可以访问file.widthfile.height如果它是一个图像..

如果适用 ,图像大小信息在"thumbnail"事件发生时可用。 保证在此事件之前设置。

文档不是很明确,只是暗示“生成缩略图时”,但这是源的行为 (请参阅createThumbnail / resize函数) – 生成缩略图会收集图像大小。


可以看到初始行为,因为console.log (在浏览器中,例如Chrome,将其视为类似于console.dir )显示“实时”对象。 这反过来又为浏览器在控制台中显示对象的现在分配属性之前完成异步缩略图生成和相关图像维度收集提供了足够的时间。 (这也解释了为什么使用超时读取属性值有效 – 即使这不是一种可靠的方法。)

另一方面,直接访问file.width强制立即评估仍未设置的属性,这会导致"addedFile"回调中的undefined

所以只是为了清楚。 正如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 }); }); 

您甚至可以在接受方法中使用它,如下所示:

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

添加脏超时不会每次都有效,当你发送大文件或多个文件时,你会得到一些不确定的。

在上传和检查服务器端之前,我遇到了同样的头痛并且人员放弃检查宽度和高度。 实际上,您可以通过返回标头错误来显示dropzone错误:

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

从你编写代码看没有错,也许文件的类型不是对象而是字符串,你可以尝试方法JSON.parse(文件),然后获取宽度的键。