1
I created one and would like to read the contents of that input before sending it to the server. I saw that I can do this using a filereader but the information I found was a bit confusing.
How can I do this reading?
The reading would be from a txt file.
var file = document.getElementById("inputmarc");
var fr = new FileReader();
fr.readAsBinaryString(file.files[0]);
fr.onload = function(e) { alert(e); }
In HTML:
<input type="file" id="inputmarc">
2
Take this example if it helps you
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>FileAPI HTML5</title>
<style type="text/css">
#filecontents {
border: double;
overflow-y: scroll;
height: 400px;
}
</style>
</head>
<body>
Por favor selecione arquivo que será lido:
<input type="file" id="txtfiletoread" /><br />
<div>Conteúdo do arquivo:</div>
<div id="filecontents">
</div>
<script>
window.onload = function () {
//Check the support for the File API support
if (window.File && window.FileReader && window.FileList && window.Blob) {
var fileSelected = document.getElementById('txtfiletoread');
fileSelected.addEventListener('change', function (e) {
//Set the extension for the file
var fileExtension = /text.*/;
//Get the file object
var fileTobeRead = fileSelected.files[0];
//Check of the extension match
if (fileTobeRead.type.match(fileExtension)) {
//Initialize the FileReader object to read the 2file
var fileReader = new FileReader();
fileReader.onload = function (e) {
var fileContents = document.getElementById('filecontents');
fileContents.innerText = fileReader.result;
}
fileReader.readAsText(fileTobeRead);
}
else {
alert("Por favor selecione arquivo texto");
}
}, false);
}
else {
alert("Arquivo(s) não suportado(s)");
}
}
</script>
</body>
</html>0
Using Filereader works only in HTML5 browsers.
<input type="file" id="fileinput" />
<script type="text/javascript">
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
alert( "Got the file.n"
+"name: " + f.name + "n"
+"type: " + f.type + "n"
+"size: " + f.size + " bytesn"
+ "starts with: " + contents.substr(1, contents.indexOf("n"))
);
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
</script>
Source: Source for the above example
Compatible browsers: http://caniuse.com/#feat=filereader
See other information in:
Browser other questions tagged javascript html
You are not signed in. Login or sign up in order to post.
Is there any way to put in the code you tried to do? Taking advantage, you can also put an example of what you want to do, such as the format of the file that will be read and what content you expect to read in that file.
– Woss
I don’t think I can edit a question yet, it’s a txt file.
var file = document.getElementById("inputmarc");

 var fr = new FileReader();
 fr.readAsBinaryString(file.files[0]);
 fr.onload = function(e)
 {
 alert(e);
 }– Andre Alvim
And the HTML code?
– Woss
It’s just a <input type="file" id="inputmarc">
– Andre Alvim