event.dataTransfer.files在firefox中未定义

event.dataTransfer.files undefined in firefox

本文关键字：未定义 firefox dataTransfer files event      更新时间：2023-09-26

我正在为我的一个项目添加拖放功能，但我遇到了firefox的问题。

我正在测试这种情况的代码是：

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

为了测试，我将一个文件拖到我的folder_files分区中。在chrome（版本16）中，会弹出带有文件名fine的警报。对于firefox（版本8），我会得到未定义。有什么想法吗？

发现问题。在转储对象中的所有内容后，我可以看到chrome得到的数据与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]
}"

我没有在代码中使用fileName/fileSize/fileType，而是开始使用name/size/type。

您可以添加下面这样的normalize函数来支持两者：

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