問題描述

我會提前告知您，我的 JavaScript 經驗有限.<小時>目前，我有 JavaScript 代碼:

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

$('#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)

...和 ??HTML:

...and the HTML:

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

但是，當我將文件拖入其中時，Chrome JS 控制臺會顯示:

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

未捕獲的類型錯誤:無法讀取未定義的屬性文件"

Uncaught TypeError: Cannot read property 'files' of undefined

然而，它可以在從文件輸入讀取時獲取 FileList 對象.

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

奇怪的是，當我記錄事件參數(console.log(e))時，它會將其記錄為 f.event，而在我的類似腳本中，它會將其記錄為 MouseEvent(屏幕截圖:http://i.stack.imgur.com/3krcT.png)

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)

與 jQuery 中的 bind() 函數不同，this 使用 getElementById() 返回的 DOM 對象的 addEventListener() 函數，IE this 是純 JavaScript.我已經嘗試過這種方法，但沒有任何新變化.

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.

推薦答案

如果 e.target 上不存在 files，則您正在尋找 e.dataTransfer上的>文件 —但是如果 e 上沒有 dataTransfer 屬性(并且您的屏幕截圖中似乎沒有)，您將嘗試取消引用 undefined，導致此錯誤.

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.

我將代碼更改為:

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 also 不存在，您將獲取 files 為 undefined，而不是錯誤.

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.

jQuery 為您提供的事件對象是由 jQuery 創建和規范化的.由于我們知道該事件對象上不存在 e.dataTransfer (從您的屏幕截圖中)，我的猜測是它不是 jQuery 從原始事件對象復制的屬性之一.不過沒關系，因為 jQuery 允許我們通過 e.originalEvent 訪問原始事件.所以我會嘗試:

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

它從 e.target 中獲取 files 如果它在哪里，或者從 dataTransfer 對象中我們找到它的任何地方(在 e，或在 e.originalEvent).

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 拖放上傳 - “未捕獲的類型錯誤:無法讀取未定義的屬性‘文件’"的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！