12

我会事先告知您，我的 JavaScript 经验有限。

目前，我有 JavaScript 代码：

$('#xhr-filebox').bind({
    "dragover": HandleDragEvent,
    "dragleave": HandleDragEvent,
    "drop": HandleDropEvent
});

function HandleDropEvent(e){
    var files = e.target.files || e.dataTransfer.files;
    UploadFile(files[0]);
}

（有些代码省略了，但如果您要求我会添加更多）

...和 ​​HTML：

<div class="filebox" id="xhr-filebox">
    <p id="xhr-action">...or click me to pick one.</p>
</div>

但是，当我将文件拖入其中时，Chrome JS 控制台会这样说：

未捕获的类型错误：无法读取未定义的属性“文件”

但是，它可以在从文件输入读取时获取 FileList 对象。

奇怪的是，当我记录事件参数（ console.log(e) ）时，它将它记录为 f.event，而在我的类似脚本中，它将它记录为 MouseEvent （屏幕截图：http://i.stack.imgur .com/3krcT.png )

与 jQuery 中的 bind() 函数不同，this 使用 getElementById() 返回的 DOM 对象的 addEventListener() 函数，IE this 是纯 JavaScript。我已经尝试过这种方法，但没有任何新的事情发生。

4

2 回答 2

19

如果files不存在 on e.target，则您正在寻找fileson e.dataTransfer ——但如果 on 没有dataTransfer属性e（并且您的屏幕截图中似乎没有），您将尝试取消引用undefined，从而导致此错误。

我将代码更改为：

function HandleDropEvent(e){
    var files = e.target.files || (e.dataTransfer && e.dataTransfer.files);
    if (files) {
        UploadFile(files[0]);
    }
    else {
        // Perhaps some kind of message here
    }
}

这样，如果e.target.files不存在且e.dataTransfer 也不存在，您将得到filesbeing undefined，而不是错误。

jQuery 为您提供的事件对象是由 jQuery 创建和规范化的。由于我们知道e.dataTransfer该事件对象上不存在（从您的屏幕截图中），我猜它不是 jQuery 从原始事件对象复制的属性之一。不过没关系，因为 jQuery 让我们可以通过e.originalEvent. 所以我会尝试：

function HandleDropEvent(e){
    var dt = e.dataTransfer || (e.originalEvent && e.originalEvent.dataTransfer);
    var files = e.target.files || (dt && dt.files);
    if (files) {
        UploadFile(files[0]);
    }
    else {
        // Perhaps some kind of message here
    }
}

如果那是它所在的位置，或者从我们找到它的files任何位置（在 上，或在 上）中抓取。e.targetdataTransferee.originalEvent

于 2012-05-30T09:30:40.690 回答
2

在过去的几年里，我一直在使用以下代码：

var files = e.target.files || 
(e.dataTransfer ? e.dataTransfer.files : e.originalEvent.dataTransfer.files);

但是，我最近在使用 Chrome 时遇到了一个问题，其中 e.target.files 存在但长度为 0 导致文件为空，即使 dataTransfer 确实有删除的文件。

所以，我不得不使用稍微不同的检查：

var files = e.target.files;
if (!files || files.length === 0)
    files = (e.dataTransfer ? e.dataTransfer.files : e.originalEvent.dataTransfer.files);

希望这可以帮助其他人。

于 2017-02-17T15:02:52.093 回答