JavaScript / HTML5 / jQuery拖放上传 - “未捕获类型错误：无法读取未定义的属性”文件“ [英] JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Uncaught TypeError: Cannot read property 'files' of undefined"

问题描述

我以前会建议你，我的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]）; 
} 
  

（某些代码省略，但如果您请求，我将添加更多） / p>

...和HTML：

 < div class = fileboxid =xhr-filebox> 
< p id =xhr-action> ...或点击我选择一个。< / p> 
< / div> 
  

但是，当我拖动文件时，Chrome JS控制台会说：

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

它可以从文件输入中读取FileList对象。

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

与jQuery中的bind（）函数不同，它使用addEventListener（）函数的一个DOM对象返回的getElementById（），IE这是纯JavaScript。我已经尝试了这种方法，但没有新的发生。

解决方案

如果文件在 e.target 中不存在，您正在 e上寻找文件 .dataTransfer  —但是如果 e 中没有 dataTransfer 属性（而且屏幕截图中似乎没有）尝试取消引用 undefined ，导致此错误。

我将代码更改为：

  function HandleDropEvent（e）{
 var files = e.target.files || （e.dataTransfer& amp; e.dataTransfer.files）; 
 if（files）{
 UploadFile（files [0]）; 
} 
 else {
 //也许某种消息在这里
} 
} 
  

这样，如果 e.target.files 不存在， e.dataTransfer 也不存在，您将获得文件为 undefined ，而不是错误。

---

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

  function HandleDropEvent（e）{
 var dt = e.dataTransfer || （e.originalEvent& amp; e.originalEvent.dataTransfer）; 
 var files = e.target.files || （dt& dt.files）; 
 if（files）{
 UploadFile（files [0]）; 
} 
 else {
 //也许某种消息在这里
} 
} 
  

从 e.target 中获取文件如果这是，或从 dataTransfer 对象，无论我们在哪里找到它（在 e 或 e。 originalEvent ）。

I will advise you prior that I have limited JavaScript experience.

---

Currently, I have the JavaScript code:

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

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

(some code is omitted, but I will add more if you request)

...and the HTML:

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

However, when I drag a file into it, the Chrome JS console says this:

Uncaught TypeError: Cannot read property 'files' of undefined

It can however get the FileList object when reading from a file input.

Curiously, when I log the event argument ( console.log(e) ), it logs it as f.event, whereas in a similar script of mine, it logs it as MouseEvent (screenshot: http://i.stack.imgur.com/3krcT.png)

Unlike the bind() function in jQuery, this uses the addEventListener() function of a DOM object returned by getElementById(), IE this is pure JavaScript. I have tried that method but nothing new happens.

解决方案

If files doesn't exist on e.target, you're looking for a files on e.dataTransfer — but if there's no dataTransfer property on e (and there doesn't seem to be in your screenshot) you'll try to dereference undefined, resulting in this error.

I'd change the code to:

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

That way, if e.target.files doesn't exist and e.dataTransfer also doesn't exist, you'll get files being undefined, rather than an error.

---

The event object that jQuery gives you is created and normalized by jQuery. Since we know e.dataTransfer doesn't exist on that event object (from your screenshot), my guess is that it's not one of the properties jQuery copies over from the original event object. That's okay, though, because jQuery gives us access to the original event via e.originalEvent. So I'd try:

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

That grabs files from e.target if that's where it is, or from the dataTransfer object wherever we find it (on e, or on e.originalEvent).

这篇关于JavaScript / HTML5 / jQuery拖放上传 - “未捕获类型错误：无法读取未定义的属性”文件“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！