HTML 5文件阅读器读取javaScript文件

Question

我试图允许用户将包含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]);
            }
        });
    }
};

所以拖放工作,但我有阅读文件内容的问题.

$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]);
    }
};

我没有收到任何错误消息,这使得调试很困难.难道我做错了什么？有没有人有任何问题做类似的任务？

Answer 1

不确定你的$scope是什么但是试一试.

当你使用webkitGetAsEntry()我假设这是为Chrome.从它的外观来看,你的代码应该给你一个错误.如果没有,可能会遗漏一些东西.你通常应该得到类似的东西:

未捕获的TypeError:无法在'FileReader'上执行'readAsBinaryString':参数不是Blob.

在你的$scope.parse功能.

有一些问题.一个是你可能会将文件读作文本而不是二进制字符串.其次readAsBinaryString()是不推荐使用,readAsArrayBuffer()如果要读取二进制数据则使用.

此外,webkitGetAsEntry()返回a FileEntry,因此你应该得到上面提到的错误.要读取您通常可以执行的文件:

$scope.files[i].file(success_call_back, [error_call_back]);

例如:

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);

这会给你一个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 ...