強制讓瀏覽器允許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

問題回覆——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下面要實現這樣的功能必須使用瀏覽器擴充套件+外掛。

---------------------------------------------------------------------------------------------------------------------------

人機互動方式的實現：

演示效果截圖：

程式碼部分（interaction.html）：

<script src="jquery.js"></script>
<input type="file" value="選擇檔案" id="upload" style="display:none;" onclick="return fileUpload_onclick()" onchange="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);// undefined
		console.log(selectedFile.type);// text/plain
		var name = selectedFile.name;//讀取選中檔案的檔名
        var size = selectedFile.size;//讀取選中檔案的大小
        console.log("wenjianming:"+name+"daxiao:"+size);//wenjianming:testfile.txtdaxiao:20
        var 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	

---------------------------------------------------------------------------------------------------------------------------

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。

對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)：

<!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" onclick="loadXMLDoc()">Change Content</button>
</body>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=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

---------------------------------------------------------------------------------------------------------------------------