Como ler um arquivo de texto local?
estou a tentar escrever um simples leitor de ficheiros de texto, criando uma função que toma o caminho do ficheiro e converte cada linha de texto numa matriz char, mas não está a funcionar.
function readTextFile() {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "testing.txt", true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4) {
var allText = rawFile.responseText;
document.getElementById("textSection").innerHTML = allText;
}
}
rawFile.send();
}
isto ainda não parece funcionar depois de mudar o código um pouco de uma revisão anterior e agora está a dar-me uma XMLHttpRequest excepção 101.
10 answers
Você precisa verificar o estado 0 (como ao carregar arquivos localmente com XMLHttpRequest, Você não recebe um estado devolvido porque não é de um Webserver)
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
E especificar file:// no nome do seu ficheiro:
readTextFile("file:///C:/your/path/to/file.txt");
VisitaJavascriptura ! E vá a seção readAsText e tente o exemplo. Você será capaz de saber como a função readAsText de FileReader funciona.
<html>
<head>
<script>
var openFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0, 200));
};
reader.readAsText(input.files[0]);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='openFile(event)'><br>
<div id='output'>
...
</div>
</body>
</html>
Após a introdução de obter a api em javascript, a leitura do conteúdo do ficheiro não poderia ser mais simples.
A ler um ficheiro de texto
fetch('file.txt')
.then(response => response.text())
.then(text => console.log(text))
// outputs the content of the text file
A ler um ficheiro json
fetch('file.json')
.then(response => response.json())
.then(jsonResponse => console.log(jsonResponse))
// outputs a javascript object from the parsed json
Actualização 30/07/2018 (declaração de exoneração de responsabilidade):
Esta técnica funciona bem em Firefox, mas parece que Chrome's
fetchimplementação não suportafile:///esquema de URL, à data de escrita deste update (testado em Chrome 68).
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>Tente criar duas funções:
function getData(){ //this will read file and send information to other function
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var lines = xmlhttp.responseText; //*here we get all lines from text file*
intoArray(lines); *//here we call function with parameter "lines*"
}
}
xmlhttp.open("GET", "motsim1.txt", true);
xmlhttp.send();
}
function intoArray (lines) {
// splitting all text data into array "\n" is splitting data from each new line
//and saving each new line as each element*
var lineArr = lines.split('\n');
//just to check if it works output lineArr[index] as below
document.write(lineArr[2]);
document.write(lineArr[3]);
}
Outro exemplo-o meu leitor com a classe FileReader
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
</head>
<body>
<script>
function PreviewText() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadTextValue").value = oFREvent.target.result;
document.getElementById("obj").data = oFREvent.target.result;
};
};
jQuery(document).ready(function(){
$('#viewSource').click(function ()
{
var text = $('#uploadTextValue').val();
alert(text);
//here ajax
});
});
</script>
<object width="100%" height="400" data="" id="obj"></object>
<div>
<input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
<input id="uploadText" style="width:120px" type="file" size="10" onchange="PreviewText();" />
</div>
<a href="#" id="viewSource">Source file</a>
</body>
</html>
O Yes js pode ler ficheiros locais (Ver FileReader ()), mas não automaticamente: o utilizador tem de passar o ficheiro ou uma lista de ficheiros para o programa com um html <input type=file>.
Então com js é possível processar (vista de exemplo) o arquivo ou a lista de arquivos, algumas de suas propriedades e o conteúdo do arquivo ou arquivos.
O que o js não pode fazer por razões de segurança é aceder automaticamente (sem a entrada do utilizador) ao sistema de ficheiros do seu computador.
Para permitir js para acessar o FS local automaticamente é necessário para criar não um arquivo html com js dentro dele, mas um documento hta.
Um ficheiro hta pode conter js ou vbs dentro dele.
Mas o executável hta só funcionará nos sistemas windows.
Este é o comportamento padrão do navegador.
Também o google chrome trabalhou na api fs, mais informações aqui: http://www.html5rocks.com/en/tutorials/file/filesystem/
Provávelmente você já tentou, digite "FALSO" Como se segue:
rawFile.open("GET", file, false);
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "sample.txt", true);
xmlhttp.send();
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({`enter code here`
url: "TextFile.txt",
dataType: "text",
success: function (data) {
var text = $('#newCheckText').val();
var str = data;
var str_array = str.split('\n');
for (var i = 0; i < str_array.length; i++) {
// Trim the excess whitespace.
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
// Add additional code here, such as:
alert(str_array[i]);
$('#checkboxes').append('<input type="checkbox" class="checkBoxClass" /> ' + str_array[i] + '<br />');
}
}
});
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
</script>
</head>
<body>
<div id="checkboxes">
<input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />
</div>
</body>
</html>