选择&删除要分析的文件和/或文件夹 [英] Select & Drop Files and/or Folders to be parsed
本文介绍了选择&删除要分析的文件和/或文件夹的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用了一篇帖子来讨论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（）;
//解析整个目录ectory被遍历
返回新的Promise（函数执行器（resolve_directory）{
var iteration_attempts = [];
（函数read_entries（）{
//根据FileSystem API规范，readEntries（）必须被调用，直到
//它用一个空数组调用回调。 $ b reader.readEntries（函数（entries）{
if（！entries.length）{
//完成迭代此特定目录
resolve_directory（Promise.all（iteration_attempts））;
} else {
//为每个目录条目添加一个promise列表，如果这个条目本身是
//一个目录，那么这个promise将会被解析，直到完全遍历。 $ b iteration_attempts.push（Promise.all（entries.map（function（entry）{
if（entry.isFile）{
list.push（条目）;
返回入口;
} else {
return traverse_directory（entry）;
}
}）））;
//根据spec
read_entries（）;再次尝试调用readEntries（）以获得相同的目录。
}
}）;
}）（）;
}）;
};
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）;
}
}）;
}
}; （var j = 0; j
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（）;
元素[0] .ondrop = function（event）{
event.stopPropagation（）;
event.preventDefault（）;
// ...造型
parseInput（event）;
};
$ b元素[0] .ondragover =函数（事件）{
event.preventDefault（）;
};
};
return {
restrict：'A'，
require：^ ngModel，
link：link
};
}）;
$ b $ //输入文件
angular.module（'myApp'）。directive（input，function（$ rootScope）{
var link = function（$ scope ，元素，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）;
};
$;
返回{
restrict：'E'，
需要：^ ngModel，
链接：link
};
}）;
关于实现，我使用它们：
< div class =dropzoneng-model =filesng-drop>
< input type =fileng-model =fileswebkitdirectory multiple>
< h2>< i class =fa fa-upload>< / i>在此处放置图片！< / h2>
< div>或者只需点击选择文件。< / div>
< / div>
这两个指令主要是用来填充ngModel的。
现在，当我在FF中拖放时： TypeError：event.dataTransfer.items未定义
当我选择： TypeError：list是空的
我可以改变什么来使它在Chrome和Firefox上都能正常工作，为什么不能在同一时间同时使用其他浏览器？
解决方案
Nightly 45+支持目录上传。请参见 Firefox是否支持文件夹上传？
（）输入文件中的文件名称（输入）。onchange = function（e）{var uploadFile =功能（文件，路径）{/ /处理文件上传console.log（文件，路径）}; var iterateFilesAndDirs = function（filesAndDirs，path）{for（var i = 0; i< filesAndDirs.length; i ++）{if（typeof filesAndDirs [i] .getFilesAndDirectories ===function）{var path = filesAndDirs [i ]。路径; //这个递归实现了深度遍历目录filesAndDirs [i] .getFilesAndDirectories（）。then（function（subFilesAndDirs）{//遍历子目录中的文件和目录iterateFilesAndDirs（subFilesAndDirs，path）;}）; } else {uploadFile（filesAndDirs [i]，path）; }}}; if（getFilesAndDirectoriesin e.target）{e.target.getFilesAndDirectories（）.then（function（filesAndDirs）{iterateFilesAndDirs（filesAndDirs，/）;}）} else {// do webkit stuff}}} code> < code>< input type =filewebkitdirectory allowdirs directory />
plnkr http://plnkr.co/edit/DSUeZiW4JjvxmRrFnqN0?p=preview
I've used a part from a post here on SO ( I can't remember it though ) to parse files and folders on Chrome, but I cannot get it to work on Firefox (and to be honest I haven't tried it on others, though I think it doesn't work on safari either).
Here's the 2 directives, ngDrop and input.
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
};
});
About the implementation, this is how I use them :
<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>
Both of the directives are primarily used to fill the ngModel.
Now when I drag/drop in FF : TypeError: event.dataTransfer.items is undefined
and when I select : TypeError: list is null
What can I change to get it to work on both Chrome and Firefox, and why not, also other browsers at the same time ?
解决方案
Nightly 45+ supports directory upload. See 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 />
plnkr http://plnkr.co/edit/DSUeZiW4JjvxmRrFnqN0?p=preview
这篇关于选择&删除要分析的文件和/或文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
