我有一个问题:以下代码完美适用于 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);
非常感谢!