选择 &删除要解析的文件和/或文件夹 [英] Select & Drop Files and/or Folders to be parsed
本文介绍了选择 &删除要解析的文件和/或文件夹的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用了 SO 上一篇帖子中的一部分(虽然我不记得了)来解析 Chrome 上的文件和文件夹，但我无法让它在 Firefox 上运行(说实话我没有在其他人身上试过，虽然我认为它也不适用于 safari).
这是 2 个指令，ngDrop 和 input.
angular.module('myApp').directive("ngDrop", function($rootScope) {var 链接 = 函数($scope，元素，属性，ngModel){var parseInput = 函数(事件){变量列表 = [];$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 = 函数(入口){var reader = entry.createReader();//遍历整个目录时解析返回新的承诺(函数执行者(resolve_directory){var 迭代尝试 = [];(函数读取条目(){//根据 FileSystem API 规范，必须调用 readEntries() 直到//它使用空数组调用回调.严重地??reader.readEntries(function(entries) {如果(！条目.长度){//完成对这个特定目录的迭代resolve_directory(Promise.all(iteration_attempts));} 别的 {//为每个目录条目添加一个承诺列表.如果条目本身//一个目录，那么在完全遍历它之前该承诺不会解析.迭代尝试.push(Promise.all(entries.map(function(entry) {如果(条目.isFile){list.push(entry);返回条目；} 别的 {返回 traverse_directory(entry);}})));//根据规范，尝试为同一个目录再次调用 readEntries()读取条目()；}});})();});};var updateNgModel = function() {var 文件 = []，计数 = 0；for (var i = 0; i < list.length; i++) {列表[i].文件(函数(文件){文件推送(文件)；计数++；if (count === list.length) {ngModel.$setViewValue(文件);}});}};for (var j = 0; j 关于实现，这就是我如何使用它们:
<input type="file" ng-model="files" webkitdirectory multiple><h2><i class="fa fa-upload"></i>把图片放在这里！</h2><div>或者只需单击以选择文件.</div>这两个指令主要用于填充 ngModel.
现在当我在 FF 中拖放时:TypeError: event.dataTransfer.items is undefined当我选择:TypeError: list is null
我可以更改什么才能使其在 Chrome 和 Firefox 上运行，为什么不能同时在其他浏览器上运行?
解决方案
Nightly 45+ 支持目录上传.请参阅Firefox 是否支持文件夹上传?
window.onload = function() {document.querySelector("input").onchange = function(e) {var uploadFile = 函数(文件，路径){//处理文件上传控制台日志(文件，路径)};var iterateFilesAndDirs = function(filesAndDirs, path) {for (var i = 0; i < filesAndDirs.length; i++) {if (typeof filesAndDirs[i].getFilesAndDirectories === "function") {var path = filesAndDirs[i].path;//这种递归可以深入遍历目录filesAndDirs[i].getFilesAndDirectories().then(function(subFilesAndDirs){//遍历子目录中的文件和目录iterateFilesAndDirs(subFilesAndDirs, path);});} 别的 {上传文件(文件和目录[i]，路径)；}}};如果(e.target 中的getFilesAndDirectories"){e.target.getFilesAndDirectories().then(function(filesAndDirs) {iterateFilesAndDirs(filesAndDirs, "/");})} 别的 {//做 webkit 的东西}}}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屋！
查看全文
