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
    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 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. 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!!!!!!! el 8 ene. 2020 a las 19:10

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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