通過FileReader（）JavaScript獲取文件內容

Question

我正在嘗試使用FileReader（）和JavaScript獲取文件內容。

我找到了這個答案： https : //stackoverflow.com/a/21962101/2898694

正如@Markasoftware在評論中所說，我正在嘗試將結果保存到var。

function readSingleFile(evt) {
        //Retrieve the first (and only!) File from the FileList object
        var myFile = evt.target.files[0];
        var reader = new FileReader();
        var result;
        reader.readAsText(myFile);
        reader.onload=function(){ 
             result = reader.result; 
             console.log(result); // works
        }
        console.log(result); // not works
    }

如果我試圖在onload處理程序中查看所有內容，但是從中看不到結果。 為什么？

Answer 1

因為onload運行異步。 console.log(result); // not works console.log(result); // not works在onload事件觸發之前， console.log(result); // not works執行。

關於此的更多信息：如何從異步調用返回響應？

Answer 2

例

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewImage() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
            oFReader.onload = function (oFREvent) {
                var sizef = document.getElementById('uploadImage').files[0].size;
                document.getElementById("uploadPreview").src = oFREvent.target.result;
                document.getElementById("uploadImageValue").value = oFREvent.target.result; 
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var imgUrl = $('#uploadImageValue').val();
                alert(imgUrl);
            });
        });
        </script>
        <div>
            <input type="hidden" id="uploadImageValue" name="uploadImageValue" value="" />
            <img id="uploadPreview" style="width: 150px; height: 150px;" /><br />
            <input id="uploadImage" style="width:120px" type="file" size="10" accept="image/jpeg,image/gif, image/png" name="myPhoto" onchange="PreviewImage();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>

通過FileReader（）JavaScript獲取文件內容

問題描述

2 個解決方案

解決方案1
0 2014-04-12 14:38:42

解決方案2
0 2015-02-19 10:33:24

通過FileReader（）JavaScript獲取文件內容

問題描述

2 個解決方案

解決方案1 0 2014-04-12 14:38:42

解決方案2 0 2015-02-19 10:33:24

解決方案1
0 2014-04-12 14:38:42

解決方案2
0 2015-02-19 10:33:24