纯js读取txt,xlsx，csv，xls文件

最新推荐文章于 2025-05-01 14:15:54 发布

Maven_

最新推荐文章于 2025-05-01 14:15:54 发布

阅读量1w

点赞数 2

分类专栏：工作笔记文章标签： js js读文件

本文链接：https://blog.csdn.net/github_37373329/article/details/79269069

版权

本文介绍如何使用HTML5的FileReader API结合xlsx.js和jschardet.min.js库，实现前端读取txt、xlsx、csv和xls文件，将数据分批提交给后台，减少了服务器压力。通过监听input[type=file]的change事件，读取文件内容，针对不同文件类型采用不同的解析方式，如txt和csv文件直接读取，xls和xlsx文件则用js-xlsx解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了减少服务器的压力，需要前端读取文件数据，然后自己拼接分批提交给后台，这里将读文件记录下来

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>读取文件</title>
	<script src="js/shim.js"></script>
	<script src="js/xlsx.full.min.js"></script>
	<script src="js/jschardet.min.js"></script>
</head>
<body>
	<input type='file' value="" id="read" >
</body>
<script>
	String.prototype.trim=function(){ //给字符串添加一个去前后空格的方法
		return this.replace(/s|xA0/g,"");
	}
	window.οnlοad=function(){
		var file=document.getElementById("read");
		file.addEventListener("change",read,false);		
		/*function resetInpuFile() {      //定义一个重置input file控件的方法，否则如果文件不变,不能再次触发input控件的onchange事件
                    var control = event.target;
                    //control.replaceWith(control = control.clone(true));       //这个重置方法对vue没用，vue的事件不是直接绑定的，所以复制不了
                    control.wrap('<form>').closest('form').get(0).reset();      //用一个form包裹input，调用form的reset方法，然后解除包裹
                    control.unwrap();
        }*/
		function read(e){
			//获取文件类型
			var filename=e.target.files[0].name;
			var phoneStr = '';
            var messageContent='';
			console.log(filename);
			var fileType=filename.substr(filename.lastIndexOf('.')+1,filename.length);
			console.log(fileType);
			//检测是浏览器是否支持readAsBinaryString函数
			var rABS = typeof FileReader !== 'undefined' && typeof FileReader.prototype !== 'undefined' && typeof FileReader.prototype.readAsBinaryString !== 'undefined';  
			var reader=new FileReader();
			if(rABS){
				reader.readAsBinaryString(e.target.files[0

最低0.47元/天解锁文章