求教！H5如何用JS在网页打开时读取一个指定文件的内容

qq_36756523 2018-06-08 09:13:22
我现在想在网站顶部显示txt文件里面的内容
各种查都没找到最适合的答案
百度上的大部分都是需要用按钮点击后找到文件来读取
我想打开就直接自动读取
请问各位大佬了！
...全文
1839 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
September_Lhi 2019-03-22
  • 打赏
  • 举报
 回复
引用 7 楼 winzond 的回复:
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}
</script>
</head>
抄了两个现成的例子，一字未改，愿意用哪个，你自己选
这个打开本地的txt文件乱码
supercalifragilisty 2018-12-07
  • 打赏
  • 举报
 回复
有读取excel文件内容的方法吗 也是读取服务端本地的文件
winzond 2018-06-10
  • 打赏
  • 举报
 回复
引用 15 楼 qq_28425307 的回复:
没明白你说的意思，请具体详细表述下！
我是初学者，称不上大神，真正的大神在二楼已经告诉你怎么处理了哦，具体的代码可以百度的
ambit_tsai-微信 2018-06-09
  • 打赏
  • 举报
 回复
引用 10 楼 winzond的回复:
[quote=引用 9 楼 ambit_tsai 的回复:] 不用楼上那么复杂，简单的一句话就可以了 

<div id="showText"></div>
<script>
	$('#showText').load('/path/to/target.txt');
</script>
我注意到一句话“百度上的大部分都是需要用按钮点击后找到文件来读取”，既然按钮点击后能处理的事情，这哥们儿不知道怎么修改成加载就执行，恐怕咱俩写的，这哥们都看不懂。有必要给这哥们儿解释一下： 一、$(document).ready(function(){ somecode });表示文档加载完就执行的代码 纯JS就加个window.onload=function(){ somecode }; 二、$("button").click(function(){ $("#div1").load("/try/ajax/demo_test.txt"); }); 改成$("#div1").load("/try/ajax/demo_test.txt");不要事件绑定就会自动加载了。 以下是window.onload与 $(document).ready()的加载区别: window.onload：必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()：是DOM结构绘制完毕后就执行，不必等到加载完毕。 哥们儿，明白了么 [/quote] jQuery的load方法基于ajax，是异步执行的，其实不必放在ready中，直接在页面解析时就执行。
winzond 2018-06-09
  • 打赏
  • 举报
 回复
引用 9 楼 ambit_tsai 的回复:
不用楼上那么复杂，简单的一句话就可以了 

<div id="showText"></div>
<script>
	$('#showText').load('/path/to/target.txt');
</script>
我注意到一句话“百度上的大部分都是需要用按钮点击后找到文件来读取”，既然按钮点击后能处理的事情，这哥们儿不知道怎么修改成加载就执行，恐怕咱俩写的，这哥们都看不懂。有必要给这哥们儿解释一下： 一、$(document).ready(function(){ somecode });表示文档加载完就执行的代码 纯JS就加个window.onload=function(){ somecode }; 二、$("button").click(function(){ $("#div1").load("/try/ajax/demo_test.txt"); }); 改成$("#div1").load("/try/ajax/demo_test.txt");不要事件绑定就会自动加载了。 以下是window.onload与 $(document).ready()的加载区别: window.onload：必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()：是DOM结构绘制完毕后就执行，不必等到加载完毕。 哥们儿，明白了么
ambit_tsai-微信 2018-06-09
  • 打赏
  • 举报
 回复
不用楼上那么复杂，简单的一句话就可以了 

<div id="showText"></div>
<script>
	$('#showText').load('/path/to/target.txt');
</script>
winzond 2018-06-09
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>

</body>
</html>
刚刚纯JS不完整，这是完整的
winzond 2018-06-09
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}
</script>
</head>
抄了两个现成的例子，一字未改，愿意用哪个，你自己选
winzond 2018-06-09
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("/try/ajax/demo_test.txt");
	});
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>

</body>
</html>
trainee 2018-06-09
  • 打赏
  • 举报
 回复
服务器文本文件， 用AJAX 直接get的就出来了， 把代码写再onload事件里即可。
qq_36756523 2018-06-09
  • 打赏
  • 举报
 回复
引用 2 楼 jslang 的回复:
你要读取哪里的文件？ 用户客户端的文件不可能让你直接自动读取； 你自己网站内的文件可以用ajax方式读取（可能要在iis服务器上设置下允许下载txt文件）； 其它网站的文件需要在你的服务器端读取再用ajax传到前端；
是读取服务器本地的文件
qq_36756523 2018-06-09
  • 打赏
  • 举报
 回复
引用 1 楼 ambit_tsai 的回复:
没看明白，是指在网页打开时从服务器加载一个文件？
是的 比如我在站点资源文件夹里面有一个demo_test.txt 网站读取这个txt的所有内容并显示出来
岁月静好2018 2018-06-09
  • 打赏
  • 举报
 回复
