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

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

原创最新推荐文章于 2023-09-15 17:06:55 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的JavaScript实现文件选择与读取的例子。通过HTML的文件输入元素和JavaScript的FileReader API，可以轻松实现文件内容的读取，并将文本文件的内容展示在网页上。

第一天接触 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() 事件上了。然后是获取文件名，加载文件内容，替换换行符，最后直接显示内容。