HTML5拖放以使用本地htnl5文件上传目录[重复]

Posted 2023-05-08

【中文标题】HTML5拖放以使用本地htnl5文件上传目录[重复]

【英文标题】：HTML5 drag and drop for directory upload using local htnl5 file [duplicate]

【发布时间】：2013-08-09 00:57:53

【问题描述】：

我有一个问题：以下代码完美适用于 HTTP 服务器，但不适用于本地 html5 文件 (FILE:///)。

知道为什么吗？有什么建议允许文件拖放以进行目录上传吗？

CSS：

#drop_zone 
    font-size: 30px;
    text-align: center;
    width: 100%;
    height: 200px;
    border: 1px solid black;

HTML：

<div id="drop_zone">Drop files here</div>

javascript：

function error(e) 
    console.log('error');
    console.log(e);


function error_from_readentries(e) 
    console.log('error_from_readentries');
    console.log(e);


function traverseFileTree(item, path) 
    path = path || "";
    if (item.isFile) 
        // Get file
        item.file(function(file) 
            console.log("File: " + path + file.name);
        , error);
     else if (item.isDirectory) 
        // Get folder contents
        var dirReader = item.createReader();
        dirReader.readEntries(function(entries) 
            for (var i=0; i<entries.length; i++) 
                traverseFileTree(entries[i], path + item.name + "/")
            
        , error_from_readentries);
    


function handleFileSelect(evt) 
    evt.stopPropagation();
    evt.preventDefault();
        var items = evt.dataTransfer.items;
    for (var i = 0; i < items.length; i++) 
        var item = items[i].webkitGetAsEntry();
        if (item) 
            traverseFileTree(item);
        
    


function handleDragOver(evt) 
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy';


//Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

非常感谢！

【问题讨论】：

嗯，它适用于我。（是的，本地文件：//）我使用的是 chrome 27。编辑：Firefox 21 也适用。为了好玩，我尝试了 Opera 12，它也可以在那里工作。

我真的无法理解...我在 console.log 中一直有这个：error_from_readentries FileError code: 9, NOT_FOUND_ERR: 1, SECURITY_ERR: 2, ABORT_ERR: 3, NOT_READABLE_ERR: 4...

你用的是什么浏览器？哪个操作系统？

Chrome（版本 28.0.1500.95 m）和 Windows7 Home Premium 上的 Firefox(23.0)

用 Chrome 测试（版本 27.0.1453.110）：仍然无法正常工作...

【参考方案1】：

为什么：看起来 readEntries 在使用 FILE:// 协议时会引发错误。 webkit 或 Chrome 中的错误。 建议：很遗憾没有。

我正在使用 Chrome（版本 28.0.1500.95）

【讨论】：

那么你没有使用 webkit ;) Chrome 28 使用 blink 而不是 webkit。对于你所说的，我想这可能是眨眼的错误。

是的，可能是眨眼间的回归……;)