没明白你说的意思，请具体详细表述下！
天际的海浪 2018-06-09
  • 打赏
  • 举报
 回复
引用 10 楼 winzond 的回复:
[quote=引用 9 楼 ambit_tsai 的回复:] 不用楼上那么复杂，简单的一句话就可以了 

<div id="showText"></div>
<script>
	$('#showText').load('/path/to/target.txt');
</script>
我注意到一句话“百度上的大部分都是需要用按钮点击后找到文件来读取”，既然按钮点击后能处理的事情，这哥们儿不知道怎么修改成加载就执行，恐怕咱俩写的，这哥们都看不懂。有必要给这哥们儿解释一下： 一、$(document).ready(function(){ somecode });表示文档加载完就执行的代码 纯JS就加个window.onload=function(){ somecode }; 二、$("button").click(function(){ $("#div1").load("/try/ajax/demo_test.txt"); }); 改成$("#div1").load("/try/ajax/demo_test.txt");不要事件绑定就会自动加载了。 以下是window.onload与 $(document).ready()的加载区别: window.onload：必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()：是DOM结构绘制完毕后就执行，不必等到加载完毕。 哥们儿，明白了么 [/quote] 哈哈，我看到“百度上的大部分都是需要用按钮点击后找到文件来读取”这句话时认为这哥们要读取的应该是用户客户端的文件， 因为只有读取用户客户端的文件，才需要用<input type="file">按钮点击后找到文件来读取
qq_36756523 2018-06-09
  • 打赏
  • 举报
 回复
引用 10 楼 winzond 的回复:
[quote=引用 9 楼 ambit_tsai 的回复:] 不用楼上那么复杂，简单的一句话就可以了 

<div id="showText"></div>
<script>
	$('#showText').load('/path/to/target.txt');
</script>
我注意到一句话“百度上的大部分都是需要用按钮点击后找到文件来读取”，既然按钮点击后能处理的事情，这哥们儿不知道怎么修改成加载就执行，恐怕咱俩写的，这哥们都看不懂。有必要给这哥们儿解释一下： 一、$(document).ready(function(){ somecode });表示文档加载完就执行的代码 纯JS就加个window.onload=function(){ somecode }; 二、$("button").click(function(){ $("#div1").load("/try/ajax/demo_test.txt"); }); 改成$("#div1").load("/try/ajax/demo_test.txt");不要事件绑定就会自动加载了。 以下是window.onload与 $(document).ready()的加载区别: window.onload：必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()：是DOM结构绘制完毕后就执行，不必等到加载完毕。 哥们儿，明白了么 [/quote] 多谢大神了 解决了！
天际的海浪 2018-06-08
  • 打赏
  • 举报
 回复
你要读取哪里的文件？ 用户客户端的文件不可能让你直接自动读取； 你自己网站内的文件可以用ajax方式读取（可能要在iis服务器上设置下允许下载txt文件）； 其它网站的文件需要在你的服务器端读取再用ajax传到前端；
ambit_tsai-微信 2018-06-08
  • 打赏
  • 举报
 回复
没看明白，是指在网页打开时从服务器加载一个文件？
读文件 —— WEB前端读取本地文件内容哪些事（前台解析txt文件）…… – 杰儿__er 的博客 – CSDN博客...
WEB前端读取本地文件内容哪些事（前台解析txt文件）……参考链接：https://blog.csdn.net/pl1612127/article/details/77862174可供参考的链接：......
html5如何读取txt,【Web前端问题】html5的filereader读取txt
描述你的问题想做一个HTML5的小说阅读器，用filereader读取txt、pdf等文件。换了好几种方式，总是不对。求教。贴上相关代码第一种：var f=new FileReader();var neirong=f.onload.readAsText("111.txt",["utf-8"]);...
h5读取mysql_html5,javascript_html5的filereader读取txt，html5,javascript,filereader - phpStudy
html5的filereader读取txt描述你的问题想做一个HTML5的小说阅读器，用filereader读取txt、pdf等文件。换了好几种方式，总是不对。求教。贴上相关代码第一种：var f=new FileReader();var neirong=f.onload....
js 读取本地文件遇到ajax跨域问题
语言：js 对象：easyUI SKD demo 级别：小小白级 本篇博文记录博主从js小小白的进化历程，下述问题对老鸟来说再简单不过，但是作为新手一定会经历这样的阶段，所以还是分享出来，希望能为以后同样是小小白的猿...
html 微信无法获取图片,微信浏览器input file 图片选择问题，获取不到图片的type等信息...
求教一下各位大神，在微信公众号页面出现的问题，通过点击获取一张图片用于上传时，从‘图库’里面获取的图片各个参数(file.type,file.name等)都正常,file.type为image/png等，但是从‘最近’或者‘图片’获取的图片...
HTML5

39,084

社区成员

5,548

社区内容

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章