Как читать файл .txt с языка сценариев JavaScript?

Я новый в стадии строительства Веб, конечно то, что он спрашивает, было очень простым, но я не нахожу один в ясное решение.

У меня есть файл .txt в маршруте res/texto.txt, и с javascript я хочу прочитать это, чтобы это пробегать из-за линий и этого.

Я нуждаюсь в том, чтобы знать, как я могу читать это.

11
задан 12.03.2017, 00:12
2 ответа

В зависимости от сторона , в которых находился бы файл, podr¦-эксперт переходить из двух способов: читая файл с устройства клиента (объясненный в A), или с сервера (объясненный в B).

В. ЕСЛИ ФАЙЛ ESTà  ИЗ СТОРОНЫ КЛИЕНТА

ты Можешь делать это используя FileReader . Клиент должен выбирать файл нажимая на 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>

Замечает:

Восток método совместим с:

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

B. ЕСЛИ ФАЙЛ ESTà  ИЗ СТОРОНЫ СЕРВЕРА

ты Можешь делать это с jQuery. В примере попадает url файла в неудар в лунку и нажав bot¦n, у себя просит файл в сервер посредством método get Аякс . Если ответ удовлетворительный, он является файлом в 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>
13
ответ дан 24.11.2019, 10:38

у Меня Есть файл .txt в маршруте res/texto.txt, и с javascript я хочу прочитать это, чтобы это пробегать из-за l¦-neas.

, Если файл estÃ: на сервере просто используй AJAX:

fetch('/res/texto.txt')
  .then(res => res.text())
  .then(content => {
    let lines = content.split(/\n/);
    lines.forEach(line => console.log(line));
  });

, Если должен пересылать файл клиент, тогда ты нуждаешься в 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>
3
ответ дан 24.11.2019, 10:38