Question

这是我在AngularJS中读取本地文件的代码。

var files = document.getElementById("file");

files.addEventListener("change", handleFile, false);

function handleFile(event) {
    SpinnerService.upload(); // Show loading spinner

    var file = event.target.files[0];
    var reader = new FileReader();

    $timeout(function() {
        scope.readyState = reader.readyState;
    });

    reader.onload = function(event) {
        // Read the file
    };

    reader.readAsArrayBuffer(file);

    scope.$watch("readyState", function(newVal) {
        if (newVal == 2) {
            SpinnerService.hide(); // Hide loading spinner
        }
    })
}

在阅读文件时，reader.readyState将从0更改为1，然后更改为2.（https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readyState）。

我的代码成功读取了该文件。但是，$watch上的readyState不起作用。有没有办法观察readyState的变化？谢谢你的帮助！

Answer 1

我建议再次在处理程序功能中设置监视，因为它会在每次触发时添加新监视。然后将scope.readyState设置为reader.readyState，这是一个实际值，有点像设置x = 2并等待它改变为别的东西。

试试这个：

// new empty object
scope.reader = {}

var files = document.getElementById("file");
files.addEventListener("change", handleFile, false);

// set watch on object property
scope.$watch("reader.readyState", function(newVal) {
    if (newVal == 2) {
        SpinnerService.hide(); // Hide loading spinner
    }
})

function handleFile(event) {
     SpinnerService.upload(); // Show loading spinner

     var file = event.target.files[0];
     var reader = new FileReader();

     // set object to reader
     scope.reader = reader;

     reader.onload = function(event) {
         // Read the file
     };

     reader.readAsArrayBuffer(file);
 }

另外我认为wero的评论是最好的解决方案

AngularJS监视FileReader（）。readyState更改

1 个答案: