I've created one and would like to read the contents of this input before sending it to the server. I saw that I can do this using a filereader but the information I found was kind of confusing.
How can I do this reading?
The read 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); }
No HTML:
<input type="file" id="inputmarc">
See 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>Using FileReader works only in browsers with HTML5.
<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: Sample Source above
Compatible browsers: link
See other infos on: