访问 File 对象的某些列出的属性时返回“未定义”答案

【问题标题】："undefined" returned when accessing some listed properties of File object访问 File 对象的某些列出的属性时返回“未定义”
【发布时间】：2014-11-13 15:54:11
【问题描述】：

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

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

所以：

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

截图如下：

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

【问题讨论】：

啊，做到了，100 毫秒就足够访问它了 :) 虽然有时它不会被定义，但有可能吗？

标签： javascript jquery dropzone.js fileapi

【解决方案1】：

从你写的代码看没有错，可能文件的类型不是object而是string，你可以试试JSON.parse(file)的方法，然后得到width的key。

【讨论】：

它绝对是一个对象

【解决方案2】：

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

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

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

文档对此不是很清楚，仅暗示“何时生成缩略图”，但 behavior of the source 就是这样（请参阅 createThumbnail/resize 函数） - 收集图像大小 when 生成缩略图。

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

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

【讨论】：

您认为创建具有限制的递归回调是获取此数据的更好解决方案吗？
@ShannonHochkins 否。获取信息的唯一正确方法是等待等待thumbnail 事件被触发。如果成功，这将在addedFile 事件之后的某个时间点被调用。

【解决方案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();
}

【讨论】：

【解决方案4】：

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

【讨论】：

请注意，当支持多个上传时，它似乎会为每个文件/缩略图组合触发。添加 uuid 检查可以解决：if(file.upload.uuid == thumbnail.upload.uuid) { /* do stuff here */ }

【解决方案5】：

我在完整的函数中使用了超时 50 毫秒，并且未定义消失了。

【讨论】：