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

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

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

解决方法

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

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

Uncaught TypeError: Failed to execute ‘readAsBinaryString’ on ‘FileReader’: The argument is not a Blob.

在你的$scope.parse函数中.

有一些问题.一个是你可能会读取files as text而不是二进制字符串.其次,不推荐使用readAsBinaryString(),如果要读取二进制数据,请使用readAsArrayBuffer().

此外,webkitGetAsEntry()返回一个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 ...

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

解决方法

猜你在找的HTML相关文章