拿到file文件对象之后
1)新建一个fileReader
var reader = new FileReader();
2)执行读文件的函数,设置编码格式
reader.readAsText(file, "UTF-8");
3)读取文件中的内容
reader.onload = function (e) {
const val = e.target.result;
}
注:在回调函数中使用读取的数据
下面直接写一个例子:实现了读取多个文件并展示文件的内容
<!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>
补充:也可以把TXT文件(blob类型)读成字符串类型:
var reader = new FileReader();
reader.readAsText(blob, "UTF-8");
const text: any = await blob.text(); // 读取为文本
set_txt_content(text);
然后选择插件读出带有格式的内容,这里用react为例子
dangerouslySetInnerHTML={{
__html: marked(txt_content)
}}