HTML 5 文件阅读器读取 javaScript 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20683958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 File Reader reading javaScript files
提问by Ivan Bacher
Im trying to allow users to drag and drop a folder containing javascript files into an html 5 page. This is what i currently have:
我试图允许用户将包含 javascript 文件的文件夹拖放到 html 5 页面中。这是我目前拥有的：
$scope.files = [];
//Establish dropzone
var dropbox;
dropbox = document.getElementById("fileDragAndDrop");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
//Events
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
};
function dragover(e) {
e.stopPropagation();
e.preventDefault();
};
function drop(e) {
e.stopPropagation();
e.preventDefault();
var items = e.dataTransfer.items;
for (var i = 0, item; item = items[i]; i ++) {
var entry = item.webkitGetAsEntry();
if(entry) {
traverseFileTree(entry);
}
}
};
//resursive file walker
function traverseFileTree(item) {
if(item.isFile) {
$scope.$apply(function () {
$scope.files.push(item);
});
} else if (item.isDirectory) {
var dirReader = item.createReader();
dirReader.readEntries(function(entries) {
for (var i = 0; i < entries.length; i++) {
traverseFileTree(entries[i]);
}
});
}
};
So the dragging and dropping works, but im having problems reading the file content.
所以拖放工作，但我在读取文件内容时遇到问题。
$scope.parse = function () {
for(var i = 0; i < $scope.files.length; i++) {
var fileReader = new FileReader();
fileReader.onload = function (e) {
console.log(fileReader.result);
};
fileReader.onerror = function(err) {
console.log(err);
};
fileReader.readAsBinaryString($scope.files[i]);
}
};
I am not getting any error messages, which makes it hard to debug. Am i doing something wrong? has anyone had any issues doing similar tasks?
我没有收到任何错误消息，这使得调试变得困难。难道我做错了什么？有没有人在做类似的任务时遇到任何问题？
采纳答案by user13500
Not sure what your $scopeis but giving it a go.
不知道你$scope是什么，但试一试。
As you use webkitGetAsEntry()I assume this is for Chrome. From the looks of it your code shouldgive you an error. If it does not, there is likely something you have omitted. You should typically get something like:
在您使用时，webkitGetAsEntry()我假设这是针对 Chrome 的。从它的外观来看，您的代码应该会给您一个错误。如果没有，则您可能遗漏了某些内容。你通常应该得到类似的东西：
Uncaught TypeError: Failed to execute 'readAsBinaryString' on 'FileReader': The argument is not a Blob.
未捕获的类型错误：无法在“FileReader”上执行“readAsBinaryString”：参数不是 Blob。
in your $scope.parsefunction.
在你的$scope.parse函数中。
There is a few issues. One is that you probably would read files as textand not as binary string. Secondly readAsBinaryString()is deprecated, use readAsArrayBuffer()if you want to read binary data.
有几个问题。一是您可能会将文件作为文本而不是二进制字符串来读取。其次readAsBinaryString()已弃用，readAsArrayBuffer()如果您想读取二进制数据，请使用。
Further, the webkitGetAsEntry()returns a FileEntry, hence why you should get the error mentioned above. To read the file you could typically do:
此外，webkitGetAsEntry()返回 a FileEntry，因此您应该收到上述错误。要读取文件，您通常可以执行以下操作：
$scope.files[i].file(success_call_back, [error_call_back]);
For example:
例如：
function my_parser(file) {
var fileReader = new FileReader();
fileReader.onload = function (e) {
console.log(fileReader.result);
};
fileReader.onerror = function(err) {
console.log(err);
};
console.log('Read', file);
// Here you could (should) switch to another read operation
// such as text or binary array
fileReader.readAsBinaryString(file);
}
$scope.files[0].file(my_parser);
This will give you a Fileobject as argument to my_parser(). Then you could typically check .typeand use appropriate read function. (Though be aware of the slackness in MIME type. As in: do not rely on it, but use it as a hint.)
这将为您提供一个File对象作为my_parser(). 然后您通常可以检查.type并使用适当的读取功能。（尽管要注意 MIME 类型的松懈。例如：不要依赖它，而是将其用作提示。）
if (file.type.match(/application\/javascript|text\/.*/)) {
// Use text read
} else if (file.type.match(/^image\/.*/)) {
// Use binary read, read as dataURL etc.
} else ...
回答by nils
$scope.parse = function () {
for(var i = 0; i < $scope.files.length; i++) {
var fileReader = new FileReader();
fileReader.onload = function (e) {
console.log(fileReader.result);
};
fileReader.onerror = function(err) {
console.log(err);
};
fileReader.readAsText($scope.files[i]);
}
};
