javascript - 使用本地 htnl5 文件进行目录上传的 HTML5 拖放

Question

我有一个问题：以下代码完美适用于 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);

非常感谢！

Answer 1

原因：看起来 readEntries 在使用 FILE:// 协议时会引发错误。webkit 或 Chrome 中的错误。建议：不幸的是没有。

我正在使用 Chrome（版本 28.0.1500.95）