读文件 —— WEB前端读取本地文件内容哪些事（前台解析txt文件）……
強(qiáng)制讓瀏覽器允許JS讀寫本地文件……的操作！
問題描述： 讓自己的瀏覽器允許js讀寫本地文件，盡可能多的兼容各種瀏覽器。（即本機(jī)的js文件讀寫本機(jī)的文件） 問題回復(fù)——1： 您的意思是不需要瀏覽器與用戶交互直接操作用戶機(jī)上的文件？不符合瀏覽器的安全標(biāo)準(zhǔn)，屬于瀏覽器的設(shè)計(jì)缺陷 所以瀏覽器是不可能這樣支持的 --
就是沒有發(fā)布的頁面，要執(zhí)行js操作本機(jī)的文件？ 這是可以的，但也是需要通過人機(jī)交互來提醒用戶的。 問題回復(fù)——2： js 可以對windows系統(tǒng)下的文件進(jìn)行操作，如果是這樣的話建議您做成hta因?yàn)樗氖褂脵?quán)限比普通的html高可以更輕松的調(diào)用系統(tǒng)clsid或者activex。 但是您說的html+js對所有平臺(包括手機(jī))這一點(diǎn)是出入的。 因?yàn)閣indows提供了文件對象模型，我們可以通過js 來調(diào)用activex組件來操作本機(jī)文件但是到了linux下幾乎是不可能的，linux的系統(tǒng)安全性特高，查個文件屬性有時候還要root權(quán)限別說要執(zhí)行文件操作。 而且現(xiàn)在流行的android系統(tǒng)也是linux內(nèi)核的。
參考鏈接：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 問題回復(fù)——3： web程序不要妄想對客戶機(jī)的文件進(jìn)行讀寫。ActiveXObject是IE特有的。這種東西本身就是不安全的，現(xiàn)在不允許，今后更不會允許。假設(shè)我做一網(wǎng)站，你來訪問，訪問了之后我直接在你的磁盤上寫上1億個垃圾txt文件，你咋想？所以不要考慮這個了。讀寫文件是針對服務(wù)器的。 具體如下： 電腦常見問題解決 1、無法自動識別硬盤控制器 使用非正版的個別操作系統(tǒng)光盤，在安裝系統(tǒng)時，容易出現(xiàn)此錯誤。原因是非正版光盤自動加載的硬盤控制器驅(qū)動不符合電腦自身需要的驅(qū)動。這種情況就建議換正版光盤安裝操作系統(tǒng)。 2、手動更新錯誤的驅(qū)動程序 windows操作系統(tǒng)正常使用，但手動更新驅(qū)動程序把硬盤控制器的驅(qū)動程序更新錯誤，導(dǎo)致此故障。解決方法是進(jìn)入windows系統(tǒng)高級菜單，選擇最后一次的正常配置，即可正常進(jìn)入系統(tǒng)。 3、bios設(shè)置變化后所導(dǎo)致 windows操作系統(tǒng)正常，但是由于某些原因，用戶修改了bios設(shè)置，導(dǎo)致0x0000007b故障。 問題回復(fù)——4： 你可以使用TideSDK開發(fā)本地客戶端，開發(fā)時可以使用JavaScript語言。另外，如果是Web應(yīng)用，如果需要數(shù)據(jù)存儲，可以使用離線存儲技術(shù)或者瀏覽器端數(shù)據(jù)庫。Chrome下面要實(shí)現(xiàn)這樣的功能必須使用瀏覽器擴(kuò)展（Extension）+瀏覽器插件（Plugin）。目前有為Chrome提供本地文件讀寫支持的開源項(xiàng)目：https://github.com/airyland/npapi-file-io 參考網(wǎng)址：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
問題回復(fù)——5：
前端無法像原生APP一樣直接操作本地文件，否則的話打開個網(wǎng)頁就能把用戶電腦上的文件偷光了，所以需要通過用戶觸發(fā)，用戶可通過以下三種方式操作觸發(fā)：
1、通過input type=”file” 選擇本地文件
2、通過拖拽的方式把文件拖過來
3、在編輯框里面復(fù)制粘貼
參考網(wǎng)址：http://web.jobbole.com/93227/
---------------------------------------------------------------------------------------------------------------------------
人機(jī)交互方式的實(shí)現(xiàn)：
演示效果截圖：
代碼部分（interaction.html）：
? ? ?reader.readAsText(selectedFile);
reader.onload = function(oFREvent){//讀取完畢從中取值 var pointsTxt = oFREvent.target.result; alert(pointsTxt) // your code。。。。 } }</script>FileReader?對象允許Web應(yīng)用程序異步讀取存儲在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用?File?或?Blob?對象指定要讀取的文件或數(shù)據(jù)。
其中File對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象,也可以來自拖放操作生成的?DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執(zhí)行mozGetAsFile()方法后返回結(jié)果。
//【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的數(shù)組 var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob對FileReadwe理解的官網(wǎng)網(wǎng)址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
可供參考的鏈接：https://blog.csdn.net/xwq1012/article/details/41942013
---------------------------------------------------------------------------------------------------------------------------
JavaScript中的ActiveXObject隊(duì)形的實(shí)現(xiàn)：
演示效果截圖：
代碼部分(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; //創(chuàng)建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); //打開文件 (特別注意：路徑中的轉(zhuǎn)義) ts = fso.OpenTextFile("C:\\Users\\14573\\Desktop\\file\\AAA\\testfile.txt", ForReading); //讀取文件一行內(nèi)容到字符串 s = ts.ReadLine(); //顯示字符串信息 document.getElementById("aa").innerHTML=s; //關(guān)閉文件 ts.Close(); </script> </body> </html>官網(wǎng)中有明確提示：
此對象為 Microsoft 擴(kuò)展，僅在 Internet Explorer 中受支持，在 Windows 8.x 應(yīng)用商店應(yīng)用中不受支持。 |
Internet Explorer 9 標(biāo)準(zhǔn)模式、Internet Explorer 10 標(biāo)準(zhǔn)模式、Internet Explorer 11 標(biāo)準(zhǔn)模式和 Windows 應(yīng)用商店應(yīng)用或更高版本不支持在遠(yuǎn)程服務(wù)器上創(chuàng)建?ActiveXObject。 |
參考鏈接：https://blog.csdn.net/pl1612127/article/details/77862174
可供參考的鏈接：https://zhidao.baidu.com/question/2052152980493488107.html
JavaScript中的ActiveXObject對象）
---------------------------------------------------------------------------------------------------------------------------
瀏覽器的兼容性，針對不同的瀏覽器創(chuàng)建不同的對象的實(shí)現(xiàn)：
演示效果截圖：
運(yùn)行后谷歌瀏覽器不能正常顯示，出現(xiàn)以下錯誤（解決：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方法涉及到?跨域 的問題導(dǎo)致！
由于該網(wǎng)友沒有在服務(wù)器環(huán)境里運(yùn)行含有ajax方法的頁面，而是直接通過瀏覽器打開（類似file:///的訪問形式，即file協(xié)議）
本地頁面ajax()請求本地頁面，須通過服務(wù)器環(huán)境運(yùn)行，類似這樣：
http://127.0.0.1:8888/EXP99.COM/html_ajax/index.html
在某些瀏覽器中是允許這種操作的，比如Firefox瀏覽器，也就是說Filefox支持file協(xié)議下的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");} //當(dāng)使用async=true時，請規(guī)定在響應(yīng)處于onreadysrtatechenge事件中的就緒狀態(tài)時執(zhí)行函數(shù) 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>網(wǎng)頁中可以使用相對URL的能力通常意味著我們能使用本地文件系統(tǒng)來開發(fā)和測試HTML，并避免對Web服務(wù)器進(jìn)行不必要的部署。
然而當(dāng)使用XMLHttpRequest進(jìn)行Ajax編程時，這通常是不行的。
XMLHttpRequest用于同HTTP和HTTPS協(xié)議一起工作。理論上，它能夠同F(xiàn)TP這樣的其他協(xié)議一起工作，但比如請求方法和響應(yīng)狀態(tài)碼等部分API是HTTP特有的。如果從本地文件中加載網(wǎng)頁，那么該網(wǎng)頁中的腳本將無法通過相對URL使用XMLHttpRequest，因?yàn)檫@些URL將相對于file：//URL而不是http：//URL。而同源策略通常會阻止使用絕對http：//URL。結(jié)果是當(dāng)使用XMLHttpRequest時，為了測試它們通常必須把文件上傳到Wb服務(wù)器或者運(yùn)行一個本地服務(wù)器。
參考鏈接：https://blog.csdn.net/HU_YEWEN/article/details/80709410
雖然名字含有XML?，但該對象可以接受任何數(shù)據(jù)類型而不僅僅為XML，而且它支持的協(xié)議類型不限于HTTP（包括file,ftp）
XMLHttpRequest?是一個 API，它為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。它提供了一個通過 URL 來獲取數(shù)據(jù)的簡單方式，并且不會使整個頁面刷新。這使得網(wǎng)頁只更新一部分頁面而不會打擾到用戶。XMLHttpRequest?在?AJAX?中被大量使用。
因此解決了瀏覽器，創(chuàng)建文件隊(duì)象的差異性，IE使用ActiveOBject，非IE使用XMLHttpRequest，但是此時非IE文件隊(duì)象在操作對象時候即便是支持file協(xié)議，但是onreadystatechenge方法中的一些請求方法與相應(yīng)狀態(tài)碼是HTTP特有的。并且XMLHttpRequest它為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。
XMLHttpRequest 對象
所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject），（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對象。
XMLHttpRequest 用于在后臺與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
對XMLHttpRequest理解的官網(wǎng)網(wǎng)址https://msdn.microsoft.com/zh-cn/library/7sw4ddf8(v=vs.94).aspx
瀏覽器兼容性的解決參考網(wǎng)址：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：需要人機(jī)交互；
? ? ? ? 2、讓ActiveXObject( "Microsoft.XmlDom ")，對象在IE瀏覽器下顯示數(shù)(IE5 ie6支持)；
? ? ? ?3、XMLHttpRequest，它為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
??????4、ajax實(shí)現(xiàn)：主要與服務(wù)器交互。）
“我們不再需要下載并且安裝軟件。一個簡單的web瀏覽器和一個可供使用的互聯(lián)網(wǎng)就足以讓我們在任何時間，任何地點(diǎn)，還有任何平臺上使用任何web應(yīng)用程序。”
簡 單來說，web應(yīng)用很酷，但是相對于桌面應(yīng)用來說，它們有比較顯著的弱點(diǎn)：它們無法在一個有層次的文件夾結(jié)構(gòu)體即文件系統(tǒng)中互動和組織。 幸運(yùn)的是，如果我們使用Filesystem API，我們可以做到。這個API幫助我們控制私有的本地文件系統(tǒng)“沙箱(sandbox)"，在這里我們可以讀和寫文件，創(chuàng)建和排列文件夾。目前不只有Google的Chrome完整的支持Filesystem API，我覺得我們還是有必要學(xué)習(xí)這個強(qiáng)大并且方便的本地存儲特性。
在之前我們操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技術(shù)，由于使用了這些技術(shù)后就很難進(jìn)行跨平臺、或者跨瀏覽器、跨設(shè)備等情況下實(shí)現(xiàn)統(tǒng)一的表現(xiàn)，從另外一個角度來說就是讓我們的web應(yīng)用依賴了第三方的插件，而不是很獨(dú)立。 在HTML5標(biāo)準(zhǔn)中，默認(rèn)提供了操作文件的API讓這一切直接標(biāo)準(zhǔn)化。有了操作文件的API，讓我們的Web應(yīng)用可以很輕松的通過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
---------------------------------------------------------------------------------------------------------------------------
總結(jié)
以上是生活随笔為你收集整理的读文件 —— WEB前端读取本地文件内容哪些事（前台解析txt文件）……的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MODE —— 两个人在计算机上玩圈叉游
- 下一篇： 函数 —— strtok() 例如：