21

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.

2
  • 2
    y porque no en PHP es mas facil <?php echo file_get_contents('text.txt'); ?>
    – Shareiv
    Commented el 11 mar. 2017 a las 21:36
  • Para abrir un archivo puedes usar la API file de HTML5, pero te aviso que si pretendes abrir un documento del cliente no vas a poder sin que sea este quien lo seleccione, por razones obvias de seguridad. w3c.github.io/FileAPI Commented el 11 mar. 2017 a las 22:02

2 respuestas 2

26

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).

A. SI EL ARCHIVO ESTÁ DEL LADO DEL CLIENTE

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:

  • IE 10+
  • Firefox 3.6+
  • Chrome 13+
  • Safari 6.1+

B. SI EL ARCHIVO ESTÁ DEL LADO DEL SERVIDOR

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
  • He estado observado que las respuestas que has dado han sido bastante completas. Parece más bien una documentación. Muy bien explicada. Lo estaba leyendo por curiosidad y me encontré con información útil. Tienes un voto +1. Commented el 29 ene. 2020 a las 23:35
7

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>

1
  • 1
    ERES GENIAL!!!!!!!!!!!!, Es justo lo que necesitaba. Ahora entiendo como hacer esto. Gracias!!!!!!! Commented el 8 ene. 2020 a las 19:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.