Чтение в текстовом файле для отображения в HTML

Я просто работаю над веб-сайтом для удовольствия, и мне было интересно, можете ли вы использовать JavaScript для чтения в локальном текстовом файле, а затем отобразить его в формате HTML. Так, например, если у меня был текстовый файл, сохраненный с моим проектом, можно ли написать функцию в JavaScript, которая читает весь файл, а затем просто отображает весь текст на веб-странице?Чтение в текстовом файле для отображения в HTML

Я осмотрелся и попытался найти что-то, что сделает это, но я не думаю, что полностью понимаю. У меня есть:

function readFile(fileName){ 
    var fileRead = new ActiveXObject('Scripting.FileSystemObject'); 
    text = fileRead.OpenTextFile(fileName, 1, false, 0); 

    while(!text.AtEndOfSteam){ 
     text += text.ReadLine(); 
    } 

    text.Close();  
}

Я не знаю, будет ли это работать или делать то, что я хочу. Итак, мой вопрос: как использовать JavaScript для чтения в текстовом файле, а затем отображать содержимое этого текстового файла на веб-странице в HTML?

источник

2015-05-04 user279185

Это старый и IE только. Посмотрите на FileReader – epascarello

Вы должны использовать File API.

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"> 
 

 
<div id="output"></div>

EDIT

После прочтения комментарий, я думаю, что это то, что вы хотите.

var output = document.getElementById("output"); 
 

 
$("a").on("click", function (e) { 
 
    e.preventDefault(); 
 
    $.ajax(this.href).done(function(data) { 
 
    output.textContent = data; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="output"></div> 
 

 
<a href="link/to/file">Link to file</a>

источник

2015-05-04 19:02:53

Возможно, я не дал понять. У меня есть текстовые файлы, сохраненные на моем компьютере. Я хочу, чтобы, скажем, когда кто-то нажимает на гиперссылку, текстовый файл читается и отображается на странице. – user279185

Если вы хотите, чтобы кто-то читал файл на вашем компьютере, вы не можете сделать это в javascript. Я думаю, что это лучшее, что вы можете сделать только в html/javascript. –

Нет. Я хочу, чтобы кто-то нажал на ссылку, он загружает текстовый файл, который входит в проект. – user279185

<html> 
    <head> 
    <title>reading file</title> 
    </head> 
<body> 


<input type="file" id="myFile"> 
<hr> 
<!--<div style="width: 300px;height: 0px" id="output"></div>--> 
<textarea style="width:500px;height: 400px" id="output"></textarea> 

<script> 
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); 
    } 
}); 
</script> 
    </body> 
</html>

источник

2017-08-22 10:22:32

Чтение в текстовом файле для отображения в HTML

ответ

Смежные вопросы