读文件 —— WEB前端读取本地文件内容哪些事(前台解析txt文件)……
强制让浏览器允许JS读写本地文件……的操作!
问题回复——5:
前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:
1、通过input type=”file” 选择本地文件
2、通过拖拽的方式把文件拖过来
3、在编辑框里面复制粘贴
参考网址:http://web.jobbole.com/93227/
---------------------------------------------------------------------------------------------------------------------------
人机交互方式的实现:
演示效果截图:
代码部分(interaction.html):
<script src="jquery.js"></script>
<input type="file" value="选择文件" id="upload" style="display:none;" ο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:\fakepath\testfile.txt var selectedFile = document.getElementById("upload").files[0];console.log(selectedFile); //File(20) {name: "testfile.txt", lastModified: 1531300104720, lastModifiedDate: Wed Jul 11 2018 17:08:24 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 20, …}console.log(selectedFile.src);// undefinedconsole.log(selectedFile.type);// text/plainvar name = selectedFile.name;//读取选中文件的文件名var size = selectedFile.size;//读取选中文件的大小console.log("wenjianming:"+name+"daxiao:"+size);//wenjianming:testfile.txtdaxiao:20var reader = new FileReader();//这是核心!!读取操作都是由它完成的reader.readAsText(selectedFile);
//readAsText(file,[encoding]):将文件读取为文本,encoding缺省为UTF-8 readAsText(selectedFile,'UTF-8')reader.onload = function(oFREvent){//读取完毕从中取值var pointsTxt = oFREvent.target.result;alert(pointsTxt)// your code。。。。}}
</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()
方法后返回结果。
//【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理解的官网网址:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
可供参考的链接:https://blog.csdn.net/xwq1012/article/details/41942013
---------------------------------------------------------------------------------------------------------------------------
JavaScript中的ActiveXObject队形的实现:
演示效果截图:
代码部分(activeXObject.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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\\testfile.txt", ForReading);
//读取文件一行内容到字符串
s = ts.ReadLine();
//显示字符串信息
document.getElementById("aa").innerHTML=s;
//关闭文件
ts.Close();
</script>
</body>
</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):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body><div id="title"></div>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" οnclick="loadXMLDoc()">Change Content</button>
</body>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}
else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
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
“我们不再需要下载并且安装软件。一个简单的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
---------------------------------------------------------------------------------------------------------------------------
读文件 —— WEB前端读取本地文件内容哪些事(前台解析txt文件)……相关推荐
- 用 ABAP 读取本地文本文件内容试读版
零基础 ABAP 学习教程系列文章的目录 ABAP 标准培训教程 BC400 学习笔记之一:ABAP 服务器的架构和一个典型的 ABAP 程序结构介绍 ABAP 标准培训教程 BC400 学习笔记之二 ...
- txt文件字符在计算机,(35)在C盘当前文件夹下有一个已经建立好的顺序文件Alph.txt,文件内容为只含有字母的一个字符去、...
(35)在C盘当前文件夹下有一个已经建立好的顺序文件Alph.txt,文件内容为只含有字母的一个字符去. (35)在C盘当前文件夹下有一个已经建立好的顺序文件Alph.txt,文件内容为只含有字母的一 ...
- 给知网没有书签的pdf文件添加书签(利用python解析txt文件内容并为pdf添加目录)
今天利用tampermonkey的知网下载助手脚本下载pdf格式论文时,发现论文缺少书签,而脚本可以下载一个txt格式的书签(目录),因此打算利用python将txt格式的目录添加到pdf中. txt ...
- excel内容少却文件很大_009- EXCEL文件的表格内的数据内容明明不多,但是文件却变得很大...
为什么EXCEL文件的表格内的数据内容明明不多,但是文件却变得很大? 一.问题现象: EXCEL文件的表格内的数据内容明明不多,但是文件却变得很大,而且打开也出奇的慢.别的EXCEL文件,大小正常,打 ...
- Web前端:Web前端开发工程师工作内容网页案例设计
题目要求 参考代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
- 到底前端好不好学?Web前端需要学习什么内容?
前端作为互联网行业中的热门职位,对于很多想要进互联网IT行业工作的同学来说,学习前端难度相对低一些,可很多零基础的小白还是有许许多多的疑问,到底前端好不好学?web前端又需要学习什么内容,接下来就和小 ...
- 【Java文件操作(八)】将控制台输出重定向到txt文件
我的博客--Java文件操作系列 [Java文件操作(一)]递归打印文件目录 [Java文件操作(二)]删除文件夹,但保留其内部文件 [Java文件操作(三)]递归复制文件夹内所有文件 [Java文件 ...
- java解析txt文件
废话不多说,上代码: /** * 解析txt文件,按|进行分割 * @param in * @param fileDate * @return */ private List readPremiumT ...
- springboot解析txt文件顺便加到数据库中(nohup文件)
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂 前言 现在是:2022年4月20日13:33:23 以前是怎么都没想到,我需要在服务器的nohup文件中找记录,然后往数据库里面更新.具体因为啥不提 ...
最新文章
- 【常用工具】常用工具收集
- matlab-等高线图-三维曲线的绘制
- oracle ora 02020,ORA-02020 too many database links in use再现
- 通过NFS访问编年引擎
- Java中注释的使用
- CCF-CSP 稀疏向量问题(2020-6)
- android 设备连接,Android安卓设备连接Mac的方法
- 汽车编程都是用matlab,MATLAB编程与汽车仿真应用
- 用Chntpw cd disk 或老毛桃清除WIN7和2008密码
- eclipse: workspace出错导致无法启用的解决
- SURF算法python实现
- 雅虎邮箱为什么停止服务_雅虎的发展项目将变成什么样?
- “ 试题管理系统”需求分析报告
- C#中的ToolStrip控件的使用
- java 服务端验证苹果支付applepay账单
- 21天边唱边学 拯救你的英语听说
- 伴随着我娃成长的运维平台(图片持续更新..)
- 我心中的程序设计新时代
- fabric-ca-client颁发Orderer节点证书
- [Qt]QMainWindow
热门文章
- 机器学习技法1-Linear Support Vector Machine
- 初学python之路-day10
- 洛谷 P1678 烦恼的高考志愿
- Nginx 反向代理 负载均衡 虚拟主机
- codevs 2879 堆的判断
- at android.widget.AbsListView$RecycleBin.addScrapView(AbsListView.java:)
- Exploring the 7 Different Types of Data Stories
- 12个球问题--微软面试题
- leetcode算法题--栈的压入、弹出序列
- leetcode算法题--简化路径