读文件 —— WEB前端读取本地文件内容哪些事（前台解析txt文件）……
強制讓瀏覽器允許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/
---------------------------------------------------------------------------------------------------------------------------
人機交互方式的實現：
演示效果截圖：
代碼部分（interaction.html）：
? ? ?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");} //當使用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
---------------------------------------------------------------------------------------------------------------------------
總結
以上是生活随笔為你收集整理的读文件 —— WEB前端读取本地文件内容哪些事（前台解析txt文件）……的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MODE —— 两个人在计算机上玩圈叉游
- 下一篇： 函数 —— strtok() 例如：