- 读文件 —— WEB前端读取本地文件内容哪些事（前台解析txt文件）……
- 参考链接：https://blog.csdn.net/pl1612127/article/details/77862174可供参考的链接：https://zhidao.baidu.com/question/2052152980493488107.html
- JavaScript中的ActiveXObject对象）
写博客 消息
签到赢大礼>>
读文件 —— WEB前端读取本地文件内容哪些事（前台解析txt文件）……
杰儿__er
阅读数 14941 更多
WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
强制让浏览器允许JS读写本地文件……的操作！
问题回复——5：
前端无法像原生APP一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发，用户可通过以下三种方式操作触发：
1、通过input type=”file” 选择本地文件
2、通过拖拽的方式把文件拖过来
3、在编辑框里面复制粘贴
参考网址：http://web.jobbole.com/93227/
—————————————————————————————————————————
人机交互方式的实现：
演示效果截图：
代码部分（interaction.html）：
1
<script src="jquery.js">script>
2
<input type="file" value="选择文件" id="upload" style="display:none;" οnclick="return fileUpload_onclick()" οnchange="return fileUpload_onselect()"/>
3
<input type="button" value="选择文件" id="import">
4
<script>
5
$("#import").click(function(){
6
$("#upload").click();//代码去触发点击
7
})
8
/**
9
* 点击[选择文件]按钮时触发的事件
10
*/
11
function fileUpload_onclick(){
12
alert("HAHA");
13
}
14
/**
15
* 选中文件后触发的事件
16
* 直接前台解析txt文件。使用的是FileReader对象
17
*/
18
function fileUpload_onselect(){
19
console.log("onselect");
20
var path = $("#upload").val();//文件路径
21
console.log(path);//C:fakepathtestfile.txt
22
var selectedFile = document.getElementById("upload").files[0];
23
console.log(selectedFile); //File(20) {name: "testfile.txt", lastModified: 1531300104720, lastModifiedDate: Wed Jul 11 2018 17:08:24 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 20, …}
24
console.log(selectedFile.src);// undefined
25
console.log(selectedFile.type);// text/plain
26
var name = selectedFile.name;//读取选中文件的文件名
27
var size = selectedFile.size;//读取选中文件的大小
28
console.log("wenjianming:"+name+"daxiao:"+size);//wenjianming:testfile.txtdaxiao:20
29
var reader = new FileReader();//这是核心！！读取操作都是由它完成的
30
reader.readAsText(selectedFile);
31
//readAsText(file,[encoding]):将文件读取为文本，encoding缺省为UTF-8 readAsText(selectedFile,'UTF-8')
32
reader.onload = function(oFREvent){//读取完毕从中取值
33
var pointsTxt = oFREvent.target.result;
34
alert(pointsTxt)
35
// your code。。。。
36
}
37
}
38
script>
reader.readAsText(selectedFile);
reader.onload = function(oFREvent){//读取完毕从中取值 var pointsTxt = oFREvent.target.result; alert(pointsTxt) // your code。。。。 } }
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
1
//【h5文件操作API blob对象】
2
var debug = {hello: "world"};
3
var blob = new Blob([JSON.stringify(debug, null, 2)],
4
{type : 'application/json'});
5
6
7
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob
对FileReadwe理解的官网网址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
可供参考的链接：https://blog.csdn.net/xwq1012/article/details/41942013
—————————————————————————————————————————
JavaScript中的ActiveXObject队形的实现：
演示效果截图：
代码部分(activeXObject.html)：
1
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
<title>ActiveXObjecttitle>
6
head>
7
<body>
8
<div id="aa">div>
9
10
<script language="javascript" type="text/javascript">
11
var fso, ts, s ;
12
var ForReading = 1;
13
//创建FileSystemObject对象的代码
14
fso = new ActiveXObject("Scripting.FileSystemObject");
15
//[object] { } (Mozilla 11 Windows) 支持 （IE 支持）
16
// （Chrome 58 Windows） 不支持
17
//QQ浏览器也不支持，提示：（Uncaught ReferenceError: ActiveXObject is not defined at activeXObject.html:14）
18
console.log(fso);
19
//打开文件 (特别注意：路径中的转义)
20
ts = fso.OpenTextFile("C:\Users\14573\Desktop\file\AAA\testfile.txt", ForReading);
21
//读取文件一行内容到字符串
22
s = ts.ReadLine();
23
//显示字符串信息
24
document.getElementById("aa").innerHTML=s;
25
//关闭文件
26
ts.Close();
27
script>
28
body>
29
html>
官网中有明确提示：
| 警告 |
|---|
此对象为 Microsoft 扩展，仅在 Internet Explorer 中受支持，在 Windows 8.x 应用商店应用中不受支持。 |
| 说明 |
|---|
Internet Explorer 9 标准模式、Internet Explorer 10 标准模式、Internet Explorer 11 标准模式和 Windows 应用商店应用或更高版本不支持在远程服务器上创建 ActiveXObject。 |
参考链接：https://blog.csdn.net/pl1612127/article/details/77862174
可供参考的链接：https://zhidao.baidu.com/question/2052152980493488107.html
JavaScript中的ActiveXObject对象）
—————————————————————————————————————————
浏览器的兼容性，针对不同的浏览器创建不同的对象的实现：
演示效果截图：
运行后谷歌浏览器不能正常显示，出现以下错误（解决：https://www.cnblogs.com/micua/p/chrome-file-protocol-support-ajax.html）：
| XMLHttpRequest cannot load file:///E:2014/DEMO/html_ajax/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. |
以上错误提示是由于AJAX方法涉及到 跨域 的问题导致！
由于该网友没有在服务器环境里运行含有ajax方法的页面，而是直接通过浏览器打开（类似file:///的访问形式，即file协议）
本地页面ajax()请求本地页面，须通过服务器环境运行，类似这样：
http://127.0.0.1:8888/EXP99.COM/html_ajax/index.html
在某些浏览器中是允许这种操作的，比如Firefox浏览器，也就是说Filefox支持file协议下的AJAX请求。
代码部分(activeXobject_interaction.html)：
1
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5
head>
6
<body>
7
<div id="title">div>
8
<div id="myDiv"><h2>Let AJAX change this texth2>div>
9
<button type="button" οnclick="loadXMLDoc()">Change Contentbutton>
10
body>
11
<script>
12
function loadXMLDoc()
13
{
14
var xmlhttp;
15
if (window.XMLHttpRequest)
16
{// code for IE7+, Firefox, Chrome, Opera, Safari
17
xmlhttp=new XMLHttpRequest();
18
}
19
else
20
{// code for IE6, IE5
21
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
22
}
23
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) //readyState = 4 status = 0 { document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText; //document.getElementById(“myDiv”).innerHTML=”TEST”; } } console.log(xmlhttp);xmlhttp.open(“POST”,”c:\testfile.txt”,true);xmlhttp.send();}