等待加载文件(onload JavaScript)

时间:2012-08-23 11:55:37

标签: javascript file onload wait filereader

我想从文件中读取文本并将其返回到函数中。所以这是我的代码的重要部分:

        function getFileRequest(id, contentType, callback) {
        var val = "x";      

        if (window.File && window.FileReader && window.FileList && window.Blob) {
            var element = document.getElementById(id);

            var file = element.files[0]; 
            if(file != null) {      
                if(file.type.match("text/xml")){
                    var r;
                    r = new FileReader();

                    r.onload = function (e) {
                        val = e.target.result;                    

                    }                   
                    r.readAsText(file);
                }
                else
                    alert("Wrong file format");
            }

        } else {
            alert('The File APIs are not fully supported by your browser.');
        }

        alert(val);
        if(val == null)
                return "";
            else
                return getRequestBody(id,contentType,val);  

    }

我想将文本传递给名为“val”的变量。但是,至少在我看来,alert(val)总是显示默认的“x”,因为可能它不等待onload函数被执行。我是对的吗? 那么如何才能访问该文本?有没有办法等待执行?

1 个答案:

答案 0 :(得分:8)

当然警报不在onload函数中,因此立即调用。

您可以这样做:

        var val = "x";      
        //... code to load a file variable
        var r;
        r = new FileReader();

        r.onload = function (e) {
            val = e.target.result;  
            r.readAsText(file);
            alert(val);
        };  

您不能等待并停止执行代码,因此一般的想法是使用回调来推迟它。

假设您显示的代码实际上是分两部分完成的,一部分是文件操作,另一部分是使用它,它可能是这样的:

function fetchVal(callback) {
        var val = "x";      
        //... code to load a file variable
        var r;
        r = new FileReader();
        r.onload = function (e) {
            val = e.target.result;  
            r.readAsText(file);
            callback(val);
        };  
}

fetchVal(function(val){
   alert(val);
   // use val
});