使用Javascript讀取文本文件
[英]Reading a text file using Javascript
問題描述
以下代碼應該在加載時讀取當前目錄中的文本文件的內容，並將其顯示在html頁面上。 我嘗試自己修改。 但它沒有給出輸出。 有沒有更簡單的方法來使用另一種方法獲得此結果？ 或者請幫助弄清楚這段代碼有什么問題？
<html>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8' >
<script>
function startRead()
{
// obtain input element through DOM
var file = document.getElementById("\\file.txt").files[0]
if(file)
{
getAsText(file);
}
}
function getAsText(readFile)
{
var reader;
try
{
reader = new FileReader();
}catch(e)
{
document.getElementById('output').innerHTML =
"Error: seems File API is not supported on your browser";
return;
}
// Read file into memory as UTF-8
reader.readAsText(readFile, "UTF-8");
// Handle progress, success, and errors
reader.onload = loaded;
reader.onerror = errorHandler;
}
function loaded(evt)
{
// Obtain the read file data
var fileString = evt.target.result;
document.getElementById('output').innerHTML = fileString;
}
function errorHandler(evt)
{
if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR)
{
// The file could not be read
document.getElementById('output').innerHTML = "Error reading file..."
}
}
//Start reading file on load
window.addEventListener("load", startRead() { }, false);
</script>
</head>
<body>
<pre>
<code id="output">
</code>
</pre>
</body>
</html>
下面給出了我修改以獲得上述代碼的代碼。 我的意圖是。 當我打開html文件時，它將讀取當前目錄中的文本文件並顯示內容。
<html>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8' >
<script>
function startRead()
{
// obtain input element through DOM
var file = document.getElementById("file").files[0];
if(file)
{
getAsText(file);
}
}
function getAsText(readFile)
{
var reader;
try
{
reader = new FileReader();
}catch(e)
{
document.getElementById('output').innerHTML =
"Error: seems File API is not supported on your browser";
return;
}
// Read file into memory as UTF-8
reader.readAsText(readFile, "UTF-8");
// Handle progress, success, and errors
reader.onload = loaded;
reader.onerror = errorHandler;
}
function loaded(evt)
{
// Obtain the read file data
var fileString = evt.target.result;
document.getElementById('output').innerHTML = fileString;
}
function errorHandler(evt)
{
if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR)
{
// The file could not be read
document.getElementById('output').innerHTML = "Error reading file..."
}
}
</script>
</head>
<body>
<input id="file" type="file" multiple onchange="startRead()">
<pre>
<code id="output">
</code>
</pre>
</body>
</html>
3 個解決方案
解決方案1
6 已采納 2015-05-26 09:22:06
嘗試這個片段，我只是嘗試了它的工作:)！
現場演示（帶輸入文件）
var fileInput = document.getElementById('fileInput'); var fileDisplayArea = document.getElementById('fileDisplayArea'); fileInput.addEventListener('change', function(e) { var file = fileInput.files[0]; var textType = /text.*/; if (file.type.match(textType)) { var reader = new FileReader(); reader.onload = function(e) { var content = reader.result; //Here the content has been read successfuly alert(content); } reader.readAsText(file); } else { fileDisplayArea.innerText = "File not supported!" } });
<input type="file" id="fileInput">
沒有輸入文件
功能
function readTextFile(file){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
並測試它
<a href="#" onclick="readTextFile("file:///C:/test.txt")"> Test </a>
注意 ：我試過了，但它只適用於firefox
解決方案2
1 2017-11-29 07:28:04
<html> <head></head> <body> <input type="file" id="openfile" /> <br> <pre id="filecontents"></pre> <script type="text/javascript"> document.getElementById("openfile").addEventListener('change', function() { var fr = new FileReader(); fr.onload = function() { document.getElementById("filecontents").textContent = this.result; } fr.readAsText(this.files[0]); }) </script> </body> </html>
這段代碼有效
<script type="text/javascript">
document.getElementById("openfile").addEventListener('change', function(){
var fr= new FileReader();
fr.onload= function(){
document.getElementById("readfile").textContent=this.result;
}
fr.readAsText(this.files[0]);
})
</script>
解決方案3
0 2017-08-22 10:27:42
<html>
<head>
<title>reading file</title>
</head>
<body>
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"> <hr> <textarea style="width:500px;height: 400px" id="output"></textarea>
<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>
使用javascript讀取本地文本文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.