瀏覽器讀寫檔案？
有一份老舊而精巧的代碼（2006或更早），帶js的html，可以只用瀏覽器來處理一些二進制存檔資料，
檔案的讀寫怎么辦？通過變通的方法來完成，
利用十六進制編輯軟體如WinHEX，直接復制十六進制數值為字串，貼到一個TextArea以輸入；
同樣處理過的資料也是生成十六進制字串，用WinHEX以ASCII Hex的格式粘貼到新檔案中，
很巧妙，也有點繁瑣，
FileReader：
最近找到了該程式的漢化版，也是好多年前的了，發現里面設計了直接用<input>來加載檔案的功能，用的vbs呼叫Msxml2.XMLHTTP物件來處理，
可是現在的瀏覽器基本不支持vbs了，就想改一下，用js來完成，
上網搜索了一堆，XMLHTTP/XMLHttpRequest的代碼，有些需要服務器端支持，結果都不理想，或瀏覽器顯示無法創建物件之類的，
剛好new bing的申請也通過了，一番對話式交流，新搜索引擎初試身手，效果不錯，直接給出了示例代碼，
只要是支持HTML5的現代瀏覽器，呼叫FileReader，那叫一個駕輕就熟！
依葫蘆畫瓢，花了一點功夫也就改造完成了，
這時又回想起一個問題，舊瀏覽器（IE10以下，原網銀的最愛，以下用IE8指代）怎么辦，
如何兼容IE8？
有這個必要嗎？
都3202年了，不支持HTML5、不支持ES6的瀏覽器就該回垃圾堆或封存至博物館！
網銀都終于要求兼容Edge啦！
但無聊也是無聊，找了臺老電腦遠程其桌面，繼續隨便搜搜“JS讀取本地文本檔案 IE8兼容”，結果是有一大堆，可大多都是標題黨，
在有些參考資料中，提到使用“Microsoft.XMLDOM”物件，試了好久，更適用于文本資料；
FSO物件貌似也只能OpenTextFile或OpenAsTextStream，
以上方法，讀取到的是文本字串資料，都少了很多非可列印/顯示字符，當然不行，
還是要用ADODB.Stream，因為它有個方法Read()，可讀取二進制資料流，
ADODB.Stream：
碰到兩個問題：
- 瀏覽器無法創建物件，安全問題，容易讓惡意程式隨意讀寫客戶的資料甚至生成木馬，所以默認不開放這個功能，這次改改注冊表，強行開通玩一下，
- 讀不到二進制陣列，在IE8中除錯程式，一到adodb.Read()后面，產生的東西卻不是個object，typeof測驗一下，unknown...
正想放棄adodb.stream,又搜到一些資料，既然.Read()不行，嚴肅地建議用.ReadText()方法，
讀取文本，用來處理二進制資料，這也行？
行，起碼可試，adodb.stream支持對字符集的轉換處理，剛好有個神奇的字符集系列：
ISO-8859-1~15
ISO-8859-1(Latin1/Windows-1252)，MySQL人士比較熟悉，軟體默認的拉丁西歐字符集，它的特點在于對單位元組完全編碼，1Byte=8bit, 它把所有256個碼位全部都排滿了，
所以，可用它存盤任意二進制資料而不會丟失，
至于編碼解碼的處理是另外一回事，后續折騰也是由此……
程式好像改造成功，一個資料也沒少，不管是否為可列印/顯示字符，或者對拉丁來說全是合法字符！
然~~而，讀取的資料好像有幾個地方有差異！不多、但是不同！
換成變體標準ISO-8859-15，差異少了許多，但還是有差異，
十萬個為什么？
差異原因
為什么網上的示例代碼對二進制形式的影像、聲音檔案進行復制都沒出錯，我加載資料到程式中就有差異？
繼續追蹤除錯，找到了端倪，有幾個特定的資料，讀取出來就變了，
比如84就固定轉化為1E、80變AC……
只是檔案復制的話，持續沿用ISO-8859 Latin字符集，同一個管道，怎么In/Out、Read/Write，資料都不會變，
但是一旦用js將資料讀取為數值，在轉化為16進制字串時，問題出現了，
因JavaScript引擎內部，所有字符都用 Unicode 表示，而Latin1字符集中的某些符號，在Unicode中是多位元組編碼，
而ISO-8859-15中，這樣的字符比較少而已，當然，所處碼位也不同，
比如拉丁字符集中用1位元組0x80表示了“€”，而在Unicode中編碼是0x20AC；而“?”則由0x84變成了0x201E，等等……
剛好對上！
原二進制資料就這樣被轉換了，編碼沖突，怎么還原？
再問new bing，多次給出的代碼也存在這個問題，繼續追問Unicode的編碼問題，認錯態度非常好，但是沒有解決方案，
那只能這樣了：
手工轉換
懶得開筆寫代碼，new bing也不給我新答案，
剛好又搜索到一位國外友人的代碼，問題解決，但是TA用的是CP437字符集，直接把所有256個字符的編碼做了個正反對照查詢表，轉換函式非常之臃腫，
我也不想改用CP437，直接輸出了ISO-8859-15中00~FF所有字符經js轉換為數值的結果，和原二進制資料相比，也就存在8處不同的Unicode字符嘛，處理程序中查詢修正一下就行了，
幾行搞定！
還是要自己寫……其實也不費力，
示例，讀取并顯示為HEX
<input type="file" id="fileInput" title="Choose a file" onchange="dispHex(this);"/>
<br />
<h1 id='hexh1'>16進制</h1>
<textarea id='display' title='16進制內容顯示' style='width:600px;height:400px;'></textarea>
<script language='javascript' type='text/javascript'>
function dispHex(f){
var hexString = "";
//獲取顯示框
var disp = document.getElementById("display");
if (window.FileReader){
alert("H5");
var file = f.files[0];
var reader = new FileReader();
//添加讀取完成事件
reader.onload = function(e) {
var buffer = e.target.result;
var array = new Uint8Array(buffer);
for (var i = 0; i < array.length; i++) {
//將每個元素轉化為16進制字串，并補齊兩位，用空格分隔
var s= '0' + array[i].toString(16);
s = s.substr(s.length - 2, 2);
hexString += s;
}
//將字串顯示在頁面上
disp.textContent = hexString;
};
reader.readAsArrayBuffer(file);
}
else if (typeof window.ActiveXObject != 'undefined') {
alert("IE9及以下，請啟用ActiveX控制元件互動！\n如不能打開檔案，請將網頁下載至本地運行，\n如何開啟Adodb.Stream請自行搜索……");
var file = f.value; //網頁不在本地，則為fakepath
//f.select();
//file = document.selection.createRange().text
hexString = AdodbReadHexFromFile(file);
disp.value = https://www.cnblogs.com/repus/archive/2023/03/27/hexString;
}
else alert("Other!");
}
//使用ActiveX，要求瀏覽器開啟相應功能和安全設定，未加錯誤處理
function AdodbReadHexFromFile(fileURL){
var binStr, hexStr="";
//ADODB方式，需啟用：https://www.cnblogs.com/weiweictgu/archive/2007/03/02/661940.html
var inStream = new ActiveXObject("ADODB.Stream");
inStream.Type = 2; //adTypeBinary = 1, 2為Text
inStream.Open();
inStream.CharSet = "iso-8859-15";
//iso-8859-15比iso-8859-1更少收錄Unicode中的多位元組符號，
inStream.LoadFromFile(fileURL);
//.Read()為二進制陣列，可結果typeof=unknown.WHY.?.所以用ReadText變通...
binStr = inStream.ReadText();
inStream.Close();
inStream = null;
//binStr2HEX
//https://www.codeproject.com/articles/17825/reading-and-writing-binary-files-using-jscript
var ISO885915=[8364,352,353,381,382,338,339,376]; //單位元組集中包含的Unicode字符編碼
var HexOrg=['A4','A6','A8','B4','B8','BC','BD','BE']; //上述字符Latin0真實16進制值，由比較而來，437/Latin1同理可得
var isoCheckNum=ISO885915.length;
for (var i=0 ; i<binStr.length ; i++) {
var curCode=binStr.charCodeAt(i);
//charCodeAt可能會解釋成多位元組，有字符會被錯誤轉換，如'€'
//因JavaScript引擎內部，所有字符都用 Unicode 表示
var s,isUnicode=false;
if(curCode>=256){
var j; //IE8不支持indexOf()
for(j=0;j<isoCheckNum;j++) if(curCode==ISO885915[j]) break;
if(j<isoCheckNum) isUnicode=true;
}
if(isUnicode) s=HexOrg[j]; //查表將Unicode字符轉換回正確的單位元組16進制
else{
s= '0' + curCode.toString(16).toUpperCase();
//確保是兩位數的HEX
var bytes = 2;
//var bytes=Math.floor(s.length/2)*2; //多位元組內容處理
s = s.substr(s.length - bytes, bytes);
}
hexStr += s;
}
return hexStr;
}
</script>后記
ISO-8859之外，還有許多字符集可使用，只要找到沖突編碼并轉換處理即可；
如果要js動態生成檔案供瀏覽器下載，現代瀏覽器用blob加createObjectURL輕松搞定；
在分離FileReader一段代碼至子函式時，對異步操作的處理還鬧過小問題，Promise的邏輯還真是有些不適合本中老年；
IE8？不想玩了，
奇怪的是，再過了幾天，問new bing本文類似的問題，它拒絕給出示例代碼，說它不會，說它沒有記憶，說IE8沒法處理這個讀取本地二進制檔案的問題……
本文來自博客園，作者：supervisor，轉載請注明原文鏈接：https://www.cnblogs.com/repus/p/17260978.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548375.html
標籤：其他
上一篇：單個el-radio點擊選中取消
下一篇：CSS in JS (JSS)