读文件 —— WEB前端读取本地文件内容哪些事（前台解析txt文件）……

本文链接：https://blog.csdn.net/weixin_30030167/article/details/100909270

文章目录 [隐藏]

读文件 —— WEB前端读取本地文件内容哪些事（前台解析txt文件）……
参考链接：https://blog.csdn.net/pl1612127/article/details/77862174可供参考的链接：https://zhidao.baidu.com/question/2052152980493488107.html
JavaScript中的ActiveXObject对象）

首页博客学院下载论坛 APP 问答商城活动 VIP会员

专题招聘 ITeye GitChat 图文课

写博客

消息

签到赢大礼>>

原

2018年07月11日 22:15:56
杰儿__er
阅读数 14941 更多

分类专栏：

WEB

本文链接： https://blog.csdn.net/weixin_42167759/article/details/81004553

强制让浏览器允许JS读写本地文件……的操作！

问题描述：

让自己的浏览器允许js读写本地文件，尽可能多的兼容各种浏览器。（即本机的js文件读写本机的文件）

问题回复——1：

您的意思是不需要浏览器与用户交互直接操作用户机上的文件？

不符合浏览器的安全标准，属于浏览器的设计缺陷

所以浏览器是不可能这样支持的

—

就是没有发布的页面，要执行js操作本机的文件？

这是可以的，但也是需要通过 人机交互来提醒用户 的。

问题回复——2：

js 可以对windows系统下的文件进行操作，如果是这样的话建议您做成hta因为它的使用权限比普通的html高可以更轻松的调用系统clsid或者 activex 。

但是您说的html+js对所有平台(包括手机)这一点是出入的。

因为windows提供了文件对象模型，我们可以通过js 来调用activex组件来操作本机文件但是到了linux下几乎是不可能的，linux的系统安全性特高，查个文件属性有时候还要root权限别说要执行文件操作。

而且现在流行的android系统也是linux内核的。

参考链接：https://zhidao.baidu.com/question/524554520.html?qbl=relate_question_0&word=%B7%C7IE%E4%AF%C0%C0%C6%F7%20%B6%C1%CE%C4%BC%FE

问题回复——3：

web程序不要妄想对客户机的文件进行读写。ActiveXObject是IE特有的。这种东西本身就是不安全的，现在不允许，今后更不会允许。假设我做一网站，你来访问，访问了之后我直接在你的磁盘上写上1亿个垃圾txt文件，你咋想？所以不要考虑这个了。读写文件是针对服务器的。

具体如下：

电脑常见问题解决

1、无法自动识别硬盘控制器

使用非正版的个别操作系统光盘，在安装系统时，容易出现此错误。原因是非正版光盘自动加载的硬盘控制器驱动不符合电脑自身需要的驱动。这种情况就建议换正版光盘安装操作系统。

2、手动更新错误的驱动程序

windows操作系统正常使用，但手动更新驱动程序把硬盘控制器的驱动程序更新错误，导致此故障。解决方法是进入windows系统高级菜单，选择最后一次的正常配置，即可正常进入系统。

3、bios设置变化后所导致

windows操作系统正常，但是由于某些原因，用户修改了bios设置，导致0x0000007b故障。

问题回复——4：

你可以使用TideSDK开发本地客户端，开发时可以使用JavaScript语言。另外，如果是Web应用，如果需要 数据存储 ，可以使用离线存储技术或者浏览器端数据库。Chrome下面要实现这样的功能必须使用浏览器扩展（Extension）+浏览器插件（Plugin）。目前有为Chrome提供本地文件读写支持的开源项目： https://github.com/airyland/npapi-file-io

参考网址： https://zhidao.baidu.com/question/398969190.html?qbl=relate_question_1&word=%B7%C7IE%E4%AF%C0%C0%C6%F7%20%B6%C1%CE%C4%BC%FE

问题回复——5：
前端无法像原生APP一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发，用户可通过以下三种方式操作触发：
1、通过input type=”file” 选择本地文件
2、通过拖拽的方式把文件拖过来
3、在编辑框里面复制粘贴
参考网址：http://web.jobbole.com/93227/

综上所述：

【1】针对回复——1，并结合回复——5：可以get到WEB端可以解析txt文件但是需要人机交互；

【2】针对回复——2、3：对2中我们get到因为windows提供了文件对象模型，可以用js来调用activex组件来实现。

结合回复——3，get到JavaScript中的ActiveXObject对象是IE特有的，其他的浏览器不支持该对象；

