使用input读取文件

最新推荐文章于 2022-04-24 21:25:56 发布

输出是最好的学习

最新推荐文章于 2022-04-24 21:25:56 发布

阅读量1.7k

点赞数 2

分类专栏：前端文章标签： readAsText html5 读取文件 file

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/75193882

版权

读取一个包含文本内容的文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#fileOutput{
			width: 400px;
			height: 300px;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<input type="file" id="fileInput" οnchange="processFiles(this.files)">
	<div id="fileOutput"></div>
	<script type="text/javascript">
		function processFiles(files){
			// 得到第一个文件
			var file = files[0];
			//创建一个FileReader对象
			var reader = new FileReader();
			reader.οnlοad=function(e){
				var output = document.getElementById("fileOutput");
				output.textContent = e.target.result;
			}
			reader.readAsText(file);
			// readAsText只能够处理包含文本内容的文件csv，xml,html等,不能够处理二进制文件
		}
	</script>
</body>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

输出是最好的学习

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用input读取文件

读取一个包含文本内容的文件，代码如下： Document #fileOutput{ width: 400px; height: 300px; border:1px solid red; } function processFiles(files){ // 得到第一个文件 var file = files[0];
复制链接

扫一扫