javascript - subir - ¿Cómo leer un archivo de texto local?
read file javascript (10)
¡Visita Javascripture ! Y vaya a la sección readAsText y pruebe el ejemplo. Podrá saber cómo funciona la función readAsText de FileReader .
<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>
Estoy intentando escribir un simple lector de archivos de texto al crear una función que toma la ruta del archivo y convierte cada línea de texto en una matriz de caracteres, pero no funciona.
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();
}
¿Qué está mal aquí?
Esto todavía no parece funcionar después de cambiar el código un poco de una revisión anterior y ahora me está dando una excepción 101HttpRequest.
He probado esto en Firefox y funciona, pero en Google Chrome simplemente no funciona y sigue dándome una Excepción 101. ¿Cómo puedo hacer que esto funcione no solo en Firefox, sino también en otros navegadores (especialmente Chrome)? )?
Debe verificar el estado 0 (ya que al cargar archivos localmente con XMLHttpRequest , no obtiene un estado devuelto porque no es de un 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);
}
Y especifique file:// en su nombre de archivo:
readTextFile("file:///C:/your/path/to/file.txt");
Después de la introducción de fetch api en javascript, leer el contenido del archivo no podría ser más sencillo.
leyendo un archivo de texto
fetch(''file.txt'')
.then(response => response.text())
.then(text => console.log(text))
// outputs the content of the text file
leyendo un archivo json
fetch(''file.json'')
.then(response => response.json())
.then(jsonResponse => console.log(jsonResponse))
// outputs a javascript object from the parsed json
Actualización 30/07/2018 (descargo de responsabilidad):
Esta técnica funciona bien en Firefox , pero parece que la implementación de
fetchChrome no admitefile:///esquemafile:///URL en la fecha de escritura de esta actualización (probada en Chrome 68).
Esto podría ayudar,
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();
Intenta crear dos funciones:
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]);
}
Jon Perryman,
Sí, js puede leer archivos locales (vea FileReader ()) pero no automáticamente: el usuario tiene que pasar el archivo o una lista de archivos al script con un html <input type=file> .
Luego, con js es posible procesar (vista de ejemplo) el archivo o la lista de archivos, algunas de sus propiedades y el contenido del archivo o archivos.
Lo que js no puede hacer por razones de seguridad es acceder automáticamente (sin la intervención del usuario) al sistema de archivos de su computadora.
Para permitir que js acceda a la fs local, se necesita automáticamente para crear no un archivo html con js dentro, sino un documento hta.
Un archivo hta puede contener js o vbs dentro de él.
Pero el ejecutable hta solo funcionará en sistemas Windows.
Este es el comportamiento estándar del navegador.
También Google Chrome funcionó en la API de FS, más información aquí: http://www.html5rocks.com/en/tutorials/file/filesystem/
Probablemente ya lo intentaste, escribe "falso" como sigue:
rawFile.open("GET", file, false);
otro ejemplo - mi lector con clase 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>
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>
<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>