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

Question

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

我使用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
});

下面是截图：

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

Answer 1

File.width属性是DropzoneJS扩展，不是核心File API的一部分;它是稍后添加的。

  

Dropzone将数据添加到文件对象中，您可以在事件触发时使用。如果是图片，您可以访问file.width和file.height。

如果适用，发生"thumbnail"事件时的图像尺寸信息可用。 not 保证在此事件之前设置。

文档不是很清楚这只是暗示“生成缩略图的时候”，但是这是behavior of the source（参见createThumbnail / resize函数） - 图像大小被收集 时生成缩略图。

---

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

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

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

您甚至可以在接受方法中使用它：

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

Answer 3

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

在上传和检查服务器端之前，我遇到了同样的头痛并且人员放弃检查宽度和高度。实际上，您可以通过返回标头错误来显示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();
}

Answer 4

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

Answer 5

我在完整功能中使用了50ms超时，并且未定义消失了。