Tengo un archivo .txt
en la ruta res/texto.txt
, y desde un javascript quiero leerlo para recorrerlo por líneas y eso.
Necesito saber como puedo leerlo.
Dependiendo del lado en que se encuentre el archivo, podrías proceder de dos maneras: leyendo el archivo desde el dispositivo del cliente (explicado en A), o desde el servidor (explicado en B).
Puedes hacerlo usando FileReader. El cliente debe seleccionar el archivo haciendo clic en el botón:
function leerArchivo(e) {
var archivo = e.target.files[0];
if (!archivo) {
return;
}
var lector = new FileReader();
lector.onload = function(e) {
var contenido = e.target.result;
mostrarContenido(contenido);
};
lector.readAsText(archivo);
}
function mostrarContenido(contenido) {
var elemento = document.getElementById('contenido-archivo');
elemento.innerHTML = contenido;
}
document.getElementById('file-input')
.addEventListener('change', leerArchivo, false);
<input type="file" id="file-input" />
<h3>Contenido del archivo:</h3>
<pre id="contenido-archivo"></pre>
Nota:
Este método es compatible con:
Puedes hacerlo con jQuery. En el ejemplo se introduce la url del archivo en el input y al pulsar el botón se pide el archivo al servidor mediante el método get de Ajax. Si la respuesta es satisfactoria, se muestra el archivo en un div.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(function()
{
$("#button").click( function()
{
//var TXT_URL = 'https://www.mozilla.org/media/MPL/2.0/index.815ca599c9df.txt';
var TXT_URL = $("#input-url").val();
$.ajax
(
{
url : TXT_URL,
dataType: "text",
success : function (data)
{
$(".text").html("<pre>"+data+"</pre>");
}
}
);
});
});
</script>
Ingrese una url válida:<input type="text" id="input-url" size="50" value="https://www.mozilla.org/media/MPL/2.0/index.815ca599c9df.txt"></input>
<input type="button" id="button" value="Ver .txt"></input>
<div class="text">
<hr />
<h2>Texto:</h2>
</div>
+1
.
Commented
el 29 ene. 2020 a las 23:35
Tengo un archivo .txt en la ruta res/texto.txt, y desde un javascript quiero leerlo para recorrerlo por líneas.
Si el archivo está en el servidor simplemente utiliza AJAX:
fetch('/res/texto.txt')
.then(res => res.text())
.then(content => {
let lines = content.split(/\n/);
lines.forEach(line => console.log(line));
});
Si el archivo debe subirlo el cliente, entonces necesitas la File API:
let area = document.getElementById('area');
area.addEventListener('dragover', e => e.preventDefault());
area.addEventListener('drop', readFile);
function readFile (e) {
e.preventDefault();
let file = e.dataTransfer.files[0];
if (file.type === 'text/plain') {
let reader = new FileReader();
reader.onloadend = () => printFileContents(reader.result);
reader.readAsText(file, 'ISO-8859-1');
} else {
alert('¡He dicho archivo de texto!');
}
}
function printFileContents (contents) {
area.style.lineHeight = '30px';
area.textContent = '';
let lines = contents.split(/\n/);
lines.forEach(line => area.textContent += line + '\n');
}
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Noto Sans';
}
#area {
align-items: center;
border: 3px dashed #aaa;
border-radius: 5px;
color: #555;
display: flex;
flex-flow: column nowrap;
font-size: 15px;
height: 80vh;
justify-content: center;
max-height: 400px;
margin: 30px auto;
overflow: auto;
padding: 25px;
text-align: center;
white-space: pre-line;
width: 80%;
max-width: 600px;
}
h3 {
color: #555;
font-weight: 400;
}
<div id="area">
<h3>Suelta un archivo de texto y mira qué pasa ;)</h3>
</div>
<?php echo file_get_contents('text.txt'); ?>