event.dataTransfer.filesがfirefoxで未定義

Question

私のプロジェクトにドラッグドロップ機能を追加していますが、Firefoxに問題が発生しています。私はこのような状況をテストしてい

私のコードは次のとおりです。テストするには

document.getElementById("folder_files").addEventListener("drop", function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    alert(event.dataTransfer.files[0].fileName); 
}, false); 

、私は私のfolder_files divのにファイルをドラッグしています。クローム（バージョン16）では、アラートはファイル名が正しく表示されます。 firefox（バージョン8）では、私は定義されていません。ここで何が起こっているかについてのアイデアは？

Answer 1

問題が見つかりました。オブジェクトのすべてをダンプした後、私はクロムがfirefoxとは異なるデータを取得していたことがわかりました。何クロムを

を得ていた。

'0' ... 
     'size' => "30379" 
     'lastModifiedDate' ... 
     'fileSize' => "30379" 
     'name' => "bg.png" 
     'type' => "image/png" 
     'webkitRelativePath' => "" 
     'fileName' => "bg.png" 
     'webkitSlice' => "function webkitSlice() { [native code] }" 
    'length' => "1" 
    'item' => "function item() { [native code] }" 

Firefoxはなっていたもの：

0' ... 
     'size' => "30379" 
     'type' => "image/png" 
     'mozSlice' => "function mozSlice() { 
    [native code] 
}" 
     'name' => "bg.png" 
     'mozFullPath' => "" 
    'length' => "1" 
    'item' => "function item() { 
    [native code] 
}" 

を代わりに私のコードでファイル名/ファイルサイズ/のfileTypeを使用するので、私はちょうど名前/サイズ/タイプを使用して開始しました。あなたは両方をサポートするには、以下のようなノーマライズ機能を追加することができます

Answer 2

：

// File Normalization for Firefox support: 
_normalizeFunction: function (file) { 
    if (file.name === undefined && file.size === undefined) { 
     file.name = file.fileName; 
     file.size = file.fileSize; 
    } 
},