JavaScript 加载文件--替换换行符

最新推荐文章于 2023-09-15 17:06:55 发布

猿来是码农

最新推荐文章于 2023-09-15 17:06:55 发布

阅读量365

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/tianyexing2008/article/details/126975566

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一天接触 JavaScript ，纯属学习。这里演示加载的文件仅限于文本文件，因为示例里是要把文件内容显示出来。

有 html 文件如下：

<!DOCTYPE html>
<html>
<head>
<title> upload file </title>
<meta charset="UTF-8">
<input type="file" id="fileUpload" hidden/>
<button id="btnUpload" type="button">choose file...</button>
<script src="upload.js"></script>
</head>

<body></body>
</html>

这个html 页面显示的效果就是这个样子，输入框已经被隐藏掉了：

有 js 文件如下：

var btnUpload = document.getElementById("btnUpload");
btnUpload.onclick = function (ev) {
	console.log(ev);
	input.click();
}

var input = document.getElementById('fileUpload');
input.onchange = function(ev) {
	if(!ev.target.files[0]) {
		return;
	}
	
	var fileName = ev.target.files[0];
	var reader = new FileReader();
	reader.readAsText(fileName, "UTF-8");
	reader.onload = function(e) {
		var content = reader.result;
		if(content.length > 0) {
			content = content.replace(/\n/g, "</br>");
			document.write(content);			
		} else {
			window.alert("you select a null file!!!");
		}
	}
};

按钮的单击事件绑定到 input.click() 事件上了。然后是获取文件名，加载文件内容，替换换行符，最后直接显示内容。