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

发布时间：2020-12-14 22:30:15 所属栏目：资源来源：网络整理

导读：我试图允许用户将包含 javascript文件的文件夹拖放到html 5页面.这就是我目前拥有的： $scope.files = [];//Establish dropzonevar dropbox;dropbox = document.getElementById("fileDragAndDrop");dropbox.addEventListener("dragenter",dragenter,false);d

我试图允许用户将包含 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 ...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!