我已经在帖子中使用了帖子中的一部分（我无法记住）来解析Chrome上的文件和文件夹，但我无法让它在Firefox上工作（说实话）我没有尝试过其他人，但我认为它也不适用于野生动物园。）
这里有2个指令，ngDrop和输入。
angular.module('myApp').directive("ngDrop", function($rootScope) {
var link = function($scope, elements, attr, ngModel) {
var parseInput = function(event) {
var list = [];
$scope.count = 0;
var toParse = [];
for (var i = 0; i < event.dataTransfer.items.length; i++) {
toParse.push(event.dataTransfer.items[i].webkitGetAsEntry());
}
var traverse_directory = function(entry) {
var reader = entry.createReader();
// Resolved when the entire directory is traversed
return new Promise(function executer(resolve_directory) {
var iteration_attempts = [];
(function read_entries() {
// According to the FileSystem API spec, readEntries() must be called until
// it calls the callback with an empty array. Seriously??
reader.readEntries(function(entries) {
if (!entries.length) {
// Done iterating this particular directory
resolve_directory(Promise.all(iteration_attempts));
} else {
// Add a list of promises for each directory entry. If the entry is itself
// a directory, then that promise won't resolve until it is fully traversed.
iteration_attempts.push(Promise.all(entries.map(function(entry) {
if (entry.isFile) {
list.push(entry);
return entry;
} else {
return traverse_directory(entry);
}
})));
// Try calling readEntries() again for the same dir, according to spec
read_entries();
}
});
})();
});
};
var updateNgModel = function() {
var files = [], count = 0;
for (var i = 0; i < list.length; i++) {
list[i].file(function(file) {
files.push(file);
count++;
if (count === list.length) {
ngModel.$setViewValue(files);
}
});
}
};
for (var j = 0; j < toParse.length; j++) {
if (toParse[j].isFile) {
list.push(toParse[j]);
} else if (toParse[j].isDirectory) {
$scope.count++;
traverse_directory(toParse[j]).then(function() {
$scope.count--;
if ($scope.count == 0) {
updateNgModel();
}
});
}
}
if ($scope.count == 0) {
updateNgModel();
}
}
elements[0].ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
// ... styling
parseInput(event);
};
elements[0].ondragover = function(event) {
event.preventDefault();
};
};
return {
restrict: 'A',
require:"^ngModel",
link: link
};
});
// select file on input
angular.module('myApp').directive("input", function($rootScope) {
var link = function($scope, elements, attr, ngModel) {
if (attr.type && attr.type.toLowerCase() === 'file') {
elements[0].onchange = function(event) {
var list = event.__files_ || (event.target && event.target.files);
var files = [];
for (var i = 0; i < list.length; i++) {
files.push(list[i]);
}
ngModel.$setViewValue(files);
};
}
};
return {
restrict: 'E',
require:"^ngModel",
link: link
};
});
关于实施，这是我使用它们的方式：
<div class="dropzone" ng-model="files" ng-drop>
<input type="file" ng-model="files" webkitdirectory multiple>
<h2><i class="fa fa-upload"></i> Drop Images Here !</h2>
<div>Or just click to select files.</div>
</div>
这两个指令主要用于填充ngModel。
现在当我在FF中拖放时：TypeError: event.dataTransfer.items is undefined
当我选择：TypeError: list is null
我可以更改哪些内容可以在Chrome和Firefox上运行，为什么不同时使用其他浏览器？
答案 0 :(得分：0)
我可以更改哪些内容以使其适用于Chrome和Firefox
注意，firefox目前不支持directory元素的input type="file"属性来读取上传的文件夹; .webkitGetAsEntry()不是Firefox支持的方法。
尝试使用设置了<input type="file">，multiple属性的webkitdirectory; <input type="radio">供用户选择文件夹或文件上传到webkitdirectory元素的切换input type="file"属性。 Can't select files when webkitdirectory is present on <input type="file" />，Allow chrome to select both/either directory or files。
window.onload = function() {
var results = document.getElementById("results");
var dropped = document.getElementById("filesDropped");
var file = document.getElementById("file");
var files = document.getElementById("files");
var folder = document.getElementById("folder");
document.getElementById("type").onchange = function(e) {
file[(files.checked ? "remove" : "set")
+ "Attribute"]("webkitdirectory", true)
}
file.onchange = function(e) {
results.innerHTML = "";
e.preventDefault();
e.stopImmediatePropagation();
var files = e.target.files;
dropped.innerHTML = files.length;
for (var i = 0; i < files.length; i++) {
if (/image/.test(files[i].type)) {
(function(j) {
var img = new Image;
img.onload = function() {
console.log(files[j]);
var figure = document.createElement("figure");
var figcaption = document.createElement("figcaption");
figcaption.innerHTML = files[j].name;
figure.appendChild(figcaption);
figure.appendChild(img);
results.appendChild(figure);
URL.revokeObjectURL(url);
}
var url = URL.createObjectURL(files[j]);
img.src = url;
}(i))
} else {
console.log(files[i].type, files[i])
}
}
results.style.width = width;
}
}#dropzone {
padding: 0px;
margin: 0px;
width: 400px;
height: 300px;
border: 2px dotted green;
}
#dropzone:hover {
border: 4px dotted blue;
}
#dropzone input {
width: 400px !important;
height: 300px !important;
opacity: 0;
}
#results {
position: relative;
display: block;
width: auto;
min-height: 50px;
}
#filesDropped:after {
content: " Files dropped:";
}
figure,
figcaption {
display: block;
position: relative;
width: 100%;
}<span id="filesDropped"></span>
<div id="results"></div>
<br>
<span id="type">Drop files <input id="files" name="type" type="radio"> folder <input checked id="folder" name="type" type="radio">:</span>
<div id="dropzone">
<input id="file" type="file" multiple webkitdirectory/>
</div>
答案 1 :(得分：0)
夜间45+支持目录上传。见Does Firefox support folder upload?
window.onload = function() {
document.querySelector("input").onchange = function(e) {
var uploadFile = function(file, path) {
// handle file uploading
console.log(file, path)
};
var iterateFilesAndDirs = function(filesAndDirs, path) {
for (var i = 0; i < filesAndDirs.length; i++) {
if (typeof filesAndDirs[i].getFilesAndDirectories === "function") {
var path = filesAndDirs[i].path;
// this recursion enables deep traversal of directories
filesAndDirs[i].getFilesAndDirectories().then(function(subFilesAndDirs) {
// iterate through files and directories in sub-directory
iterateFilesAndDirs(subFilesAndDirs, path);
});
} else {
uploadFile(filesAndDirs[i], path);
}
}
};
if ("getFilesAndDirectories" in e.target) {
e.target.getFilesAndDirectories()
.then(function(filesAndDirs) {
iterateFilesAndDirs(filesAndDirs, "/");
})
} else {
// do webkit stuff
}
}
}<input type="file" webkitdirectory allowdirs directory />