的JavaScript / HTML5 / jQuery的拖放和拖放上传 - “遗漏的类型错误：无法

我会先告诉你，我有限的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>

然而，当我将文件拖到它的浏览器JS控制台这样说：

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

从文件中读取输入的时候，可以得到但在文件列表对象。

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

不像在jQuery的绑定（）函数，这使用）通过的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 ）。

Answer 2:

我一直在使用过去几年下面的代码：

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

不过，我已经使用Chrome，其中e.target.files在那里的以0长度造成文件是即使数据传递的确有被丢弃的文件空最近碰到的一个问题。

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

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

Hopefuly这可以帮助别人。

文章来源: JavaScript/HTML5/jQuery Drag-And-Drop Upload - “Uncaught TypeError: Cannot read property 'files' of undefined”