FileReader.result返回null [英] FileReader.result return null
问题描述
我正在尝试建立一个页面，该页面可让您上传txt文件(即另一个程序生成的日志文件)，然后进一步处理文本.到目前为止，我只想用console.log记录文本，但是稍后我打算分开行并从中获取一些细节来运行程序.
I'm trying to setup a page that lets you upload a txt file (namely a log file that another program generates), and then manipulate the text further. So far I just want to console.log the text, but later on I'm planning to separate lines and get some specifics out of it to run my program.
无论如何，当我上传日志文件时，我得到以下信息: 空
Anyway, when I upload my log file I get the following: null
$("#draftlog").change(function() {
var logFile = $('#draftlog').get(0).files[0];
var reader = new FileReader;
reader.readAsText(logFile);
var rawLog = reader.result;
console.log(rawLog);
});
body {
margin: 0;
min-width: 1200px;
}
.pickscontainer {
margin-left: 5%;
width: 90%;
border: 1px solid black;
}
.cardbox {
margin: 1px;
border: 2px solid black;
border-radius: 5px;
width: auto;
display: inline-block;
}
.card {
width: 210px;
height: 285px;
}
.picks {
width: 90%;
border: 1px solid black;
height: 150px;
margin-right: 5%;
margin-left: 5%;
}
.inputbox {
margin-left: 5%;
width: 90%;
}
<html>
<head>
<title>MTGO draft</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="pickscontainer">
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="" />
</div>
</div>
<div class="inputbox">
<input type="file" name="draftlog" id="draftlog">
</div>
<div class="picks"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="magic.js"></script>
</body>
</html>
有摘要.我还将一些尝试读取的日志文件上传到服务器上日志
There's the snippet. I've also uploaded a few of the log files I'm trying to read onto my server logs
推荐答案
readAsText is asynchronous. You will need to wait until the .result is available, install a handler to do this:
var logFile = $('#draftlog').get(0).files[0];
var reader = new FileReader;
reader.readAsText(logFile);
reader.onload = function(e) {
var rawLog = reader.result;
console.log(rawLog);
};
这篇关于FileReader.result返回null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
