利用js要怎么样读取txt的内容并显示在html
利用js要怎么样读取txt的内容并显示在html
如txt文件内容是：
1111
222
333
那么如果读取了html同样显示：
111
222
333
html读取出txt内容后，需要与txt一样换行。
用ajax读取即可
你题目的解答代码如下：
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<pre id="text"></pre>
<script type="text/javascript">
$.ajax({
url: "xxx.txt",
type: "get",
dataType: "text",
success: function (data) {
$("#text").text(data);
},
error: function (jqXHR, status, thrown) {
alert(thrown);
}
});
</script>
如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!
<html>
<header>
<script src="https://code.jquery.com/jquery-3.5.0.js" type="text/javascript" ></script>
</header>
<body>
<div id='test1' style="word-break:break-all">
</div>
</body>
<script type="module">
window.onload = function(){
$.get('1.txt').then(function(content){
console.log(content);
$("#test1").html('<pre>'+content+'</pre>');
});
}
</script>
</html>
通过file选择文件，js获取到表单上传来的file后，创建FileReader来读取内容。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>FileReader</title>
</head>
<body>
<div>
<input type="file" name="file" multiple="multiple" id="files" onchange="choosefile()" />
<div id="name"></div>
<textarea id="text" cols="100" rows="50"></textarea>
</div>
<script type="text/javascript">
function choosefile () {
var fileList = document.getElementById('files').files;
var nameStr = '';
for (var i = 0; i < fileList.length; i++) {
nameStr += `${i === 0 ? '' : ', '}${fileList[i].name}`;
var reader = new FileReader();
reader.readAsText(fileList[i], "UTF-8");
reader.onload = function (e) {
var content = e.target.result;
console.log(content);
const textAreaVal = document.getElementById('text').value;
document.getElementById('text').value = textAreaVal + content;
}
}
document.getElementById('name').append(nameStr);
}
</script>
</body>
</html>
html 内只能通过网络请求或者资源的形式加载外部内容。
text 是本地，还是网络资源？
本地的话，js 是不支持直接读去本地文件的，nodejs 有 fs 模块，不过 nodejs 不能在网页内运行；
你是要在 html 内显示 text 内的内容，需要讲 text 托管到文件服务上，例如 本地启动http-server, 或者直接放到 oss 文件存储管理上，会给你一个访问的链接，你通过 ajax ，xhr ，axios ，fetch 等方式请求，即可；本地也有对应的地址，一样是只能通过网络请求获取文本内容，和平时的请求是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content {
display: block;
width: 200px;
height: 400px;
}
</style>
</head>
<body>
<input type="file" onchange="changeFile(this)">
<textarea id="content"></textarea>
<script>
function changeFile(obj) {
const file = obj.files[0]
const reader = new FileReader()
const content = document.getElementById('content')
reader.readAsText(file, 'utf-8')
reader.onload = function() {
content.innerHTML = reader.result
}
reader.onerror = function() {
console.log(reader.error)
}
}
</script>
</body>
</html>
为什么要用js读取文件直接显示呢？是合理的需求吗？
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FileReader</title>
</head>
<body>
<input id="input" type="file">
</body>
<script>
const input = document.querySelector('input[type=file]')
input.addEventListener('change', ()=>{
const reader = new FileReader()
reader.readAsText(input.files[0],'utf8') // input.files[0]为第一个文件
reader.onload = ()=>{
var fs=reader.result.split("\n");
var str ="";
fs.forEach(item=>{
str=str+"<br/>"+item;
})
document.body.innerHTML += str // reader.result为获取结果
}
}, false)
</script>
</html>