0
我已經使用了一篇文章在SO（我不記得它雖然）解析文件和文件夾在Chrome上，但我不能讓它工作在Firefox上（說實話我沒有嘗試過其他人，但我認爲它不適用於safari）。選擇和刪除文件和/或要解析的文件夾
下面是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，爲什麼工作不，還其他瀏覽器在同一時間？
不能確定'angularjs'部分; [這個答案]（http://stackoverflow.com/a/36828612）應該解決閱讀目錄和問題的文件部分。 – guest271314