Javascript读取本地txt文件点击上传/直接读取

最新推荐文章于 2023-11-24 15:22:44 发布

2whours

最新推荐文章于 2023-11-24 15:22:44 发布

阅读量1.2k

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_36454619/article/details/103511016

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

先用了如下方法实现点击上传：

function load(name) {
    let xhr = new XMLHttpRequest(),
        okStatus = document.location.protocol === "file:" ? 0 : 200;
    xhr.open('GET', name, false);
    xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
    xhr.send(null);
    return xhr.status === okStatus ? xhr.responseText : null;
}
 
let text = load("文件名.txt");  
 
console.log(text);  //输出到浏览器控制器中
 
//document.write(text);  //打印在网页中
 
//document.write("<pre>"+text+"<pre/>");  //解决txt的换行无法打印到网页上的问题

效果如图：
在这里插入图片描述

但是更想实现直接读取，即编码时输入例如“C：/user/admin/file.txt”后打开浏览器就能看到test.txt文件的内容，无需再点击上传。
但是暂时没找到好的实现方法。好像是因为：

浏览器出于安全考虑，不允许web直接访问用户的文件系统。除非用input标签，或者小程序的平台（比如微信）有提供相应的接口。
存储数据，微信有wx.setStorage，H5有localstorage、IndexedDB

一些浏览器为了安全，禁止用ajax读取客户端的文件，txt文件放在和html文件同一个文件夹下也不行。
要把txt文件和html文件部属到服务器上才行。或者
https://www.cnblogs.com/Cxymds/p/6896180.html

直接显示有个博主给出了只能使用IE浏览器的方法，放这里学习一下：

来源：https://blog.csdn.net/m0_37602827/article/details/92975776

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>读取TXT文件</title> 
</head> 
<body> 
<div id="text"></div> 
 
<script language="javascript"> 
	fso=new ActiveXObject("Scripting.FileSystemObject");
	var f=fso.OpenTextFile("C:\\Users\\81518\\Desktop\\demo\\test.txt"); //这里必须为绝对路径
	var str="";
	while(!f.AtEndOfStream){
		var temp=f.ReadLine().split(); //读取一行数据并按空格分割
		for(i=0;i<temp.length;i++){
			str+=temp[i]+"&nbsp;";
		}
		str+="<br>";
	}
	document.getElementById("text").innerHTML=str;
</script> 
 
</body> 
</html>

注意：ActiveXObject类是IE浏览器独有，所以应用IE浏览器打开。

2whours

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Javascript读取本地txt文件点击上传/直接读取

先用了如下方法实现点击上传：function load(name) { let xhr = new XMLHttpRequest(), okStatus = document.location.protocol === "file:" ? 0 : 200; xhr.open('GET', name, false); xhr.overrideMimeType...
复制链接

扫一扫