javascript 二進位制處理
阿新 • • 發佈：2022-04-20
鑑於個人認為網上各種文章對於二進位制處理講的過於囉嗦，做一下總結，看不懂的再去參考其它文章
javascript 以前不支援處理二進位制的，不知何時(自已去查)開始支援了，涉及的物件有以下幾個：
1. Blob: 二進位制資料型別的一個封裝
2. File: 繼承自Blob，多了一個屬性, input file 物件的 files 屬性的上傳檔案就是一個File物件
3. FileReader: 用於讀取 Blob 物件(還有沒有其它功能，還沒用過)，通過 read 相關的方法 和 onload 事件非同步讀取一個Blob物件
4. Int8Array, Uint8Array, Int16Array, Int32Array 等二進位制陣列
5. ArrayBuffer: 一種記憶體檔案形式，屬於Blob中資料儲存成員型別，繼承了 Int8Array, Uint8Array, Int16Array, Int32Array
6. DataView: 用來讀取 ArrayBuffer
下面是我用於檔案上傳時轉base64的一個demo
<!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> <title></title> <script language="javascript" type="text/javascript"> // <![CDATA[ function toBase64(arrayBuffer) { var binary = ''; var bytes = new Uint8Array(arrayBuffer); var len = bytes.byteLength;for (var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary); } function Button1_onclick() { var file = File1.files[0]; var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function (p) { if (p.target.readyState == FileReader.DONE) { var dataView = new DataView(p.target.result); var count = dataView.byteLength; var byteData = dataView.getUint8(0); //讀取第一個位元組 var bytes = new Uint8Array(p.target.result); //直接將結果轉換成一個位元組陣列 var base64 = toBase64(p.target.result); console.log(base64); } }; reader.onerror = function () { console.log('讀取失敗'); console.log(reader.error); } } // ]]> </script> </head> <body> <input id="File1" type="file" /> <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" /> </body> </html>