JavaScript读取txt文件内容代码详解

六月初六月初 JavaScipt 2023-02-22 10:50:39

数据型网站中对于数据的提取和写入绝对是重中之重，那么在前端代码中如何使用js提取txt文本中的数据呢？


本文就基于js代码提取txt文本内容给出详细代码解析：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input class="base_file" onChange="exportData(this)" type="file" name="" id="">
		<script>
			function exportData(e){
			  let data = []
			  var fileList = e.files;
			  if(!fileList || fileList.length<=0){
			    return false;
			  }
			  if(fileList[0]['type'] != 'text/plain'){
			    alert("格式异常,仅支持TXT文件")
			    return
			  }
			  var reader = new FileReader();
			  reader.readAsText(fileList[0], "UTF-8");
			  reader.onload = function (e) {
				console.log(reader.result)
			  }
			}
		</script>
	</body>
</html>
一、代码解析：

    1、input上绑定onChange方法监听txt文本获取

    2、提取监听的数据，判断是否有选择文件

    3、提取选择的数据，判断是否是文本文件

    4、通过reader.onload提取选择文件中的内容数据并打印。

二、将txt文件中的内容，按照换行进行逐个打印。
reader.result.split('\n').forEach(function(v, i){
	console.log(v);
});

    解析：通过reader.onload提取的文件内容，进行split分隔成数组，循环打印。


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！