读⽂件——WEB前端读取本地⽂件内容哪些事(前台解析txt
⽂件)……
强制让浏览器允许JS读写本地⽂件……的操作!
问题描述:
让⾃⼰的浏览器允许js读写本地⽂件,尽可能多的兼容各种浏览器。(即本机的js⽂件读写本机的⽂件)
问题回复——1:
您的意思是不需要浏览器与⽤户交互直接操作⽤户机上的⽂件?
不符合浏览器的安全标准,属于浏览器的设计缺陷
所以浏览器是不可能这样⽀持的
--
就是没有发布的页⾯,要执⾏js操作本机的⽂件?
这是可以的,但也是需要通过⼈机交互来提醒⽤户的。
问题回复——2:
js 可以对windows系统下的⽂件进⾏操作,如果是这样的话建议您做成hta因为它的使⽤权限⽐普通的html⾼可以更轻松的调⽤系统clsid 或者activex。
但是您说的html+js对所有平台(包括⼿机)这⼀点是出⼊的。
因为windows提供了⽂件对象模型,我们可以通过js 来调⽤activex组件来操作本机⽂件但是到了linux下⼏乎是不可能的,linux的系统安全性特⾼,查个⽂件属性有时候还要root权限别说要执⾏⽂件操作。
⽽且现在流⾏的android系统也是linux内核的。
参考链接:zhidao.baidu/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、⼿动更新错误的驱动程序
alert怎么读windows操作系统正常使⽤,但⼿动更新驱动程序把硬盘控制器的驱动程序更新错误,导致此故障。解决⽅法是进⼊windows系统⾼级菜单,选择最后⼀次的正常配置,即可正常进⼊系统。
3、bios设置变化后所导致
windows操作系统正常,但是由于某些原因,⽤户修改了bios设置,导致0x0000007b故障。
问题回复——4:
你可以使⽤TideSDK开发本地客户端,开发时可以使⽤JavaScript语⾔。另外,如果是Web应⽤,如果需要,可以使⽤离线存储技术或者浏览器端数据库。Chrome下⾯要实现这样的功能必须使⽤浏览器扩展(Extension)+浏览器插件(Plugin)。⽬前有为Chrome提供本地⽂件读写⽀持的开源项⽬:
参考⽹址:
问题回复——5:
前端⽆法像原⽣APP⼀样直接操作本地⽂件,否则的话打开个⽹页就能把⽤户电脑上的⽂件偷光了,所以需要通过⽤户触发,⽤户可通过以下三种⽅式操作触发:
1、通过input type=”file” 选择本地⽂件
2、通过拖拽的⽅式把⽂件拖过来
3、在编辑框⾥⾯复制粘贴
参考⽹址:
综上所述:
【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下⾯要实现这样的功能必须使⽤浏览器扩展+插件。
---------------------------------------------------------------------------------------------------------------------------
⼈机交互⽅式的实现:
演⽰效果截图:
代码部分(interaction.html):
<script src="jquery.js"></script>
<input type="file" value="选择⽂件" id="upload" οnclick="return fileUpload_onclick()" οnchange="return fileUpload_onselect()"/>
<input type="button" value="选择⽂件" id="import">
<script>
$("#import").click(function(){
$("#upload").click();//代码去触发点击
})
/**
* 点击[选择⽂件]按钮时触发的事件
*/
function fileUpload_onclick(){
alert("HAHA");
}
/
**
* 选中⽂件后触发的事件
* 直接前台解析txt⽂件。使⽤的是FileReader对象
*/
function fileUpload_onselect(){
console.log("onselect");
var path = $("#upload").val();//⽂件路径
console.log(path); //C:\
var selectedFile = ElementById("upload").files[0];
console.log(selectedFile); //File(20) {name: "", lastModified: 1531300104720, lastModifiedDate: Wed Jul 11 2018 17:08:24 GMT+0800 (中国标准时间), console.log(selectedFile.src);// undefined
console.pe);// text/plain
var name = selectedFile.name;//读取选中⽂件的⽂件名
var size = selectedFile.size;//读取选中⽂件的⼤⼩
console.log("wenjianming:"+name+"daxiao:"+size);//daxiao:20
var reader = new FileReader();//这是核⼼!!读取操作都是由它完成的
//readAsText(file,[encoding]):将⽂件读取为⽂本,encoding缺省为UTF-8 readAsText(selectedFile,'UTF-8')
var pointsTxt = sult;
alert(pointsTxt)
// your code。。。。
}
}
</script>
FileReader 对象允许Web应⽤程序异步读取存储在⽤户计算机上的⽂件(或原始数据缓冲区)的内容,使⽤或对象指定要读取的⽂件或数据。
其中File对象可以是来⾃⽤户在⼀个元素上选择⽂件后返回的对象,也可以来⾃拖放操作⽣成的对象,还可以是来⾃在⼀个上执⾏mozGetAsFile()⽅法后返回结
果。
//【h5⽂件操作API blob对象】
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
{type : 'application/json'});
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // ⼀个包含DOMString的数组
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob
对FileReadwe理解的官⽹⽹址:
可供参考的链接:blog.csdn/xwq1012/article/details/41942013
---------------------------------------------------------------------------------------------------------------------------
JavaScript中的ActiveXObject队形的实现:
演⽰效果截图:
代码部分(activeXObject.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/D
TD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ActiveXObject</title>
</head>
<body>
<div id="aa"></div>
<script language="javascript" type="text/javascript">
var fso, ts, s ;
var ForReading = 1;
//创建FileSystemObject对象的代码
fso = new ActiveXObject("Scripting.FileSystemObject");
//[object] { } (Mozilla 11 Windows) ⽀持(IE ⽀持)
// (Chrome 58 Windows)不⽀持
//QQ浏览器也不⽀持,提⽰:(Uncaught ReferenceError: ActiveXObject is not defined at activeXObject.html:14)
console.log(fso);
//打开⽂件 (特别注意:路径中的转义)
ts = fso.OpenTextFile("C:\\Users\\14573\\Desktop\\file\\AAA\\", ForReading);
//读取⽂件⼀⾏内容到字符串
s = ts.ReadLine();
//显⽰字符串信息
//关闭⽂件
ts.Close();
</script>
</body>
</html>
官⽹中有明确提⽰:
说明
Internet Explorer 9 标准模式、Internet Explorer 10 标准模式、Internet Explorer 11 标准模式和 Windows 应⽤商店应⽤或更⾼版本不⽀持在远程服务器上创建 ActiveXObject。
对ActiveXObject理解的官⽹⽹址msdn.microsoft/zh-cn/library/7sw4ddf8(v=vs.94).aspx
参考链接:blog.csdn/pl1612127/article/details/77862174
可供参考的链接:zhidao.baidu/question/2052152980493488107.html
JavaScript中的ActiveXObject对象)
---------------------------------------------------------------------------------------------------------------------------
浏览器的兼容性,针对不同的浏览器创建不同的对象的实现:
演⽰效果截图:
运⾏后⾕歌浏览器不能正常显⽰,出现以下错误(解决:wwwblogs/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()请求本地页⾯,须通过服务器环境运⾏,类似这样:
127.0.0.1:8888/EXP99.COM/html_ajax/index.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论