【3】针对回复——3：我们会想到浏览器的兼容性问题，不同的浏览器创建不同的文件对象模型。

【4】针对回复——4：get到Chrome下面要实现这样的功能必须使用浏览器扩展+插件。

—————————————————————————————————————————

人机交互方式的实现：

演示效果截图：

resize,m_fill,w_1748,h_262#

resize,m_fill,w_1552,h_638#

resize,m_fill,w_1920,h_290#

代码部分（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。。。。 } }</script>

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的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

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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>ActiveXObject</title>

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。

对ActiveXObject理解的官网网址 https://msdn.microsoft.com/zh-cn/library/7sw4ddf8(v=vs.94).aspx

参考链接：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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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 text</h2></div>

9

<button type="button" οnclick="loadXMLDoc()">Change Content</button>

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

//当使用async=true时，请规定在响应处于onreadysrtatechenge事件中的就绪状态时执行函数

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();}</script></html>

网页中可以使用相对URL的能力通常意味着我们能使用本地文件系统来开发和测试HTML，并避免对Web服务器进行不必要的部署。

然而当使用XMLHttpRequest进行Ajax编程时，这通常是不行的。

XMLHttpRequest用于同HTTP和HTTPS协议一起工作。理论上，它能够同FTP这样的其他协议一起工作，但比如请求方法和响应状态码等部分API是HTTP特有的。如果从本地文件中加载网页，那么该网页中的脚本将无法通过相对URL使用XMLHttpRequest，因为这些URL将相对于file：//URL而不是http：//URL。而同源策略通常会阻止使用绝对http：//URL。结果是当使用XMLHttpRequest时，为了测试它们通常必须把文件上传到Wb服务器或者运行一个本地服务器。

参考链接：https://blog.csdn.net/HU_YEWEN/article/details/80709410

虽然名字含有XML ，但该对象可以接受任何数据类型而不仅仅为XML，而且它支持的协议类型不限于HTTP（包括file,ftp）

XMLHttpRequest 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。

因此解决了浏览器，创建文件队象的差异性，IE使用ActiveOBject，非IE使用XMLHttpRequest，但是此时非IE文件队象在操作对象时候即便是支持file协议，但是onreadystatechenge方法中的一些请求方法与相应状态码是HTTP特有的。并且XMLHttpRequest它为客户端提供了在客户端和服务器之间传输数据的功能。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject），（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

对XMLHttpRequest理解的官网网址https://msdn.microsoft.com/zh-cn/library/7sw4ddf8(v=vs.94).aspx
浏览器兼容性的解决参考网址：https://blog.csdn.net/chuck_kui/article/details/54943053

参考链接：https://blog.csdn.net/HU_YEWEN/article/details/80709410

https://blog.csdn.net/weiyanghuadi/article/details/8991800

http://blog.sina.com.cn/s/blog_4678e7630100xyof.html

—————————————————————————————————————————

综上所述：

（WEB操作本地文件：

1、h5 文件操作API：需要人机交互；

2、让ActiveXObject( “Microsoft.XmlDom “)，对象在IE浏览器下显示数(IE5 ie6支持)；

3、XMLHttpRequest，它为客户端提供了在客户端和服务器之间传输数据的功能。https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

4、ajax实现：主要与服务器交互。）

“我们不再需要下载并且安装软件。一个简单的web浏览器和一个可供使用的互联网就足以让我们在任何时间，任何地点，还有任何平台上使用任何web应用程序。”

简单来说，web应用很酷，但是相对于桌面应用来说，它们有比较显著的弱点：它们无法在一个有层次的文件夹结构体即文件系统中互动和组织。幸运的是，如果我们使用Filesystem API，我们可以做到。这个API帮助我们控制私有的本地文件系统“沙箱(sandbox)”，在这里我们可以读和写文件，创建和排列文件夹。目前不只有Google的Chrome完整的支持Filesystem API，我觉得我们还是有必要学习这个强大并且方便的本地存储特性。

在之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的web应用依赖了第三方的插件，而不是很独立。在HTML5标准中，默认提供了操作文件的API让这一切直接标准化。有了操作文件的API，让我们的Web应用可以很轻松的通过JS来控制文件的读取、写入、文件夹、文件等一系列的操作。

*****https://blog.csdn.net/arvin0/article/details/51159424?locationNum=14&fps=1

http://www.w3school.com.cn/tiy/t.asp?f=xdom_httprequest_j

https://blog.csdn.net/bilichen006/article/details/70994449

https://blog.csdn.net/yangaiyu/article/details/73303161

—————————————————————————————————————————