Menu
I have a javascript/HTML5 page that I want to use to pull in a file and check each line to see whether it is greater than 240 chars:
EDIT: I have things parsing correctly now, but they're not rendering correctly. Here's my updated code:
<!DOCTYPE HTML>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<input type="file" id="input" name="file" multiple />
<br>
<output id="files"></output>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = function(e) {
// Print the contents of the file
var text = e.target.result;
var lines = text.split(/[\r\n]+/g); // tolerate both Windows and Unix linebreaks
for(var i = 0; i < lines.length; i++) {
if (lines[i].length > 240){
output.push('<li>' + lines[i] + '<br>');
}
}
};
reader.readAsText(f,"UTF-8");
}
document.getElementById('files').innerHTML = 'Paths with more than 240 characters: <br><ul>' + output.join('') + '</ul>';
}
document.getElementById('input').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
I can run a trace and see that the output variable is populating correctly, but all that I'm getting for output is: Paths with more than 240 characters: without the output.join() part rendering correctly -- any thoughts?
908
We can use the Node. js line-reader module to read the file in JavaScript. The module is open source, and we need to install it with the commands npm install line-reader --save or yarn add line-reader . Reading the content of a file using the line-reader module is easy as it provides the eachLine() method.
JavaScript is actually interpreted line by line.
To read a file, use FileReader , which enables you to read the content of a File object into memory. You can instruct FileReader to read a file as an array buffer, a data URL, or text.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
The obvious way (if you can tolerate reading the file all at once) is to split it by newlines.
var lines = text.split(/[\r\n]+/g); // tolerate both Windows and Unix linebreaks
for(var i = 0; i < lines.length; i++) { /* do something with lines[i] */ }
// or in modern JavaScript,
lines.forEach(function(line) { /* ... */ });
I guess you should put
document.getElementById('files').innerHTML = 'Paths with more than 240 characters: <br><ul>' + output.join('') + '</ul>';
inside onload callback. Seems that output is not yet populated when you try to use it. So:
reader.onload = function (e) {
// all your code ...
// now can safely print output
document.getElementById('files').innerHTML = 'Paths with more than 240 characters: <br><ul>' + output.join('') + '</ul>';
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
