JavaScript/HTML5/jQuery拖放上傳 - 「未捕獲TypeError：無法讀取未定義的屬性'文件'

我之前會告訴您我的JavaScript經驗有限。 JavaScript/HTML5/jQuery拖放上傳 - 「未捕獲TypeError：無法讀取未定義的屬性'文件'

目前，我的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控制檯說：

Uncaught TypeError: Cannot read property 'files' of undefined

但是，從文件輸入中讀取時，它可以獲取FileList對象。

奇怪的是，當我登錄事件參數（執行console.log（E）），它會記錄它作爲f.event，而在我的一個類似的腳本，它會記錄它的MouseEvent（截圖：http://i.stack.imgur.com/3krcT.png）

與jQuery中的bind（）函數不同，它使用由getElementById（）返回的DOM對象的addEventListener（）函數，IE爲純JavaScript。我試過這種方法，但沒有發生新的事情。

來源

2012-05-30 svbnet

可以請你看看我的問題http://stackoverflow.com/questions/27898745/how-to-get-the-filename-in-javascript-from-input-file-tag-in-ie-browser。 ..謝謝 – Hitesh

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

，抓住從e.targetfiles如果這是它在哪裏，或者從dataTransfer對象的地方，我們發現它（在e，或e.originalEvent）。

來源

2012-05-30 09:30:40

我**知道文件對象存在，只是我認爲Chrome並沒有將它傳遞給函數。 – svbnet

@Joe：我的觀點是，你的代碼是解除引用'undefined'，這就是你得到錯誤的原因。我添加了一個想法：我懷疑你正在尋找'e.originalEvent.dataTransfer.files'。 –

這很好用;謝謝！！！ – svbnet

我已經使用過去幾年下面的代碼一直是：

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 : .originalEvent.dataTransfer.files);

Hopefuly這可以幫助別人。

來源

2017-02-17 15:02:52

JavaScript/HTML5/jQuery拖放上傳 - 「未捕獲TypeError：無法讀取未定義的屬性'文件'

回答

相關問題