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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
