JavaScript/HTML5/jQuery拖放上传 - "未捕获的TypeError:无法读取未定义的属性'文件'"

Question

在我有限制的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控制台会说:

未捕获的TypeError:无法读取未定义的属性"文件"

但是,从文件输入读取时,它可以获取FileList对象.

奇怪的是,当我登录事件参数(执行console.log(E)),它会记录它作为f.event,而在我的一个类似的脚本,它会记录它的MouseEvent(截图:HTTP://i.stack.imgur .com/3krcT.png)

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

Answer 1

如果files不存在的e.target,你正在寻找一个files上e.dataTransfer -但如果没有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 也并不存在,你会得到files作为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.target如果这是它在哪里,或者从dataTransfer物体的地方,我们发现它(上e,或上e.originalEvent).